2008.04.21
テーブルの文字の配置memo 2
前回クラスセレクタ「.tbblue」で作成したテーブルのテーブルヘッダーが必要ない場合はHTMLの「th」を「td」に変更すると以下のようになります。
CSSは前回同様です。
/*てーぶるあお線tbblue*/
.tbblue {margin:10px auto 0px auto; width: auto; border-collapse:collapse; border: solid 1px #1E3C5A; }
.tbblue th { font-size: 1em; padding: 0px 5px; border: solid 1px #1E3C5A; }
.tbblue td { font-size: 1em; padding: 0px 5px; border: solid 1px #1E3C5A; }
.tbblue tr { font-size: 1em; padding: 0px 5px; border: solid 1px #1E3C5A; }
.tbblue {margin:10px auto 0px auto; width: auto; border-collapse:collapse; border: solid 1px #1E3C5A; }
.tbblue th { font-size: 1em; padding: 0px 5px; border: solid 1px #1E3C5A; }
.tbblue td { font-size: 1em; padding: 0px 5px; border: solid 1px #1E3C5A; }
.tbblue tr { font-size: 1em; padding: 0px 5px; border: solid 1px #1E3C5A; }
このHTMLでは「th」を使用していません。
<table class="tbblue" summary="見本1">
<tr>
<td>111</td><td>222</td><td>333</td>
<tr>
<td>aaa ああああ
いいいい</td><td>bbbbb</td><td>ccccc</td>
</tr>
</table>
<tr>
<td>111</td><td>222</td><td>333</td>
<tr>
<td>aaa ああああ
いいいい</td><td>bbbbb</td><td>ccccc</td>
</tr>
</table>
| 111 | 222 | 333 |
| aaa あああ いいい |
bbbbb | ccccc |
左上の「111」を左右中央にする為にhtmlのtdにalign=”center”を加え、
真ん中の「222」の下の項の文字の上下をを上揃えにする為にはhtmlのtdにvalign=”top” を加えます。
<table class="tbblue" summary="見本1">
<tr>
<td align="center">111</td><td>222</td><td>333</td>
</tr>
<tr>
<td>aaa あああ
いいい</td><td valign="top">bbbbb</td><td>ccccc</td>
</tr>
</table>
<tr>
<td align="center">111</td><td>222</td><td>333</td>
</tr>
<tr>
<td>aaa あああ
いいい</td><td valign="top">bbbbb</td><td>ccccc</td>
</tr>
</table>
| 111 | 222 | 333 |
| aaa あああ いいい |
bbbbb | ccccc |
このように個別セル毎に位置を指示する。一番右の「ccc」を上揃えにする場合はそのセルのtdにvalign=”top”を記述すれば良い。
ただし、td要素はtr要素の子要素であるためtr要素に指示をすればその行全体を中央揃え、上揃えとする事が出来る。
<table class="tbblue" summary="見本1">
<tr align="center">
<td>111</td><td>222</td><td>333</td>
</tr>
<tr valign="top">
<td>aaa あああ
いいい</td><td>bbbbb</td><td>ccccc</td>
</tr>
</table>
<tr align="center">
<td>111</td><td>222</td><td>333</td>
</tr>
<tr valign="top">
<td>aaa あああ
いいい</td><td>bbbbb</td><td>ccccc</td>
</tr>
</table>
| 111 | 222 | 333 |
| aaa あああ いいい |
bbbbb | ccccc |
テーブルを左寄せにしてみる。
ここでは元のCSSの
.tbblue {margin:10px auto 0px auto; width: auto; border-collapse:collapse; border: solid 1px #1E3C5A; }
を
.tbbluel {margin:0px 0px 0px 0px; width: auto; border-collapse:collapse; border: solid 1px #1E3C5A; }
に変更した新しいクラスセレクター「.tbbluel」をCSSに設置しました。（「.tbblue」の尻に「l」を付け加えただけです。）
| 111 | 222 | 333 |
| aaa あああ いいい |
bbbbb | ccccc |
一番左の列の幅を150pxに指定してみる。
「colgroup」タグは表組の列をグループ化するタグでこの列が難行になっても同一の効果が得られます。
<table class="tbbluel" summary="見本1">
<colgroup style="width:150px"></colgroup>
<tr align="center">
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr valign="top">
<td>aaa あああ
いいい</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td>
</tr>
</table>
<colgroup style="width:150px"></colgroup>
<tr align="center">
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr valign="top">
<td>aaa あああ
いいい</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td>
</tr>
</table>
| 111 | 222 | 333 | 444 |
| aaa あああ いいい |
bbbbb | ccccc | ddddd |
一列目を12pxに二列目を100pxに三列目を80pxに四列目を150pxに指定してみる。
<table class="tbbluel" summary="見本1">
<colgroup><col span="1" style="width:120px" /> </colgroup>
<colgroup><col span="1" style="width:100px" /> </colgroup>
<colgroup><col span="1" style="width:80px" /> </colgroup>
<colgroup><col span="1" style="width:150px" /> </colgroup>
<tr align="center">
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr valign="top">
<td>aaa あああ
いいい</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td>
</tr>
</table>
<colgroup><col span="1" style="width:120px" /> </colgroup>
<colgroup><col span="1" style="width:100px" /> </colgroup>
<colgroup><col span="1" style="width:80px" /> </colgroup>
<colgroup><col span="1" style="width:150px" /> </colgroup>
<tr align="center">
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr valign="top">
<td>aaa あああ
いいい</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td>
</tr>
</table>
| 111 | 222 | 333 | 444 |
| aaa あああ いいい |
bbbbb | ccccc | ddddd |
二列目以降を100pxに揃えてみる。
実際には二列目以降には三列しかないのですが、あえて間違えて
<colgroup><col span="4" style="width:100px" /> </colgroup>
としたところ空の四つ目の列が形成されました。
<table class="tbbluel" summary="見本1">
<colgroup><col span="1" style="width:120px" /> </colgroup>
<colgroup><col span="4" style="width:100px" /> </colgroup>
<tr align="center">
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr valign="top">
<td>aaa あああ
いいい</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td>
</tr>
</table>
<colgroup><col span="1" style="width:120px" /> </colgroup>
<colgroup><col span="4" style="width:100px" /> </colgroup>
<tr align="center">
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr valign="top">
<td>aaa あああ
いいい</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td>
</tr>
</table>
| 111 | 222 | 333 | 444 |
| aaa あああ いいい |
bbbbb | ccccc | ddddd |
