HTML

tableタグで表を作ってみよう

tableタグを使って表のマークアップをしてみます。

  • table
  • thead
  • tbody

table

・前回用語を覚えたところで早速表を作成していきます。今回は比較的よく使われる沿革の表を作っていきます。会社の歴史のようなものです。

・まず全体をtableタグで囲います。との中にtheadとtbodyタグを書いていきます。ただ、見出しがない場合はtheadタグを省くことができるので覚えておきましょう。

thead

・まずtheadの中身にはtrタグで囲みます。その中に見出しのセルを入れたいのでthタグをマークアップしていきます。例えば一列目には年月日、二列目には出来事と書いていきます。

tbody

・次にtbodyの中身にはtrタグで囲みます。その中に中身を書いていきたいのでtdタグでマークアップをしていきます。例えば一列目には2020年1月と書いて2列目には勉強開始と書いていきましょう。

・同様に内容を増やしていきまいのでtrタグの中にtdタグと言うまとまりを増やしていきましょう。ショートカットキーがあるので選択して、 macOS なら Shift + Option + 下矢印キー、 Windows なら Shift + Alt + 下矢印キーで複製してあげます。

・あとは中身を変えてあげればいいので1列目に2020年と書いて2列目に収益化などと書いていきましょう。

-HTML