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; }

この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>
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>
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>
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>
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>
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>
111 222 333 444
aaa あああ
いいい		 bbbbb ccccc ddddd

Posted at 01:42 | Category: HTML&CSS | No Comments

2008.04.20

テーブルタグmemo

/*てーぶる*/
table {margin:0px auto 0px auto; width: auto; border-collapse:collapse; border: solid 1px #1E3C5A; }
th { font-size: 1em; padding: 0 5px; border: solid 1px #1E3C5A}
td { font-size: 1em; padding: 0 5px; border: solid 1px #1E3C5A }
tr { font-size: 1em; padding: 0 5px; border: solid 1px #1E3C5A }
<table summary="見本1";>
<tr>
<th abbr="項目1">111</th><th abbr="項目2">222</th><th abbr="項目3">333</th>
</tr>
<tr>
<td>aaa ああああ
いいいい</td><td>bbbbb</td><td>ccccc</td>
</tr>
</table>

この時XHTML1.0 Strict では各「th」にabbr="項目1"のようにabbr属性を設ける必要があります。
参考：アクセシブルなテーブル

111 222 333
aaa ああああ
いいいい		 bbbbb ccccc

このように記述してしまうと左サイドバーのカレンダーにも罫線が引かれてしまいます、取りあえずはCSSに記述したth、td、trのborderを0pxにして元にもどしておきます。
これではmemoに使えないので新たにクラスセレクター「.tbblue」を作成しそれでテーブルが作成出来るようにしてみます。

クラスセレクター「.tbblue」の名前は僕は青罫のテーブルにしたかったので他と区別するために「.tableblue」を短縮して「.tbblue」にしただけなので、「.hogehoge」でも何でもいいようです。

/*てーぶるあお線tbblue*/
.tbblue {margin:10px auto 0px auto; width: auto; border-collapse:collapse; border: solid 1px #1E3C5A; }
.tbblue th { font-size: 1em; padding: 0 5px; border: solid 1px #1E3C5A; }
.tbblue td { font-size: 1em; padding: 0px 5px; border: solid 1px #1E3C5A; }
.tbblue tr { font-size: 1em; padding: 0 5px; border: solid 1px #1E3C5A; }

こんなCSSを記述をスタイルシートにする事でいくつものスタイルのテーブルを一つのぺーじに設置する事が可能になります。

<table class="tbblue" summary="見本1">
<tr>
<th abbr="項目1">111</th><th abbr="項目2">222</th><th abbr="項目3">333</th>
</tr>
<tr>
<td>aaa ああああ
いいいい</td><td>bbbbb</td><td>ccccc</td>
</tr>
</table>

元のテーブルのCSSとHTMLの違いは青く示した所だけです。

111 222 333
aaa ああああ
いいいい		 bbbbb ccccc

通常「th」は文字の太さはboldにそして左右揃えはセンター揃えになるはずなのですが、文字寄せが左揃えに表示されています、ここはまだ僕が解っていない所です。

Posted at 05:27 | Category: HTML&CSS | 2 Comments