このページの短縮URL(リンク用) §08-05…列の属性<col> – オンライン無料パソコン講座 | PCセミナー

§08-05…列の属性<col>

(01) 一番左の列の幅を15文字、中央と右の列は10文字にします。列に対してCSSを設定したい場合はtableタグの下に<col>タグを配置します。<col>タグには「span」属性(列数)と「class」属性を付加して列の特定をします。span属性を付けなければ左から順に1列分、付けた場合は属性値で指定した列数分を特定したことになります。まずは、tableタグ内を以下のように更新してください。なお、<col>タグは文字を囲わない特殊なタグです。このようなタグを「空要素」といい、タグの終わりに半角スペースと「/」を付けます。下記のタグで「一番左の列は『hidari』、2列目と3列目は『sonota』というclass名を付けた」ことになります。更新してください。

<table summary="注文内容">
<caption>ご注文内容</caption>
<col class="hidari" />
<col span="2" class="sonota" />
<tr>
<th>ご注文商品</th><th>税別価格</th><th>税込価格</th>
</tr>
<tr>
<td>走れメロス</td><td>¥600</td><td>¥630</td>
</tr>
<tr>
<td>対決!</td><td>¥980</td><td>¥1029</td>
</tr>
<tr>
<td>日本の芸術</td><td>¥2400</td><td>¥2520</td>
</tr>
<tr>
<td colspan="2">合計金額</td><td>¥4179</td>
</tr>
<tr>
<td colspan="2">冊数</td><td>3</td>
</tr>
<tr>
<td rowspan="2">ご連絡先</td><td>担当</td><td>三橋</td>
</tr>
<tr>
<td>TEL</td><td>045-870-1652</td>
</tr>
<tr>
<td colspan="3">明日発送予定です</td>
</tr>
</table>

(02) CSSを使い、各classに書式の設定をしましょう。以下のようなCSSを追加します。「hidari」は幅を「15文字」、「sonota」は幅を「8文字」、背景色「#FFCCFF」にします。CSSを更新したらブラウジングします。

*.hidari{
width:15em;
}
*.sonota{
width:8em;
background-color:#FFCCFF;
}
  • 今後も文字列を囲わないタグである「空要素」がいくつか出現する。空要素は半角スペースと「/」で終了する。
  • col要素には「border~」「background~」「width」「visibility」のプロパティのみしか設定できないので注意。

(03) さて、class属性が「sonota」である列の数値を右揃えにします。しかしcol要素には「text-align」プロパティを設定できません。揃えを指定するにはまずHTML側のtd要素にクラスを設定します。以下のようにtableに関するソースを修正してください。

<td>走れメロス</td><td class="numb">¥600</td><td>¥630</td>

(04) 続けてCSS側に右揃えの設定をします。また今回は右側に0.5字分の空間を作成します。修正後はブラウジングしましょう。

td.numb{
text-align:right;
padding-right:0.5em;
}

(05) その他の「\」付き<td>にもクラスを設定しましょう。【編集】[置換]を使うとすばやく設定可能です。

(06) 「<td>¥」を「<td class=”numb”>¥」に置き換えましょう。

(07) 上書きしてプレビューしましょう。