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


テーブル(table)タグ
テーブルタグとは htmlタグの１つです。四角い枠を作ることができます。表に使ったり、レイアウトに使ったり、文字や画像を綺麗に揃えたりと、とてもホームページ作りにかかせないものです。このタグを使ってないサイトはほとんどないと思います。このタグを利用して見栄えのいいホームページを作りましょう。このタグは色指定や「border」と書かなければ透明のレイアウト用の枠として使えるので活用しましょう。
■ テーブルタグ <table><tr><td>
■ 枠を表示する border
■ 枠を立体的にする border=数
■ 枠の太さを変える cellspacing=数
■ 枠と文字との間隔 cellpadding=数
■ 背景に色 bgcolor="#ffffff"
■ セルの背景だけ色を変える
■ 外と内の色を同時に表示する
■ 枠を見えなくして色を表示
■ 外の色で細い枠線を作ってみる
■ 枠を２重線 bordercolor="#ffffff"
■ カラフルで立体的なテーブル
 ■ セル（字を書く場所）横に増やす
■ セル（字を書く場所）縦に増やす
■ セルを縦と横に増やす
■ セルに色を付ける
■ テーブルとセルに色を付ける
■ 縦にセルを結合する rowspan=数
■ 横にセルを結合する colspan=数
■ 枠の横幅を増やす width=数
■ 枠の縦幅を増やす height=数
■ 横の位置を指定 align=指定
■ 縦の位置を指定 valign=指定
■ おさらい
テーブルタグを書く


これがテーブルタグです


文字で書くと上のようになります↑
★ これが基本となるテーブルタグです。今の状態では何も表示されていません。
ホームページでよく レイアウトや表などに使われるタグです。
文字はtdの後に書きます。
▲上に移動
枠を表示する


これがテーブルタグです


文字で書くと上のようになります↑
★ tableの横にborderをつけたしました。これで枠が表示されました。
▲上に移動
枠を立体的にする


これがテーブルタグです


文字で書くと上のようになります↑
★ borderに付け足してborder=5と書きます。すると枠が立体的になります。
数字を増やすと増やすだけ太くなります。
▲上に移動
枠の太さを変える


これがテーブルタグです


文字で書くと上のようになります↑
★ tableの横にcellspacing=5を加えました。数字を増やすと枠が大きくなります。


これがテーブルタグです

★ 数字の所cellspacing=0にすると枠の隙間がなくなります
▲上に移動
枠と文字との間隔を増やす


これがテーブルタグです


文字で書くと上のようになります↑
★ tableの横に cellpadding=5を加えました。枠と文字との間の空白が広くなります。
数字を増やすと枠が大きくなります。


これがテーブルタグです

★ 数字の所cellpadding=0にすると枠に密着します。
▲上に移動
背景に色を付ける


これがテーブルタグです


文字で書くと上のようになります↑
★ tableの横に bgcolor="#ffcccc"を加えました。tableの横に書くと全体がその色になります。
▲上に移動
文字が表示されている場所（セル）の背景だけ色を変える


これがテーブルタグです


文字で書くと上のようになります↑
★ tdの横に bgcolor="#ffeecc"を加えました。tdの横に書くとその部分だけ色が反映します。
▲上に移動
上でした2つの色を同時に表示する


これがテーブルタグです


文字で書くと上のようになります↑
★ tableとtdの横にそれぞれ色を反映しました。tdに書いた色がtableの色より手前に
表示されるので、tableに書いた色が枠の色になります。
▲上に移動
枠を見えなくして色を表示


これがテーブルタグです


文字で書くと上のようになります↑
★ borderを消しました。これで枠が消えて色だけが残りました。
後ろの色が枠の変わりみたいになってます。
▲上に移動
tableに書かれた色を細い枠線に使う


これがテーブルタグです


文字で書くと上のようになります↑
★ tableの横にcellspacing=1を加えました。後ろの色の太さが1になり細い枠線になります。
tableの横に書いた色（bgcolor="#ff0000"）は枠の色になります。


これがテーブルタグです


文字で書くと上のようになります↑
★ tableの横にcellpadding=5を加えて間隔をあけました。
tableの色をbgcolor="#000000"にして枠線の色が黒になりました。
▲上に移動
枠を２重線にする


これがテーブルタグです


文字で書くと上のようになります↑
★ tableの横にborderとbordercolor="#ff0000"を加えました。
bordercolor="#ff0000"が２重線の色になります。


これがテーブルタグです


文字で書くと上のようになります↑
★ tableの横に bgcolor="#ffcccc"を足しました。すると２重線の間の色に反映します。


これがテーブルタグです


文字で書くと上のようになります↑
★ borderにborder=3を加えました。２重線の外側だけ太さが変わります。
cellspacing=数字で２重線の間の間隔を増やしたり出来ます。
▲上に移動
カラフルで立体的なテーブル


これがテーブルタグです


文字で書くと上のようになります↑
★ tableの横に border=5と bordercolorlight="#ffaaaa"と
bordercolordark="#ee7777"を加えました。border=5は枠の太さ
bordercolorlight="#ffaaaa"は立体な枠の明るい部分の色
bordercolordark="#ee7777"は立体な枠の暗い部分の色


これがテーブルタグです


文字で書くと上のようになります↑
★ tableの横に bgcolor="#ffddcc"を加えました。
tdの横に bgcolor="#ffffee"を加えました。


これがテーブルタグです


文字で書くと上のようになります↑
★ tableの横の bgcolor="#ffddcc"を消して tableの横に cellspacing=0を加えました。
cellspacing=0にしたので枠の幅がなくなりました。
▲上に移動