HTMLで表を作ろう(tableタグの属性編)

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

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

tableタグ

要素 table テーブル全体の設定を行う
属性 align テーブル全体の位置を設定する
border テーブルの罫線の太さを設定する
bordercolor テーブルの罫線の色を設定する
bgcolor テーブル全体の背景色を設定する
background テーブル全体の背景画像を設定する
cellpadding セルとデータの余白を設定する
cellspacing セル間の余白を設定する
width テーブル全体の幅を設定する
height テーブル全体の高さを設定する

tableタグの属性

align テーブルの位置を設定する。値は「left」「center」「right」があり、leftは左ぞろえ、centerは中央ぞろえ、rightは右ぞろえができる。
border テーブルの罫線の太さを設定する。デフォルトの値は0となっており罫線は表示されない。罫線を表示したい場合は1以上の数値を指定する必要がある。
bordercolor テーブルの罫線の色を設定する。値は基本色(カラーネーム)かRGB値で設定する。
bgcolor テーブル全体の背景色を設定する。値は基本色(カラーネーム)かRGB値で設定する。
background テーブル全体の背景画像をリンク設定する。画像へのリンク設定はimg要素のsrc属性と同様
cellpadding セルとデータの余白を設定する。デフォルトでは少し余白が空いており、値はピクセル(単位指定は無し)で設定する。
cellspacing セル間の余白を設定する。デフォルトでは少し余白が空いており、値はピクセル(単位指定は無し)で設定する。
width テーブル全体の幅を設定する。列ごとの幅設定はtdで行う。
height テーブル全体の高さを設定する。行ごとの高さ設定はtrで行う。

tableタグの属性を利用した例

tableタグに属性を指定して記述した例とサンプルを以下に掲載します。

以下HTMLでの記述例

以下が画像でのサンプルとHTMLファイル(リンクをクリックするとテーブルのページへジャンプ)
※サンプル画像のブラウザはIE11を使用

tableタグの属性

補足:cellpaddingとcellspacing

cellpaddingとcellspacingの余白の違いは以下のようになっています。
(赤のまるがcellspacing、青のまるがcellpadding)
cellpaddingとcellspacing

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

コメントをどうぞ

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

次の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="">

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