【HTMLを書いていこう】tableタグで表を作ってみよう

目次

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

table

前回までで表を表現する方法を見てきました。

詳しくは『【HTMLを書いていこう】マークアップ言語で表を作って行く方法について』を御覧ください。

前回用語を覚えたところで早速表を作成していきます。

今回は比較的よく使われる沿革の表を作っていきます。

会社の歴史のようなものです。

・まず全体を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列目に収益化などと書いていきましょう。

以上

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次