【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をコピーしました!
    目次