テーブル(table)タグ｜HTMLタグ・CSS

テーブル(table)タグ

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

これがテーブルタグです <table border> <tr> <td>これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ tableの横にborderをつけたしました。これで枠が表示されました。 ▲上に移動

これがテーブルタグです <table border=5> <tr> <td>これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ borderに付け足してborder=5と書きます。すると枠が立体的になります。 数字を増やすと増やすだけ太くなります。 ▲上に移動

これがテーブルタグです <table border cellspacing=5> <tr> <td>これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ tableの横にcellspacing=5を加えました。数字を増やすと枠が大きくなります。 これがテーブルタグです ★ 数字の所cellspacing=0にすると枠の隙間がなくなります ▲上に移動

これがテーブルタグです <table border cellpadding=8> <tr> <td>これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ tableの横に cellpadding=5を加えました。枠と文字との間の空白が広くなります。 数字を増やすと枠が大きくなります。 これがテーブルタグです ★ 数字の所cellpadding=0にすると枠に密着します。 ▲上に移動

これがテーブルタグです <table border bgcolor="#ffcccc"> <tr> <td>これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ tableの横に bgcolor="#ffcccc"を加えました。tableの横に書くと全体がその色になります。 ▲上に移動

これがテーブルタグです <table border> <tr> <td bgcolor="#ffeecc">これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ tdの横に bgcolor="#ffeecc"を加えました。tdの横に書くとその部分だけ色が反映します。 ▲上に移動

これがテーブルタグです <table border bgcolor="#ffcccc"> <tr> <td bgcolor="#ffeecc">これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ tableとtdの横にそれぞれ色を反映しました。tdに書いた色がtableの色より手前に 表示されるので、tableに書いた色が枠の色になります。 ▲上に移動

これがテーブルタグです <table bgcolor="#ffcccc"> <tr> <td bgcolor="#ffeecc">これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ borderを消しました。これで枠が消えて色だけが残りました。 後ろの色が枠の変わりみたいになってます。 ▲上に移動

これがテーブルタグです <table bgcolor="#ff0000" cellspacing=1> <tr> <td bgcolor="#ffeecc">これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ tableの横にcellspacing=1を加えました。後ろの色の太さが1になり細い枠線になります。 tableの横に書いた色（bgcolor="#ff0000"）は枠の色になります。 これがテーブルタグです <table bgcolor="#000000" cellspacing=1 cellpadding=5> <tr> <td bgcolor="#ffeecc">これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ tableの横にcellpadding=5を加えて間隔をあけました。 tableの色をbgcolor="#000000"にして枠線の色が黒になりました。 ▲上に移動

これがテーブルタグです <table border bordercolor="#ff0000"> <tr> <td bgcolor="#ffeecc">これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ tableの横にborderとbordercolor="#ff0000"を加えました。 bordercolor="#ff0000"が２重線の色になります。 これがテーブルタグです <table border bordercolor="#ff0000" bgcolor="#ffcccc"> <tr> <td bgcolor="#ffeecc">これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ tableの横に bgcolor="#ffcccc"を足しました。すると２重線の間の色に反映します。 これがテーブルタグです <table border=3 bordercolor="#ff0000" bgcolor="#ffcccc"> <tr> <td bgcolor="#ffeecc">これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ borderにborder=3を加えました。２重線の外側だけ太さが変わります。 cellspacing=数字で２重線の間の間隔を増やしたり出来ます。 ▲上に移動

これがテーブルタグです <table border=5 bordercolorlight="#ffaaaa" bordercolordark="#ee7777"> <tr> <td>これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ tableの横に border=5と bordercolorlight="#ffaaaa"と bordercolordark="#ee7777"を加えました。border=5は枠の太さ bordercolorlight="#ffaaaa"は立体な枠の明るい部分の色 bordercolordark="#ee7777"は立体な枠の暗い部分の色 これがテーブルタグです <table border=5 bordercolorlight="#ffaaaa" bordercolordark="#ee7777" bgcolor="#ffddcc"> <tr> <td bgcolor="#ffffee">これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ tableの横に bgcolor="#ffddcc"を加えました。 tdの横に bgcolor="#ffffee"を加えました。 これがテーブルタグです <table border=5 bordercolorlight="#ffaaaa" bordercolordark="#ee7777" cellspacing=0> <tr> <td bgcolor="#ffffee">これがテーブルタグです</td> </tr> </table> 文字で書くと上のようになります↑ ★ tableの横の bgcolor="#ffddcc"を消して tableの横に cellspacing=0を加えました。 cellspacing=0にしたので枠の幅がなくなりました。 ▲上に移動

練習用書き込みフォーム（サンプル表示）