ヘッダー付きのテーブル

初めに

  • 学習した内容をアウトプットするために記事を書いていきます。

  • 初学にも参考になったり、わかりやすいように作成していきます。

ヘッダー付きのテーブルの完成図

コードと解説

<table border="1">
    <tr>
      <th>姓</th>
      <th>名</th>
    </tr>
    <tr>
      <td>山田</td>
      <td>太郎</td>
    </tr>
    <tr>
      <td>田中</td>
      <td>花子</td>
    </tr>
  </table>
</body>

  • table要素の中にtr要素を挿入する。

  • 通常のtableにはtr要素の中にtd要素を挿入する。

  • ヘッダーを表示させるにはtr要素の中にth要素を挿入する。

  • th要素はtd要素と同じような配列で横並びで表示される。

  • th要素はtable headerの略で、tableのヘッダー要素を定義する。

結語

  • tableのヘッダーはth要素で表示する。

  • th要素はtable headerの略。