表は次のようにして書けます。tr
は table row,td
は table data の意味です。tbody
は省略できます(HTMLとXHTMLで同じ文書構造にするためには必要のようです:ここ参照)。
<table> <tbody> <tr><td>IE</td><td>73.81%</td></tr> <tr><td>Firefox</td><td>18.43%</td></tr> <tr><td>Safari</td><td>6.14%</td></tr> </tbody> </table>
IE | 73.81% |
Firefox | 18.43% |
Safari | 6.14% |
罫線を入れるのは border="幅"
です。幅の単位はピクセルです(以下同様)。
<table border="1"> <tbody> <tr><td>IE</td><td>73.81%</td></tr> <tr><td>Firefox</td><td>18.43%</td></tr> <tr><td>Safari</td><td>6.14%</td></tr> </tbody> </table>
IE | 73.81% |
Firefox | 18.43% |
Safari | 6.14% |
罫線が二重になってしまいましたが,cellspacing="幅"
で二重線の間隔が設定できます。これをゼロにすれば一本の線になります。
<table border="1" cellspacing="0"> <tbody> <tr><td>IE</td><td>73.81%</td></tr> <tr><td>Firefox</td><td>18.43%</td></tr> <tr><td>Safari</td><td>6.14%</td></tr> </tbody> </table>
IE | 73.81% |
Firefox | 18.43% |
Safari | 6.14% |
ブラウザの名前だけ見出し風にしてみましょう。th
は table header の意味です。
<table border="1" cellspacing="0"> <tbody> <tr><th>IE</th><td>73.81%</td></tr> <tr><th>Firefox</th><td>18.43%</td></tr> <tr><th>Safari</th><td>6.14%</td></tr> </tbody> </table>
IE | 73.81% |
---|---|
Firefox | 18.43% |
Safari | 6.14% |
罫線と中身との間隔が少し狭いでしょうか。cellpadding="幅"
で調節できます。
<table border="1" cellspacing="0" cellpadding="5"> <tbody> <tr><th>IE</th><td>73.81%</td></tr> <tr><th>Firefox</th><td>18.43%</td></tr> <tr><th>Safari</th><td>6.14%</td></tr> </tbody> </table>
IE | 73.81% |
---|---|
Firefox | 18.43% |
Safari | 6.14% |
このような外観はスタイルシートで変更したほうがいいでしょう。td と th の上下のパディングを全角0.2文字分,左右のパディングを全角0.7文字分にするには次のように設定します。
td, th { padding: 0.2em 0.7em }
IE | 73.81% |
---|---|
Firefox | 18.43% |
Safari | 6.14% |
さらに th は左詰め,td は右詰めにしてみましょう。
th { text-align: left } td { text-align: right }
IE | 73.81% |
---|---|
Firefox | 18.43% |
Safari | 6.14% |
ところで,cellspacing="0"
で結合した罫線は少し太めです。スタイルシートを使うなら,border-collapse
を指定すれば線が1本になります。
table { border-collapse: collapse }
IE | 73.81% |
---|---|
Firefox | 18.43% |
Safari | 6.14% |
外枠だけ太線にしてみましょう。
table { border: 3px solid black } <table border="1"> <tbody> <tr><th>IE</th><td>73.81%</td></tr> <tr><th>Firefox</th><td>18.43%</td></tr> <tr><th>Safari</th><td>6.14%</td></tr> </tbody> </table>
IE | 73.81% |
---|---|
Firefox | 18.43% |
Safari | 6.14% |
色も指定してみましょう。
th { background-color: #FFC } /* light yellow */ td { background-color: #CFF } /* light cyan */
IE | 73.81% |
---|---|
Firefox | 18.43% |
Safari | 6.14% |
この一つの表のデザインをスタイルシートにそのまま書き込むと,別のデザインの表も作りたくなったときに困ります。そこで,この表のデザインに対して,たとえば hoge
という名前を付け,それに対してのスタイルを定義します。さきほどと違って,中の線は灰色にしました。
table.hoge { border-collapse: collapse; border-spacing: 0; empty-cells: show; border: 3px solid black; } table.hoge td { text-align: right; padding: 0.2em 0.7em; border: 1px solid gray; background-color: #CFF; } table.hoge th { text-align: left; padding: 0.2em 0.7em; border: 1px solid gray; background-color: #FFC; }
そうすれば,次のように class="hoge"
と指定するだけで,このデザインの表が作れます。
ついでに caption
でキャプションを付けました。
<table class="hoge"> <caption>ブラウザのシェア</caption> <tbody> <tr><th>IE</th><td>73.81%</td></tr> <tr><th>Firefox</th><td>18.43%</td></tr> <tr><th>Safari</th><td>6.14%</td></tr> </tbody> </table>
IE | 73.81% |
---|---|
Firefox | 18.43% |
Safari | 6.14% |
caption
を上に書いても下に書いても,実際のキャプションは上に出ます。
下に出すためには次のようなスタイルを使います(IEはIE7でも対応していません。代わりに <caption align="bottom">
とします)。
caption { caption-side: bottom }
IE | 73.81% |
---|---|
Firefox | 18.43% |
Safari | 6.14% |
表はキャプションを上に,図はキャプションを下に付けるのが一般的です。
Last modified: 2010-04-24 17:50:35