<table>は表作成のhtmlタグ

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

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

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

例えば、列と行がそれぞれひとつだけのhtmlタグを記述すると…

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

このように要素がひとつだけの表が表示されます。

横方向「→」に行を追加

上の１行１列の状態をもとにして、横方向に行の要素を追加するには、単純に「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タグごとtrを追加する必要があります。一番上の状態を元にして縦方向に追加します。

<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タグごと追加するようにしましょう。

もし追加する場合は、tdの要素を空にして追加することをおすすめします。

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

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

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

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

【HTML上での記述】

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

【スタイルシート側での記述】

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

個別に指定せず、すべてのテーブルタグに同じ設定をする場合は、次のように単純に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"の部分はブラウザによって解釈が違うので、直接記入した方がはやいと思います。

セル内の間隔を指定する際は、tdにpaddingを指定するとうまくいきます。