技術共有

【HTML入門】レッスン10 - テーブル、つまりテーブルタグ

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

このセクションでは、HTML のテーブルについて説明します。たとえば、Excel のような学生の通知表をセルごとに見ることがよくあります。これらはすべて表です。

テーブルのラベル名は テーブル 。

目次

1 表内のいくつかのサブタグ

1.1 ヘッダー領域

1.2 テーブルコンテンツエリア

1.3 行と列

2 ちょっとした練習

2.1 簡単なトランスクリプトを作成する

2.2 枠線を追加する

2.3 クロスロー

2.4 柱の交差

1 表内のいくつかのサブタグ

1.1 ヘッダー領域

たとえば、トランスクリプトでは上部に見出しが必要です。学生証、学生の名前、対象者、スコア、全体的な結果これらのフィールドですね。

これらのフィールドはテーブル ヘッダーに配置されます。これには thead タグが必要です。

1.2 テーブルコンテンツエリア

次に、テーブルのコンテンツ領域には、より詳細なデータが必要です。たとえば、学生番号は 001、名前は Zhang San、科目は数学、スコアは 80 です。他の科目がない場合は、合計スコアが必要になります。は80です。他に科目がある場合 科目については合計しますよね？

これらのコンテンツは、tbody タグが必要なテーブル コンテンツ領域に配置されます。

1.3 行と列

表は行と行に分割され、列と列に切断されます。切断が完了すると、それぞれの部分がセル、小さな正方形、小さな正方形になります。

さらに、次の点にも注意してください。行には列が含まれます。これを覚えておいてください。。

行ラベル名は tr  。

ヘッダーのセルラベルは次のとおりです。 番目 、テーブル本体領域のセルラベルはtd 。

2 ちょっとした練習

2.1 簡単なトランスクリプトを作成する

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table>
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>姓名</th>
  16.                     <th>语文成绩</th>
  17.                     <th>数学成绩</th>
  18.                     <th>HTML成绩</th>
  19.                     <th>总成绩</th>
  20.                 </tr>
  21.             </thead>
  22.             <tbody>
  23.                 <tr>
  24.                     <td>1</td>
  25.                     <td>张三</td>
  26.                     <td>80</td>
  27.                     <td>90</td>
  28.                     <td>96</td>
  29.                     <td>266</td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>2</td>
  33.                     <td>李四</td>
  34.                     <td>71</td>
  35.                     <td>80</td>
  36.                     <td>100</td>
  37.                     <td>251</td>
  38.                 </tr>
  39.             </tbody>
  40.         </table>
  41.     </body>
  42. </html>

2.2 枠線を追加する

この表示は少し汚いので、枠線を追加すると表が見やすくなります。1 つ追加できます 境界線="1" 属性設定については、以下のコードを確認し、Web ページを更新して、見た目が大幅に改善されるかどうかを確認してください。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>姓名</th>
  16.                     <th>语文成绩</th>
  17.                     <th>数学成绩</th>
  18.                     <th>HTML成绩</th>
  19.                     <th>总成绩</th>
  20.                 </tr>
  21.             </thead>
  22.             <tbody>
  23.                 <tr>
  24.                     <td>1</td>
  25.                     <td>张三</td>
  26.                     <td>80</td>
  27.                     <td>90</td>
  28.                     <td>96</td>
  29.                     <td>266</td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>2</td>
  33.                     <td>李四</td>
  34.                     <td>71</td>
  35.                     <td>80</td>
  36.                     <td>100</td>
  37.                     <td>251</td>
  38.                 </tr>
  39.             </tbody>
  40.         </table>
  41.     </body>
  42. </html>

2.3 クロスロー

もちろん、横列表示を作成することもできます。たとえば、Zhang San と Li Si をクラス 1 の列に配置し、クラス 1 の生徒が 2 列を占めるようにします。

次に、クラスに Wang Wu と Zhao Liu を含むクラス 2 を追加し、彼らに大きな列を占有させ、クラス 2 に 2 つの小さな列ができるようにします。

ここで設定する必要があるもの 行スパン 属性。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>班级</th>
  16.                     <th>姓名</th>
  17.                 </tr>
  18.             </thead>
  19.             <tbody>
  20.                 <tr>
  21.                     <td>1</td>
  22.                     <td rowspan="2">1班</td>
  23.                     <td>张三</td>
  24.                 </tr>
  25.                 <tr>
  26.                     <td>2</td>
  27.                     <td>李四</td>
  28.                 </tr>
  29.                 <tr>
  30.                     <td>3</td>
  31.                     <td rowspan="2">2班</td>
  32.                     <td>王五</td>
  33.                 </tr>
  34.                 <tr>
  35.                     <td>4</td>
  36.                     <td>赵六</td>
  37.                 </tr>
  38.             </tbody>
  39.         </table>
  40.     </body>
  41. </html>

上記のコードを見ると、td セルに rowspan 属性を設定していますが、これはクラス 1 の 2 番目のセルでもあるため、同じ td コードを追加する必要はありません。

2.4 柱の交差

クロスカラムとは、同じ特性を持つ複数のカラムを指すため、1 つのカラムの情報を表示するだけで十分です。先ほどの行の交差と同様に、張三も李斯もクラス１であることが目的ではないので、重複表示を避けるため、情報属性は同じなのでどちらもクラス１なので、クラス 1 を表示するには、行を横切るだけです。

列の交差とは、複数の列を結合することを意味します。例を挙げてみましょう。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>班级</th>
  16.                     <th>姓名</th>
  17.                     <th>成绩</th>
  18.                 </tr>
  19.             </thead>
  20.             <tbody>
  21.                 <tr>
  22.                     <td>1</td>
  23.                     <td rowspan="2">1班</td>
  24.                     <td>张三</td>
  25.                     <td>90</td>
  26.                 </tr>
  27.                 <tr>
  28.                     <td>2</td>
  29.                     <td>李四</td>
  30.                     <td>80</td>
  31.                 </tr>
  32.                 <tr>
  33.                     <td colspan="4">1班总人数：2，总成绩：170</td>
  34.                 </tr>
  35.                 <tr>
  36.                     <td>3</td>
  37.                     <td rowspan="2">2班</td>
  38.                     <td>王五</td>
  39.                     <td>70</td>
  40.                 </tr>
  41.                 <tr>
  42.                     <td>4</td>
  43.                     <td>赵六</td>
  44.                     <td>100</td>
  45.                 </tr>
  46.                 <tr>
  47.                     <td>4</td>
  48.                     <td>冯七</td>
  49.                     <td>75</td>
  50.                 </tr>
  51.                 <tr>
  52.                     <td colspan="4">2班总人数：3，总成绩：245</td>
  53.                 </tr>
  54.             </tbody>
  55.         </table>
  56.     </body>
  57. </html>

ハハ、上記のコードは、実はこのスクリーンショットの効果は得られません。コードを取得して問題があることがわかった場合は、次のことを思い出してください。教えておお。

個人プロフィール

彼は 30 年以上テクノロジーの研究に専念しており、Java、linux、javascript、php、css などのさまざまな言語に堪能であり、オープンソース分野で多くの貢献を行っています。将来の参考のために技術開発におけるいくつかの問題を共有する開発者ドキュメント ステーション。

私の連絡先情報

郵便