Contents
導入
HTMLのテーブル要素のデザインをする事が続いたので、ちょっとメモ代わりにtable要素のおさらいをしてみました。
Table
HTMLのtable要素使うとページ内で表を作る事が出来ます。
table要素
基本的な要素
以下の要素があればシンプルなテーブルを作る事が可能です。
table | テーブルを定義 |
tr | テーブルの行を定義 |
th | ヘッダセルを作成 |
td | データセルを作成 |
<table> <tr> <th>名</th> <th>姓</th> </tr> <tr> <td>織田</td> <td>信長</td> </tr> <tr> <td>武田</td> <td>信玄</td> </tr> </table>
姓 | 名 |
---|---|
織田 | 信長 |
武田 | 信玄 |
thead, tbody, tfoot
thead, tbody, tfoot要素はそれぞれテーブルのヘッダ、ボディ、フッタを定義します。
tbody | テーブルのボディ部を定義 |
thead | テーブルのヘッダ部を定義 |
tfoot | テーブルのフッタ部を定義 |
caption
caption タグを使うとテーブルにキャプションをつける事が出来ます。
colspan
結合するセルの数を指定します。
テーブルの例
<table> <caption>戦国武将のデータ</caption> <thead> <tr> <th colspan="2">戦国武将</th> </tr> </thead> <tbody> <tr> <th>姓</th> <th>名</th> </tr> <tr> <td>織田</td> <td>信長</td> </tr> <tr> <td>武田</td> <td>信玄</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">*この表は独自の調査に基づきます。</td> </tr> </tfoot> </table>
戦国武将 | |
---|---|
姓 | 名 |
織田 | 信長 |
武田 | 信玄 |
*この表は独自の調査に基づきます。 |
Style sheet
テーブルにスタイルシートを適用します。
border-collapse
border-collapseはテーブルのセルの境界線のレイアウトを指定します。
collapse
セルの境界線のボーダーを重ねて表示。
border-collapse: collapse;
姓 | 名 |
---|---|
織田 | 信長 |
武田 | 信玄 |
separate
セルの境界線のボーダーを間隔をあけて表示。
border-collapse: separate;
姓 | 名 |
---|---|
織田 | 信長 |
武田 | 信玄 |
border-spacing
border-collapse で separate を指定した場合にはborder-spacing で間隔のサイズを指定する事が出来ます。
//border-spacing: horizontal vertical; border-spacing: 10px 20px;
姓 | 名 |
---|---|
織田 | 信長 |
武田 | 信玄 |
StyleSheetの例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <table> <caption>戦国武将のデータ</caption> <thead> <tr> <th colspan="2">戦国武将</th> </tr> </thead> <tbody> <tr> <th>姓</th> <th>名</th> </tr> <tr> <td>織田</td> <td>信長</td> </tr> <tr> <td>武田</td> <td>信玄</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">*この表は独自の調査に基づきます。</td> </tr> </tfoot> </table> </body> </html>
table { width: 300px; } table thead tr { background: #f69542; } table tbody tr { background: #dfdfdf; } table tbody tr td { text-align: left; } table tfoot tr { background: #c9ecf6; font-size: 0.7em; text-align: right; } table tfoot tr td { text-align: right; }
戦国武将 | |
---|---|
姓 | 名 |
織田 | 信長 |
武田 | 信玄 |
*この表は独自の調査に基づきます。 |
あとがき
非常に大雑把なまとめになってしまいましたがtfoot要素などは普段あまり使う機会も無く、その存在を忘れがちなのであとで見返せるようにメモとして残しておきます。
参照
開発者向けのWeb技術/MDN
HTMLクイックリファレンス
Html5 logo by © https://www.w3.org/html/logo