Table(テーブル)タグはHPで表をあらわす為に使うタグです。表にはいろいろな表示の仕方がありますので、ここでしっかりと覚えてくださいね!
使用するタグは(<table border="太さ">〜</tablel> <tr>〜</tr> <th>〜</th> <td>〜</td>)です。
表の基本形です。
表はborderを指定しなければ表の枠は表示されません。
<table>〜</table>で全体を囲み、その中で見出し<th>や項目<td>を入れていきます。
また、<table width="大きさ">と入力すれば、テーブル全体の幅を決めることができます。
※例
<table width="200" border="1">
<tr>
<th>ここがth</th>
<th>ここがth</th>
<th>ここがth</th>
</tr>
<tr>
<td>ここがtd</td>
<td>ここがtd</td>
<td>ここがtd</td>
</tr>
</table>
↓↓↓
| ここがth | ここがth | ここがth |
|---|---|---|
| ここがtd | ここがtd | ここがtd |
※横一列が<tr>となる。
表に題名をつけることができます。
注意事項として、<caption>タグは必ず<table>タグの直後に入れてください。
※例
<table width="200" border="1">
<caption>表の説明</caption>
<tr>
<th>ここがth</th>
<th>ここがth</th>
<th>ここがth</th>
</tr>
<tr>
<td>ここがtd</td>
<td>ここがtd</td>
<td>ここがtd</td>
</tr>
</table>
↓↓↓
| ここがth | ここがth | ここがth |
|---|---|---|
| ここがtd | ここがtd | ここがtd |
使用するタグは(<th width="幅" height="高さ">〜</th> <td width="幅" height="高さ">〜</td>)です。
文字通りセルの幅と高さを指定するタグです。
しかし、現在は(CSS)スタイルシートで指定するのが一般的ですので、CSSがわからない人以外はできるだけCSSで指定してください。
※例
<table border="1">
<tr>
<th width="100" height="25">ここがth</th>
<th width="100" height="25">ここがth</th>
<th width="100" height="25">ここがth</th>
</tr>
<tr>
<td width="100" height="50">ここがtd</td>
<td width="100" height="50">ここがtd</td>
<td width="100" height="50">ここがtd</td>
</tr>
</table>
↓↓↓
| ここがth | ここがth | ここがth |
|---|---|---|
| ここがtd | ここがtd | ここがtd |
使用するタグは
(<th rowspan="縦の連結数">〜</th>
<th colspan="横の連結数">〜</th>
<td rowspan="縦の連結数">〜</td>
<td colspan="横の連結数">〜</td>) です。
セルを連結するために使用するタグで、<th>または<td>タグ内で使用します。
縦への連結は指定したセルから下のセルと結合します。
横への連結は指定したセルから右のセルと結合します。
※例1
| ここがth | ここがth | ここがth |
|---|---|---|
| ここがtd | ここがtd | ここがtd |
左上を(th rowspan="2")と指定した場合
↓↓↓
| ここが連結 | ここがth | |
|---|---|---|
| ここがtd | ここがtd | ここがtd |
※例
| ここがth | ここがth | ここがth |
|---|---|---|
| ここがtd | ここがtd | ここがtd |
真ん中を(th colspan="2")と指定した場合
↓↓↓
| ここがth | ここが連結 | ここがth |
|---|---|---|
| ここがtd | ここがtd |
セルの枠と中の内容の間隔を指定するタグです。単位はピクセルであらわします。
一つ指定すれば上下左右全て適用されます。もし上下左右別々に指定したい場合はスタイルシートで指定ください。
※例
| ここがth | ここがth | ここがth |
|---|---|---|
| ここがtd | ここがtd | ここがtd |
↓↓↓
| ここがth | ここがth | ここがth |
|---|---|---|
| ここがtd | ここがtd | ここがtd |
間隔を10ピクセルにしてみました。
表に背景色を指定するためのタグですが、現在はスタイルシートでの指定が一般的です。できるだけスタイルシートで編集してください。
また、表全体以外にもセル単体で背景色を指定することができます。
※例(表全体)
| ここがth | ここがth | ここがth |
|---|---|---|
| ここがtd | ここがtd | ここがtd |
※(上段の<tr>に指定)
| ここがth | ここがth | ここがth |
|---|---|---|
| ここがtd | ここがtd | ここがtd |
※(右の<th>に指定)
| ここがth | ここがth | ここがth |
|---|---|---|
| ここがtd | ここがtd | ここがtd |
※(真ん中のtdに指定)
| ここがth | ここがth | ここがth |
|---|---|---|
| ここがtd | ここがtd | ここがtd |