テーブル

行とセルの数

表は行とセルでできている

数字や条件をならべて見比べたいときは表を使います。表のタグは入れ子が深いので、外側から順に覚えます。使うタグは次の通りです。

  • table が表の全体を囲みます
  • tr が横 1 行です。table row の略です
  • th は見出しのセル、td は中身のセルです

セルは tr の中に左から順に書きます。3 列の表なら、どの tr にもセルを 3 つずつ書きます。数がそろっていないと表が崩れます。

thead と tbody で役割を分ける

見出しの行は thead で、中身の行は tbody で囲みます。分けておくと、あとから見出しの行だけ色を変えるのが簡単になりますし、読み上げソフトもこの列が何の列かを利用者に伝えられます。

<table> <thead> <tr><th>項目</th><th>値</th></tr> </thead> <tbody> <tr><td>HTML</td><td>1 か月</td></tr> </tbody> </table>

今回書くこと

経歴と作品のあいだにスキルの section をつくり、3 列の表を書きます。見出しは できること・学んだ期間・自信のほど の 3 つ、中身は 3 行です。section には skills の id を付け、header のメニューにもスキルへのリンクを足します。

課題

  1. 経歴と作品のあいだに skills の id を付けた section をつくる
  2. thead に th を 3 つならべた見出しの行を書く
  3. tbody に td を 3 つずつ持つ行を 3 行書く
  4. header のメニューに スキル へのリンクを足す

ヒント

index.html
プレビュー

できているか

  • スキルの区切りに表がある
  • 見出しのセルが 3 つある
  • 中身のセルが 3 行分そろっている