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

Table(テーブル)タグはHPで表をあらわす為に使うタグです。表にはいろいろな表示の仕方がありますので、ここでしっかりと覚えてくださいね！

表を入れる

使用するタグは(<table border=”太さ”>～</tablel>　<tr>～</tr>　<th>～</th>　<td>～</td>)です。

表の基本形です。

表はborderを指定しなければ表の枠は表示されません。

<table>～</table>で全体を囲み、その中で見出し<th>や項目<td>を入れていきます。

また、<table width=”大きさ”>と入力すれば、テーブル全体の幅を決めることができます。

表にタイトルをつける(<caption>～</caption>)

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

注意事項として、<caption>タグは必ず<table>タグの直後に入れてください。

セルの大きさを指定する

使用するタグは(<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>タグ内で使用します。

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

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

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

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

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

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

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

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

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