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

トップページ	利用規約	掲示板	ランキング	初心者説明	質問集	リンクする	相互リンク
タグの説明	テーブルタグ	スタイルシート	色の見本	素材屋リンク	作成リンク	WEBスペース	レンタルリンク

テーブル(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を増やすと丁度埋まります。

▲目次へ

お役立ちリンク集： sozai-R 素材NAVI イラスト素材プチッチ HP作成無料ホームページ制作会社ジェバアーツ格安ホームページの制作屋