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 {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>
<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; }
.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>
<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 2008.06.22 9:35 AM by 記事投稿用myめも - : WordPress日本語2.5 memo
[...] ■文字に色を付けて強調する場合 [...]
Posted at 2008.07.17 5:56 PM by 記事投稿用めも - : 身延の風