caption th thead tfoot要素の概要
表組みに意味を持たせるHTML | ||||||||||||||
<table><caption>~</caption><thead><tr><th>~</th></tr><tbody><tr><td>~</td></tr></tbody><tfoot><tr><th>~</th></tr></tfoot></table> |
||||||||||||||
目的 | 表に意味を持たせます。<caption>が表のタイトル。<thead>が表のヘッダー部分であり、見出しである<th>を含む部分が該当します。下の表であれば農場、ニンジン、キャベツ、合計のセル。<tfoot>は表のフッター。 | |||||||||||||
関連 | <table> <tr> <td> <colgroup> <col> | |||||||||||||
|
||||||||||||||
<caption> は<thead>に含まれません。<th>は見出しですから、変動しない項目について使用します。 <table style="text-align:center"> <caption>野菜の栽培票</caption> <thead> <tr> <th>農場</th> <th>ニンジン</th> <th>キャベツ</th> </tr> </thead> <tbody> <tr> <td>みどり農場</td> <td>400</td> <td>120</td> </tr> <tr> <td>きいろ農場</td> <td>100</td> <td>300</td> </tr> </tbody> <tfoot> <tr> <th>合計</th> <td>500</td> <td>420</td> </tr> </tfoot> </table> |
属性
th要素の属性
- colspan,rowspan
-
<td> を参照
- headers
- id属性値を用いて<td>のhedaers値と関連付けをする際に用いる。<colgroup>を用いて列ごとに関連付けたほうが良い。1~2行目1列目をid=11、1~3行目2列~3列目をid=12として関連付けた。
関連票 id=id-11 id=id-12 headers=id-12 headers=id-11 headers=id-12 headers=id-12 headers=id-11 headers=id-12 headers=id-12 合計 headers=id-12 headers=id-12 - scope
-
col,row,colgroup,rowgroupを指定することで、見出しがどの方向に対応するかを指定する。ただし、scopeを指定しなくてもわかるような表づくりをするべきで、極力不要になるように作るべきです。
CSSデザイン
角丸の表を作成する

table 角丸の表を作成する 内側の壁紙問題も対応 コピペで使えるHTML+CSS
CSSのborder-radiusを使ってtable表の外周について角を丸くします。しっかりと丸みを持たせるためにテーブル内のセルをどのように処理するかについて、first-childとlast-childを実装した汎用性の高い設計も解説します。