基本的なHTMLタグ~その6 テーブル(tr-th-td)

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>~</caption>)

表に題名をつけることができます。

注意事項として、<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で指定してください。

セルを連結する

使用するタグは
(<th rowspan=”縦の連結数”>~</th>
<th colspan=”横の連結数”>~</th>
<td rowspan=”縦の連結数”>~</td>
<td colspan=”横の連結数”>~</td>) です。

セルを連結するために使用するタグで、<th>または<td>タグ内で使用します。

への連結は指定したセルから下のセルと結合します。

への連結は指定したセルから右のセルと結合します。

※例(イメージです)
ここが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

セルの枠と中の間隔を指定する(<table cellpadding=”間隔”>~</table>)

セルの枠と中の内容の間隔を指定するタグです。単位はピクセルであらわします。

一つ指定すれば上下左右全て適用されます。もし上下左右別々に指定したい場合はスタイルシートで指定ください。

※現在はHTML5が主流になってきていますので、cellpadding属性は撤廃されました。

表にに背景色を指定する(<tabale bgcolor=”背景色”>~</table>)

表に背景色を指定するためのタグですが、現在はスタイルシートでの指定が一般的です。できるだけスタイルシートで編集してください。

また、表全体以外にもセル単体で背景色を指定することができます。

※例(イメージです)

【表全体】

ここがthここがthここがth
ここがtdここがtdここがtd

【上段の<th>に指定】

ここがthここがthここがth
ここがtdここがtdここがtd

【右の<thに指定】

ここがthここがthここがth
ここがtdここがtdここがtd

【真ん中の<td>に指定】

ここがthここがthここがth
ここがtdここがtdここがtd
よかったらシェアしてね!
目次