<table>は表作成のhtmlタグ
表を作成するには「テーブルタグ」を記入します。
「tr」と「td」で「縦方向の列」と「横方向の行」を指定していきますが、「trタグは縦方向 ↓」、「tdタグは横方向 →」と覚えておくとわかりやすいです。
この「tr」は「テーブルの列(table row)」のことですが、「row」で「列」という意味になります。一方、「td」は「table data」の略で「行」を表しています。
例えば、列と行がそれぞれひとつだけのhtmlタグを記述すると…
<table border="1" cellspacing="0">
<tr>
<td>要素</td>
</tr>
</table>
このように要素がひとつだけの表が表示されます。
要素 |
横方向「→」に行を追加
上の1行1列の状態をもとにして、横方向に行の要素を追加するには、単純に「tdタグ」を1個追加します。
<table border="1" cellspacing="0">
<tr>
<td>要素</td><td>要素</td>
</tr>
</table>
するとこのように、横方向へ行がひとつ増えます。
要素 | 要素 |
2つ追加するには「tdタグ」を2個追加します。
<table border="1" cellspacing="0">
<tr>
<td>要素</td><td>要素</td><td>要素</td>
</tr>
</table>
すると、横方向へ2つの行が増えます。
要素 | 要素 | 要素 |
縦方向「↓」に列を追加
一方、縦方向へ列を追加する場合は、中に入っているtdタグごとtrを追加する必要があります。一番上の状態を元にして縦方向に追加します。
<table border="1" cellspacing="0">
<tr>
<td>要素</td>
</tr>
<tr>
<td>要素</td>
</tr>
</table>
するとこのように縦方向へ列が増えます。
要素 |
要素 |
縦・横方向に行列を追加して表を作成
これらを組み合わせて表を作成していきます。例えば、上の3つのtdが入っているものを縦に増やすとこのようになります。
<table border="1" cellspacing="0">
<tr>
<td>要素</td><td>要素</td><td>要素</td>
</tr>
<tr>
<td>要素</td><td>要素</td><td>要素</td>
</tr>
</table>
要素 | 要素 | 要素 |
要素 | 要素 | 要素 |
ここで、1行目は列がひとつ、2行目は列が3つとかにすると、表としておかしくなってしまうので、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>
このテーブルタグの場合はこのように表示されます。
Explorer | Firefox | |
バグ | 多い | 少ない |
ユーザー | 多い | 普通 |
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を指定するとうまくいきます。