HTMLテーブルの作り方


ウェブサイト作りで重要なテーブルの作り方について説明します。

テーブルタグは<table></table><tr></tr><td></td><th></th>で構成されます。

1、Tableタグ<table></table>

表の大きさを決定します。width属性でパーセントやピクセルで表のサイズを決めたりborder属性で線の有無、太さなどを決定します。border=0かborderの記述なしで線の無いテーブルができます。1以上の記述で線の太さになります。<table border="1">と記述すると線の太さが1ピクセルとなります。HTML5では1のみ指定可能です。ちなみにheight属性で高さも指定できますが、HTML4.01では定義されていませんので、なるべく使わないようにしましょう。

属性 説明
border=数字 0〜Nの数字が入ります。線を表示しない場合は0かborder自体を記述しません。
bordercolor=color 線の色を指定できます。redなど色指定かカラーコードを入力します。
bordercolordark=color 立体的な枠の影の部分の色指定
bordercolorlight=color 立体的な枠の明るい部分の色指定
width="数値" ピクセル数かパーセントで表の幅を指定できます。500ピクセルの場合"500"70パーセントの場合70%と記述します。
rules="" 罫線を部分的に表示したい場合に利用。rowsで横罫線のみ、colsで縦罫線のみ、groupsグループ間の罫線のみ、none表示しない、allですべて表示
frame="" 外側の枠の表示方法を指定できます。voidで外枠を表示しない、lhsで左側の枠のみ表示、rhsで右側の枠のみ表示、vsidesで左右の枠のみ表示、aboveで上の枠のみ表示、belowで下の枠のみ表示、hsidesで上下の枠のみ表示
cellspacing="数値" ピクセル数か%でセル同士の間隔を指定できます。
cellpadding="数値" ピクセル数か%でセル内の余白を指定できます。

2、trタグ<tr></tr>

表の行数を決めるタグです。上の表の場合10行なので10個記述してあります。

3、tdタグ<td></td>

表のセルを決めるタグです。例えばtrが3つあってその中にtdが4つずつあった場合3行4列のセルとなります。上の表の場合は2個ずつ記述しています。

4、thタグ<th></th>

表のセルを決めるタグです。tdと使い方は同じですが、thは見出し用になります。このページの属性一覧表では属性、説明の部分がthを使用しています。太字でセンター表示になります。

その他の属性一覧

属性 説明
bgcolor="" table,tr,tdで使用可能、背景色を設定します。
background"" table,tr,tdで使用可能、URIで背景画像を設定します。例、imgフォルダのsampleという画像ならimg/sample.gifなどとなります。
colspan=""

td,thで使用可能です。結合するセルの数を指定します。水平方向の結合するセル数を指定

rowspan="" td,thで使用可能です。結合するセルの数を指定します。垂直方向の結合するセル数を指定
align="" tr,td,thで使用可能です。水平方向の文字表示位置を指定します。left左寄せ、center中央揃え、right右揃え、justify両端揃え
valign="" trtd,thで使用可能です。垂直方向の文字表示位置を指定します。top上揃え、middle中央揃え、bottom下揃え,baseline1行目をベースラインで揃える。