本日は前回に引き続きテーブルのcol要素について解説していきたいと思います。
それではいってみましょう！
Menu
col要素の概要
col要素は列の属性の設定に使用します。
col要素の特長
col要素の属性
span → 列数を指定（指定しない場合の規定値は1）。
—非奨励の属性—
align → 水平位置の配置変更。
・left…セル左側
・center…セル中央
・right…セル右側
・justify…セル内で両端揃え
valign → 垂直位置を変更（セル内の縦の位置）。
・baseline…セルの下に近づける
・bottom…セルの下
・middle…セルの中央
・and top…セルの上
width → 列幅。
bgcolor → 背景色を変更(RGBの＃のついた色を指定)。
char → 文字を揃える(align属性がcharでない場合は、無視されます)。
charoff → char属性で指定された揃え文字からその列のデータをオフセットする文字数。
※これらの属性はブラウザによって動作しない場合があります。
colサンプル
【今回使用するテーブル】
table要素の子要素としての配置と設定
bgcolor属性を設定した場合
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <table class="test" border="1"> <col span="2" bgcolor="#ff0000"> <col span="1" bgcolor="#00ffff"> <tr> <td>数値1</td> <td>数値2</td> <td>合計</td> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table>こ |
※ブラウザによって属性が機能しない場合があります。
colgroup要素の子要素として配置と設定
width属性を設定した場合
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <table class="test" border="1"> <colgroup> <col span="2" width="100"> <col span="1" width="150"> </colgroup> <tr> <td>数値1</td> <td>数値2</td> <td>合計</td> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> |
※ブラウザによって属性が機能しない場合があります。
col要素に属性を複数設定
bgcolor属性とwidth属性をまとめて設定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <table class="test" border="1"> <colgroup> <col span="2" bgcolor="#ff0000" width="100"> <col span="1" bgcolor="#00ffff" width="150"> </colgroup> <tr> <td>数値1</td> <td>数値2</td> <td>合計</td> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> |
※ブラウザによって属性が機能しない場合があります。
cssを使用した場合
widthを設定。
【html】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <table class="test" border="1"> <colgroup> <col span="2" class="col1"> <col span="1" class="col2"> </colgroup> <tr> <td>数値1</td> <td>数値2</td> <td>合計</td> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> |
【css】
1 2 3 4 5 6 7 8 9 | table { border-collapse: collapse; } table.test col.col1{ width: 100px; } table.test col.col2{ width: 150px; } |
※ブラウザによって属性が機能しない場合があります。
まとめ
テーブルの列をspan属性で仕切れるのは、面白いですね。
以上です。
