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を実装した汎用性の高い設計も解説します。