caption th thead tfoot 表に意味を持たせる コピペで使えるHTML+CSS

スポンサーリンク
スポンサーリンク

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>
野菜の栽培表
農場 ニンジン キャベツ
みどり農場 400 120
きいろ農場 100 300
合計 500 420

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