HTMLタグ「テーブル(table)タグ」

トップページ	利用規約	掲示板	サーバー紹介	レンタル紹介	素材屋紹介	リンクする	相互リンク
アフィリエイト	初心者	HTML	TABLEタグ	スタイルシート	色の見本	タグ練習	タグ辞典

テーブル(table)タグ

テーブルタグとは htmlタグの１つです。四角い枠を作ることができます。表に使ったり、レイアウトに使ったり、文字や画像を綺麗に揃えたりと、とてもホームページ作りにかかせないものです。このタグを使ってないサイトはほとんどないと思います。このタグを利用して見栄えのいいホームページを作りましょう。このタグは色指定や「border」と書かなければ透明のレイアウト用の枠として使えるので活用しましょう。

■ テーブルタグ <table><tr><td>
■ 枠を表示する border
■ 枠を立体的にする border=数
■ 枠の太さを変える cellspacing=数
■ 枠と文字との間隔 cellpadding=数
■ 背景に色 bgcolor="#ffffff"
■ セルの背景だけ色を変える
■ 外と内の色を同時に表示する
■ 枠を見えなくして色を表示
■ 外の色で細い枠線を作ってみる
■ 枠を２重線 bordercolor="#ffffff"
■ カラフルで立体的なテーブル

■ セル（字を書く場所）横に増やす
■ セル（字を書く場所）縦に増やす
■ セルを縦と横に増やす
■ セルに色を付ける
■ テーブルとセルに色を付ける
■ 縦にセルを結合する rowspan=数
■ 横にセルを結合する colspan=数
■ 枠の横幅を増やす width=数
■ 枠の縦幅を増やす height=数
■ 横の位置を指定 align=指定
■ 縦の位置を指定 valign=指定
■ おさらい

セル（文字を書く場所）を横に増やす

ここに文字

^{文字で書くと上のようになります↑}
★ 横にセル（文字を書く場所）を増やしました。文字は<td>の後に書くと表示されます。
<td>の後に文字を書き</td>で閉じます。タグは閉じるのが基本です。
横に増やしたければその後に<td>を増やします。<td>増やしただけ横にセルが増えます。

ここに文字

^{文字で書くと上のようになります↑}

▲上に移動

セル（文字を書く場所）を縦に増やす

ここに文字

^{文字で書くと上のようになります↑}
★ 縦にセルを増やしました。 <td>の前に<tr>を書きます。
<tr>増やしてを<td>書くと縦の段が１つ増えます。

ここに文字

^{文字で書くと上のようになります↑}

▲上に移動

セルを縦と横に増やす

ここに文字	ここに文字	ここに文字
ここに文字	ここに文字	ここに文字

^{文字で書くと上のようになります↑}
★ 上でやった２つのを組み合わせました。
<tr>で縦の段を作り<td>で横の段を増やします。
</td></tr>とタグを閉じるのを忘れないでください。

▲上に移動

セルに色を付ける

ここに文字	ここに文字	ここに文字
ここに文字	ここに文字	ここに文字

^{文字で書くと上のようになります↑}
★ <td>に色を書くとその場所のセルの色が変わります。
<tr>に色を書くと横1列全てがその色になります。
</td></tr>とタグを閉じるのを忘れないでください。

▲上に移動

テーブルとセルに色を付ける

ここに文字	ここに文字	ここに文字
ここに文字	ここに文字	ここに文字

^{文字で書くと上のようになります↑}
★ <table>に色を書くと全体の色が変わります。
<tr><td>に色を指定していないと<table>の横に書いた色になります。

ここに文字	ここに文字	ここに文字
ここに文字	ここに文字	ここに文字

文字で書くと上のようになります↑
★ borderを消すとこんな感じになります。

ここに文字	ここに文字	ここに文字
ここに文字	ここに文字	ここに文字

^{文字で書くと上のようになります↑}
★ cellspacing=0を加え0にして枠をなくすとこんな感じになります。

ここに文字	ここに文字	ここに文字
ここに文字	ここに文字	ここに文字

^{文字で書くと上のようになります↑}
★ tableの横に書いてある色を消して枠を透明にします。
cellspacing=5で枠の幅を増やすと透明になった枠の幅が増えるので
セルとの間に透明の隙間ができます。

▲上に移動

縦にセルを結合する

ここに文字	ここに文字	ここに文字
ここに文字	ここに文字	ここに文字	ここに文字

^{文字で書くと上のようになります↑}
★ rowspan=2を最初のtdの横に書きました。
するとセルの部分が下のセルと１つになりました。
rowspan=2の2は縦の部分２つを結合する効果があります。
数字を増やすとその数だけセルがあれば結合します。
右上の白い部分は結合したのでズレが発生しました。
１段目にtdを増やすと丁度埋まります。

▲上に移動

横にセルを結合する

ここに文字		ここに文字	ここに文字
ここに文字	ここに文字	ここに文字

^{文字で書くと上のようになります↑}
★ colspan=2を最初のtdの横に書きました。
するとセルの部分が右のセルと１つになりました。
colspan=2の2は横の部分２つを結合する効果があります。
数字を増やすとその数だけセルがあれば結合します。
右下の白い部分は結合したのでズレが発生しました。
2段目にtdを増やすと丁度埋まります。

▲上に移動