HTMLで表を作ろう（tr、tdタグの属性編）

2015/3/27 2015/4/9 HTML

HTMLで表（以下テーブル）を作成するにはtable、tr、tdなどのタグ（要素）が必要ですが、各要素の属性を利用することにより表の見栄えを編集することができます。

trタグ（要素）は行の編集、tdタグ（要素）はセル単体の編集を行うことができます。
また、table、tr、tdで同じ属性を使うこともあり、同じ属性を利用すると、td、tr、tableの順番に設定が行われます（tdが最優先）。

trタグ
要素	tr	行の設定を行う
属性	align	指定した行に含まれるセル内データの横配置を設定する
	valign	指定した行に含まれるセル内データの縦配置を設定する
	bgcolor	行の背景色を設定する
	background	行の背景画像を設定する
	height	指定した行に含まれるセルの高さを設定する

trタグの属性
align	指定した行に含まれるセル内のデータ位置（横）を設定する。値は「left」「center」「right」があり、leftは左ぞろえ、centerは中央ぞろえ、rightは右ぞろえができる。
valign	指定した行に含まれるセル内のデータ位置（縦）を設定する。値は「top」「middle」「bottom」があり、topは上ぞろえ、middleは中央ぞろえ、bottomは下ぞろえができる。
bgcolor	行の背景色を設定する。値は基本色（カラーネーム）かRGB値で設定する。
background	行の背景画像をリンク設定する。画像へのリンク設定はimg要素のsrc属性と同様。
height	行の高さを設定する。値はピクセル（単位なし）と%で指定ができる。

tdタグの属性
align	セル内のデータ位置（横）を設定する。値は「left」「center」「right」があり、leftは左ぞろえ、centerは中央ぞろえ、rightは右ぞろえができる。
valign	セル内のデータ位置（縦）を設定する。値は「top」「middle」「bottom」があり、topは上ぞろえ、middleは中央ぞろえ、bottomは下ぞろえができる。
bgcolor	セルの背景色を設定する。値は基本色（カラーネーム）かRGB値で設定する。
background	セルの背景画像をリンク設定する。画像へのリンク設定はimg要素のsrc属性と同様。
width	セルの幅を設定する。一つのセルにwidthを設定すると、その列全てが同じ幅となる。値はピクセル（単位なし）と%で指定ができる。例えば、以下のような場合は1行目の1列目だけでなく、2行目の1列目も幅は50となる <tr><td width=”50″>あ</td><td>い</td></tr> <tr><td>か</td><td>き</td></tr>

※セル結合の説明は別記事を参照

下のリンクをクリックするとテーブルの属性を簡単に変更できるデモページが表示されます

スポンサードリンク

スポンサードリンク