<table>は表作成のhtmlタグ

表を作成するには、テーブルタグを記入します。

<table border="1" cellspacing="0">
<tr>
<td>要素</td>
</tr>
</table>

要素

ここで、「tr」と「td」で「縦方向の列」と「横方向の行」を指定していくわけですが、「trタグは縦方向」、「tdタグは横方向」と覚えておくとわかりやすいです。

「row」は「列」という意味で、trが「テーブルの列(table row)」を表しています。
一方、tdは「table data」の略で行を表しています。

横方向に行を追加

上の１行１列の状態をもとにして、横方向の行の要素を追加するには、単純に「tdタグ」を１個追加します。

<table border="1" cellspacing="0">
<tr>
<td>要素</td><td>要素</td>
</tr>
</table>

するとこのように、横方向へ行が増えます。

要素

要素

行の要素を２つ追加するには、「tdタグ」を２個追加します。

<table border="1" cellspacing="0">
<tr>
<td>要素</td><td>要素</td><td>要素</td>
</tr>
</table>

すると、横方向へ２つの行が増えます。

要素

要素

要素

縦方向に列を追加

一方、縦方向へ列を追加する場合は、中に入っているtdタグごと追加する必要があります。一番上の状態を元にして、縦方向に追加します。

<table border="1" cellspacing="0">
<tr>
<td>要素</td>
</tr>
<tr>
<td>要素</td>
</tr>
</table>

するとこのように、縦方向へ列が増えます。

要素

要素

縦・横方向に行列を追加して表を作成

これらを組み合わせて、表を作成していきます。例えば、上の３つのtdが入っているものを縦に増やすとこのようになります。

<table border="1" cellspacing="0">
<tr>
<td>要素</td><td>要素</td><td>要素</td>
</tr>
<tr>
<td>要素</td><td>要素</td><td>要素</td>
</tr>
</table>

要素	要素	要素
要素	要素	要素

ここで、１行目は列がひとつ、２行目は列が３つとかにすると、表としてはおかしくなってしまうので、trタグごと追加するようにしましょう。

<table border="1" cellspacing="0">
<tr>
<td>要素</td><td></td><td></td>
</tr>
<tr>
<td>要素</td><td>要素</td><td>要素</td>
</tr>
</table>

要素
要素	要素	要素

<table>タグのスタイルシート

このテーブルタグはブラウザによって見た目がかなり違ってきます。主に、Internet Explorer（IE6）では崩れて表示されることも多いですので、確認するようにしましょう。

テーブルタグの背景色を記述する際は、trにこのように記述すると、その行のすべての背景色が変わります。

<table border="1" cellspacing="0">
<tr style="background-color:#F0F7F9;font-weight:bold;">
<td style="padding: 5px;text-align:center;font-size:13px;"></td>
<td style="padding: 5px; text-align:center;font-size:13px;">Explorer</td>
<td style="padding: 5px; text-align:center;font-size:13px;">Firefox</td>
</tr>
<tr>
<td style="padding: 5px; text-align:center;font-size:13px;">バグ</td>
<td style="padding: 5px; text-align:center;font-size:13px;">多い</td>
<td style="padding: 5px; text-align:center;font-size:13px;">少ない</td>
</tr>
<tr style="background-color:#E8E3D2;">
<td style="padding: 5px; text-align:center;font-size:13px;">ユーザー</td>
<td style="padding: 5px; text-align:center;font-size:13px;">多い</td>
<td style="padding: 5px; text-align:center;font-size:13px;">普通</td>
</tr>
</table>

このテーブルタグの場合はこのように表示されます。

	Explorer	Firefox
バグ	多い	少ない
ユーザー	多い	普通

ただ、このようにhtmlに直接記述するのはスマートではないですので、スタイルシートを利用するようにしましょう。

.ex1 {
background-color:#F0F7F9;
font-weight:bold;
}
.ex2 {
padding: 5px;
text-align:center;
font-size:13px;
}
.ex3 {
background-color:#E8E3D2;
}

<table border="1" cellspacing="0">
<tr class="ex1">
<td class="ex2"></td>
<td class="ex2">Explorer</td>
<td class="ex2">Firefox</td>
</tr>
<tr>
<td class="ex2">バグ</td>
<td class="ex2">多い</td>
<td class="ex2">少ない</td>
</tr>
<tr class="ex3">
<td class="ex2">ユーザー</td>
<td class="ex2">多い</td>
<td class="ex2">普通</td>
</tr>
</table>

個別に指定せず、すべてのテーブルタグに同じ設定をする場合は、次のように単純にCSSを指定するだけでも可能です。

table {
border:solid 1px;
border-collapse: collapse;
}
tr {
background-color:#F1F1F1;
}
td {
padding: 5px;
text-align:center;
font-size:13px;
border:solid 1px;
}

ここで、<table border="1" cellspacing="0">の部分は、

table {
border:solid 1px;
border-collapse: collapse;
}

のように指定することもできますが、 cellspacing="0"の部分はブラウザによって解釈が違うので、直接記入した方がはやいと思います。

cellspacingはセルとセルの間の間隔のことですが、1や2の値を記入すると、枠線が2重になってしまうので、0で設定することをおすすめします。
セル内の間隔を指定する際は、tdにpaddingを指定するとうまくいきました。

---