【HTML】テーブルを作成するtable要素を学習してCSSで装飾してみよう

HTMLにおけるテーブルとはのことで、情報(データ)を見やすく整列したものを指します。

掛け算の九九(3の段まで)
出席番号
赤井
上田
沖田
生徒名簿

テーブルを表現するための要素はtable要素ですが、ul要素やol要素と同じく単体では機能しません。

テーブル内のデータを表示する一つ一つの領域のことをセルcell)と言いますが、このセルを表現するためにもth要素やtd要素が使われます。
また、行を表すtr要素、ヘッダー領域を表すthead要素やデータ領域を表すtbody要素など、複数の要素を組み合わせて使用されます。

つまり、テーブルを表現するためには複数の要素について使い方を理解する必要があります。
最初は少し難しく感じるかもしれませんが、丸暗記する必要はないので「調べながら作れる」を目標に学習してみてください。

理解度チェック

  • HTMLのテーブルとはどのようなものを指しますか?

行(row)と列(column)を覚えよう

表の横方向のデータをrowと言い、縦方向のデータをcolumnと言います。

行(row)の例

出席番号
赤井
上田
沖田
3行目の行(row)の背景を黄色にした例

列(column)の例

出席番号
赤井
上田
沖田
2列目の列(col)の背景を黄色にした例

どちらが横で、どちらが縦なのか覚えるまで少し時間が必要かもしれませんが、この行と列は覚えたほうが得です。

さらにrowcolumn(省略時はcol)を一緒に覚えてしまいましょう

近年、Webサイトでも何かしらのデータを保存して使用する機会は多くなっており、このデータを保存する際に使用するDB(データベース)でも必要な知識になります。
また、HTMLの属性名やCSSフレームワークのクラス名ではこのrowcolを使用した命名がされていることがあります。

理解度チェック

  • 行はどの方向を指しますか?
  • 列はどの方向を指しますか?
  • rowは行と列どちらを指しますか?
  • column(col)は行と列どちらを指しますか?

テーブルの作り方

最初にテーブルに必要な要素の説明をしながら、様々なテーブルの作り方について説明します。

これまで表示してきたテーブルと異なり、初期のテーブルには枠線がありません
枠線や背景、セルの大きさなどはCSSで指定します

単純なテーブル

どの様なテーブルでも親要素にtable要素が必要です

table要素の子要素には、行の要素であるtr要素(table-row)を記述し、さらにその子要素に必要なセルの数だけtd要素(table-data)を記述します。


<table>
    <tr>
        <td>1</td>
        <td>赤井</td>
        <td>優</td>
    </tr>
    <tr>
        <td>2</td>
        <td>上田</td>
        <td>葵</td>
    </tr>
    <tr>
        <td>3</td>
        <td>沖田</td>
        <td>晶</td>
    </tr>
</table>
    
赤井
上田
沖田

ヘッダーのある単純なテーブル

先程の表に加え、1行目に行のtr要素を追加し、td要素ではなくth要素(table-header)で列名を記述しています。
このth要素で定義された列名は初期値で太字となります。

また、行の一番左側のセルをth要素にすることで行名を表現することもできます。

th要素のscope属性は、このデータ名が列方向の名を表すか、行方向の名を表すかを指定するためのものになります。
省略することも可能ですが、ブラウザや読み上げソフトが誤らずに判断するためには記述することが無難です

列の方向を表す場合はscope="col"を指定します。
行の方向を表す場合はscope="row"を指定します。


<table>
    <tr>
        <th scope="col">出席番号</th>
        <th scope="col">姓</th>
        <th scope="col">名</th>
    </tr>
    <tr>
        <td>1</td>
        <td>赤井</td>
        <td>優</td>
    </tr>
    <tr>
        <td>2</td>
        <td>上田</td>
        <td>葵</td>
    </tr>
    <tr>
        <td>3</td>
        <td>沖田</td>
        <td>晶</td>
    </tr>
</table>
    
出席番号
赤井
上田
沖田

thead要素、tbody要素、tfoot要素のあるテーブル

ヘッダー行やデータの行、フッター行を明示的に示すためにそれぞれの要素を用いることができます。

ヘッダー行はthead要素(table-header)を親要素に記述します。セル単体をヘッダーとして示す場合はth要素を使用しますが、行そのものがヘッダーであることを示す場合にはthead要素を使用します。

同じ様にデータ行を示す場合にはtbody要素(table-body)を使用します。

テーブル下部にヘッダーと同じ様な列名を表示する場合にはtfoot要素(table-footer)を使用します。

また、これらの順序はthead要素、tbody要素、tfoot要素の順に使用しなければなりません

