テーブル テーブルテーブル（表）を作成するには <table> を用います。<table>〜</table> がひとつのテーブル、<caption>〜</caption> が表題、<tr>〜</tr> が1行、<th>〜</th> がヘッダのマス（カラム）、 <td>〜</td> がデータのマス（カラム）に対応します。border=1 は枠線の太さを示します。
<table border=1> <caption>【各国の首都】</caption> <tr><th>国名</th><th>首都</th></tr> <tr><td>日本</td><td>東京</td></tr> <tr><td>大韓民国</td><td>ソウル</td></tr> <tr><td>中国</td><td>北京</td></tr> </table>
| 国名 | 首都 |
|---|---|
| 日本 | 東京 |
| 大韓民国 | ソウル |
| 中国 | 北京 |
テーブルの中身を改行させないようにするには、<tr>、<th>、<td> などのタグに nowrap 属性を指定します。
<table> <tr><th nowrap>あああ</th><th>いいい</th><th>ううう</th></tr> </table>
最近では、nowrap属性の代わりにスタイルシートの white-space: nowrap を指定することが推奨されています。
<table> <tr><th style="white-space:nowrap;">あああ</th><th>いいい</th><th>ううう</th></tr> </table>
<table>〜</table> を、<font>〜</font> で囲むことはできません。テーブル内のフォントの大きさや色を一度に指定するには、スタイルシート を用いると便利です。下記の記述を <head>〜</head> の間に追記してみてください。
<style type="text/css">
<!--
td, th {
color: red;
font-size: 200%;
font-family: "ＭＳ ゴシック";
}
-->
</style>
カラムを横や縦に連結するには <td> や <th> に colspan=n や rowspan=n 属性を指定します。n には連結するカラムの数を指定します。
<table border=1> <tr><td colspan=2>横連結</td></tr> <tr><td rowspan=2>縦連結</td><td>○○</td></tr> <tr><td>△△</td></tr> </table>
| 横連結 | |
| 縦連結 | ○○ |
| △△ | |
ブラウザによっては、テーブルの中に <td></td> のような空欄があると、その部分が凹んでくれずに見栄えが悪くなることがあります。この時は、<td><br></td> のように <br> を入れてやると、凹んで表示されるようです。
|
→ |
|
テーブルに背景色や背景画像を指定するには、<table>、<tr>、<th>、<td> に width属性 や height属性を指定します。最近では、widthや height属性の代わりに、スタイルシートの width や height を使用することが推奨されています。
<table border=1 style="width:200px; height:100px"> <tr><td>東京都</td><td>12,345,678</td></tr> <tr><td>広島県</td><td>987,654</td></tr> </table>
| 東京都 | 12,345,678 |
| 広島県 | 987,654 |
<tr>、<th>、<td> に align 属性、またはスタイルシートの text-align を指定することで、カラムの内容を右寄せ、中寄せ、左寄せすることができます。
|
→ |
|
<tr>、<th>、<td> に valign 属性、またはスタイルシートの vertical-align を指定することで、カラムの内容を上に寄せたり、下に寄せたりすることができます。
| これは下寄せです。 | これは上寄せです。 |
<table>、<tr>、<th>、<td> の bgcolor 属性、またはスタイルシートの background-color を用いて、テーブルの背景色を指定することができます。
<table border=1 style="background-color:#ffcccc;"> <tr><th>■■</th><th>●●</th></tr> <tr><td>□□</td><td>◎◎</td></tr> <tr><td>◇◇</td><td>○○</td></tr> </table>
| ■■ | ●● |
|---|---|
| □□ | ◎◎ |
| ◇◇ | ○○ |
<table>、<tr>、<th>、<td> の background 属性、またはスタイルシートの background-image を用いて、テーブルの背景画像を指定することができます。
<table border=1 style="background-image:url(xxx.gif);"> <tr><th>■■</th><th>●●</th></tr> <tr><td>□□</td><td>◎◎</td></tr> <tr><td>◇◇</td><td>○○</td></tr> </table>
| ■■ | ●● |
|---|---|
| □□ | ◎◎ |
| ◇◇ | ○○ |
テーブルを横に二つ並べるには、外側にもうひとつ大きなテーブルを設ける方法があります。
<table>
<tr>
<td>
<table border=1>
<tr><td>ああ</td><td>ああ</td></tr>
<tr><td>ああ</td><td>ああ</td></tr>
</table>
</td>
<td>
<table border=1>
<tr><td>ああ</td><td>ああ</td></tr>
<tr><td>ああ</td><td>ああ</td></tr>
</table>
</td>
</tr>
</table>
|
|
もしくは、スタイルシートの float を用いる方法があります。
<table border=1 style="float:left"> <tr><td>ああ</td><td>ああ</td></tr> <tr><td>ああ</td><td>ああ</td></tr> </table> <table border=1> <tr><td>ああ</td><td>ああ</td></tr> <tr><td>ああ</td><td>ああ</td></tr> </table>
テーブルの枠線の色を変えるには、<table> の bordercolor属性、またはスタイルシートの border-color を指定します。
<table border=1 style="border-color:#cc0000;"> : </table>
テーブルの枠線をシンプルにするには、<table> の cellspacing属性、またはスタイルシートの border-collapse を指定します。
<table border=1 style="border-collapse:collapse;"> <tr"><th">■■</th"><th">●●</th"></tr"> <tr"><td">□□</td"><td">◎◎</td"></tr"> <tr"><td">◇◇</td"><td">○○</td"></tr"> </table">
| ■■ | ●● |
|---|---|
| □□ | ◎◎ |
| ◇◇ | ○○ |
テーブルの枠線を点線にするには、スタイルシートで点線の枠線を引きます。
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
.dot { border-collapse: collapse; }
.dot th, .dot td { border: 1px dotted gray; }
-->
</style>
</head>
<body>
<table class="dot" cellspacing=0>
<tr><th>あああ</th><th>あああ</th></tr>
<tr><td>あああ</td><td>あああ</td></tr>
<tr><td>あああ</td><td>あああ</td></tr>
<tr><td>あああ</td><td>あああ</td></tr>
</table>
</body>
</html>
角の丸いテーブルは、スタイルシートの border-radius を用いて実現します。IE9 からサポートしています。
<table border=1 style="border:1px solid black; border-radius:8px; border-collapse:separate; border-spacing:8px;"> <tr><td>AAA</td><td>AAA</td></tr> <tr><td>AAA</td><td>AAA</td></tr> </table>
| AAA | AAA |
| AAA | AAA |