CSS、colgroup

HTMLのtableでcolgroupってのがあるってのをこないだ初めて知った…

<table>
<tr>
<td class="c1">1-1</td>
<td class="c2">1-2</td>
<td class="c2">1-3</td>
</tr>
<tr>
<td class="c1">2-1</td>
<td class="c2">2-2</td>
<td class="c2">2-3</td>
</tr>
<tr>
<td class="c1">3-1</td>
<td class="c2">3-2</td>
<td class="c2">3-3</td>
</tr>
</table>

通常はDreamWeaver等のツールでHTMLを書くからこの辺はもちろん自動的にやってくれるけど、上記のHTMLだと行数が増えてくるとファイルサイズが大きくなる。
それくらいだったらあまり問題ないかもしれないけど、テーブルのデータの部分（1-1〜3-3）が別の所で生成される場合（サーブレットだったりAjaxだったり）、デザインを変えたい場合はプログラムの部分を変更しなければいけない。
それを下のように書くと、tr, tdタグにはclass要素が付かないので便利な時もあるかも。

<table>
<colgroup>
<col span="1" class="c1" />
<col span="2" class="c2" />
</colgroup>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>

このページが分かりやすかった。

Share on Facebook

Tweet

Follow us