小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

HTMLテーブルの列の制御

WEB

テーブル列の見栄えは、セル毎のtd要素やth要素ではなく、列毎のcol要素により一括で指定することが出来ます。

<html>
<body>
<table border="1">
<col span="1" width="50px" style="color: #ffffff; background-color: #000000">
<col span="1" width="60px" style="color: #eeeeee; background-color: #111111">
<col span="1" width="70px" style="color: #dddddd; background-color: #222222">
<col span="1" width="80px" style="color: #cccccc; background-color: #333333">
<col span="1" width="90px" style="color: #bbbbbb; background-color: #444444">
<col span="1" width="50px" style="color: #aaaaaa; background-color: #555555">
<col span="1" width="60px" style="color: #999999; background-color: #666666">
<col span="1" width="70px" style="color: #888888; background-color: #777777">
<col span="1" width="80px" style="color: #777777; background-color: #888888">
<col span="1" width="90px" style="color: #666666; background-color: #999999">
<caption>サンプル</caption>
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
<th>見出し４</th>
<th>見出し５</th>
<th>見出し６</th>
<th>見出し７</th>
<th>見出し８</th>
<th>見出し９</th>
<th>見出し１０</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
<td>データ４</td>
<td>データ５</td>
<td>データ６</td>
<td>データ７</td>
<td>データ８</td>
<td>データ９</td>
<td>データ１０</td>
</tr>
</tbody>
</table>
</body>
</html>