HTML 表の列の横幅・色をまとめて指定する
列の横幅を指定する方法は各列の1行目に横幅を指定するなどの方法がありますが、HTMLタグの<col>を使うことでテーブルの列の横幅をまとめて指定することができます。
<col>を使ってまとめて指定する
<table>
<colgroup>
<col width="50%" style="background-color: #FAFAFA;">
<col width="25%">
<col width="25%">
</colgroup>
<thead>
<tr>
<td>ペット</td>
<td>名前</td>
<td>性別</td>
</tr>
</thead>
<tbody>
<tr>
<td>犬</td>
<td>タロウ</td>
<td>オス</td>
</tr>
<tr>
<td>猫</td>
<td>ミャー</td>
<td>メス</td>
</tr>
<tr>
<td>魚</td>
<td>フィッシュ</td>
<td>オス</td>
</tr>
</tbody>
</table>
See the Pen
by kura (@kuranopen)
on CodePen.
<col>を使って1列目に50%の横幅、2列目以降に25%の横幅を指定しています。
<col>の使い方
- 横幅は
width属性に数値か%を指定します
<col width="25%">
<col width="250">
span属性を使うと複数の列数を指定できます
<col width="25%" span="2">- 列の左から指定します
- 構造的なマークアップになるように
<colgroup>内に指定します
応用
See the Pen
by kura (@kuranopen)
on CodePen.