いずれも省略することができますが、CSSなどでそれぞれの行やセルを装飾する際にはそれぞれの要素を使用したほうが便利な場合があります


<table>
    <thead>
        <tr>
            <th scope="col">出席番号</th>
            <th scope="col">姓</th>
            <th scope="col">名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>赤井</td>
            <td>優</td>
        </tr>
        <tr>
            <td>2</td>
            <td>上田</td>
            <td>葵</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沖田</td>
            <td>晶</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="col">出席番号</th>
            <th scope="col">姓</th>
            <th scope="col">名</th>
        </tr>
    </tfoot>
</table>
    
出席番号
赤井
上田
沖田
出席番号

caption要素のある単純なテーブル

caption(キャプション)要素は表のタイトルを表示する場合に使用する要素です。

caption要素はtable要素の最初の子要素でなければなりません


<table>
    <caption>テーブルの作り方</caption>
    <tr>
        <td>1</td>
        <td>赤井</td>
        <td>優</td>
    </tr>
    <tr>
        <td>2</td>
        <td>上田</td>
        <td>葵</td>
    </tr>
    <tr>
        <td>3</td>
        <td>沖田</td>
        <td>晶</td>
    </tr>
</table>
    
赤井
上田
沖田
テーブルの作り方

理解度チェック

  • テーブルを実装してブラウザで表示してみましょう!

テーブルをCSSで装飾する

HTML5以前ではテーブルの枠線や背景色をHTML要素の属性に指定していました。
しかし、HTML5からはCSSでの装飾が推奨されており、それぞれの属性は非推奨となっています。

ここでは、テーブルをCSSで装飾する方法について解説します。

セルに枠線を引く

セルに枠線を引くには、CSSのborder属性をセルであるth要素とtd要素に指定します。

関連: 【CSS】要素の境界線を指定するborder属性

次の例では、table要素にも枠線を指定しています。


table, th, td {
    border: solid 1px black;
}
    

<table>
    <thead>
        <tr>
            <th scope="col">出席番号</th>
            <th scope="col">姓</th>
            <th scope="col">名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>赤井</td>
            <td>優</td>
        </tr>
        <tr>
            <td>2</td>
            <td>上田</td>
            <td>葵</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沖田</td>
            <td>晶</td>
        </tr>
    </tbody>
</table>
    
出席番号
赤井
上田
沖田

結果をみて分かる通り、各セルの境界線が分離しています。
これは、table要素に設定されているCSSのborder-collapse属性の初期値がseparate(分離)に設定されているからです。

セル間の距離を調整する

セル間の距離を調整する場合は、border-spacing属性をtable要素に指定します。


table {
    border-spacing: 1rem;
}

table, th, td {
    border: solid 1px black;
}
    

<table>
    <thead>
        <tr>
            <th scope="col">出席番号</th>
            <th scope="col">姓</th>
            <th scope="col">名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>赤井</td>
            <td>優</td>
        </tr>
        <tr>
            <td>2</td>
            <td>上田</td>
            <td>葵</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沖田</td>
            <td>晶</td>
        </tr>
    </tbody>
</table>
    
出席番号
赤井
上田
沖田

セルの枠線を分離しない(共有する)

border-collapse属性をcollapseに指定するとセル間の枠線をセル同士で共有するように指定できます。
border-collapse属性はtable要素に指定します。


table {
    border-collapse: collapse;
}

table, th, td {
    border: solid 1px black;
}
    

<table>
    <thead>
        <tr>
            <th scope="col">出席番号</th>
            <th scope="col">姓</th>
            <th scope="col">名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>赤井</td>
            <td>優</td>
        </tr>
        <tr>
            <td>2</td>
            <td>上田</td>
            <td>葵</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沖田</td>
            <td>晶</td>
        </tr>
    </tbody>
</table>
    
出席番号
赤井
上田
沖田

セルを装飾する


table {
    border-collapse: collapse;
}

table, th, td {
    border: solid 1px black;
}

th, td {
    padding: 4px 8px;
}

th {
    background-color: aquamarine;
    color: blueviolet;
}

td {
    background-color: antiquewhite;
}
    

<table>
    <thead>
        <tr>
            <th scope="col">出席番号</th>
            <th scope="col">姓</th>
            <th scope="col">名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>赤井</td>
            <td>優</td>
        </tr>
        <tr>
            <td>2</td>
            <td>上田</td>
            <td>葵</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沖田</td>
            <td>晶</td>
        </tr>
    </tbody>
</table>
    
出席番号
赤井
上田
沖田

理解度チェック

  • テーブルを自由に装飾してブラウザで表示してみましょう!

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。