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.

  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。