【HTML】表の表現

HTML

今日はHTMLを少し復習したのでアウトプットしていきます。 省略されているタグをつい忘れてしまう、、、

HTMLで表を作成する

下記の表をHTMLで作成するには？

年 出来事
2020 HTML学習開始
2021 Ruby学習開始

まず、どんなタグが必要か？

  • table: 表の全体

  • thead: 「table head」の略で見出し部分

  • tbody: 「table body」の略で本体部分

  • tr: 「table row」の略でテーブルの各業を表す

  • th: 「table header cell」の略で見出し部分の各カラム部分を表す

  • td: 「table data cell」の略で本体部分の各カラム部分を表す

実際にコードを書いていく

<h2>学習沿革</h2>

<table> # 表を作成する宣言
  <thead> # 表の見出し部分
    <tr>
      <th>年</th> # 見出しの各カラム
      <th>出来事</th> # 見出しの各カラム
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020</td> # テーブル本体の各データ
      <td>HTML学習開始</td> # テーブル本体の各データ
    </tr>
    <tr>
      <td>2021</td> # テーブル本体の各データ
      <td>Ruby学習開始</td> # テーブル本体の各データ
    </tr>
  </tbody>
</table>

省略されているタグを一眼で理解できるように学習継続していきたい！