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


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

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

trタグ(要素)とその属性

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タグ(要素)とその属性

tdタグ

要素 td セルの設定を行う
属性 align セル内データの横配置を設定する
valign セル内データの縦配置を設定する
bgcolor セルの背景色を設定する
background セルの背景画像を設定する
width セルの幅を設定する
colspan セルの結合を行う(横方向の結合)
rowspan セルの結合を行う(縦方向の結合)

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>

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

table、tr、tdの属性確認デモ

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

サブウィンドウでデモ表示

新しいウィンドウで表示

スポンサードリンク
レクタングル広告(大)
レクタングル広告(大)
スポンサードリンク
レクタングル広告(大)

コメントをどうぞ

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)