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

枠の横幅を増やす


ここに文字


文字で書くと上のようになります↑
tableの横に width=200を書くと全体が指定した数字の長さになります。
width=50%%で長さを指定することもできます。

長い文はどうなるのかテスト


文字で書くと上のようになります↑
width100に固定して、文字を長い文章にしてみました。
指定した幅より文字が長いと自動で下に改行されます。
▲目次へ
枠の縦幅を増やす


ここに文字


文字で書くと上のようになります↑
tableの横に height=100を書くと全体が指定した数字の長さになります。
height=50%%で長さを指定することもできます。
▲目次へ
横の位置を指定したい


ここに文字


文字で書くと上のようになります↑
tdの横にalign=centerを書きました。
align=centerで表示したい位置を指定します。centerは中央に表示です。


ここに文字


文字で書くと上のようになります↑
tdの横に書きました。 align=rightで右に表示。align=leftで左に表示されます。


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


文字で書くと上のようになります↑
trの横に align=centerを書けば横1列全部が同じ位置になります。
td1つづつに位置を指定するのはめんどくさいときなどはtrに書きましょう。
▲目次へ
縦の位置を指定したい


ここに文字


文字で書くと上のようになります↑
tdの横にvalign=bottomを書きました。 bottomは下に表示で、topは上に表示です。
何も書かなければ自動的に真中に表示されます。
▲目次へ
おさらい

table ここに書いたものは全体に反映します。
tr 縦の1段を作ります。色など指定すると横1列全て変わります。
td 横の1段を作ります。このタグの後に文字を書きます。
width=数字 横のセルなどの長さを指定します。
height=数字 縦のセルなどの長さを指定します。
align= 横の配置場所を指定。centerで真中、rightで右、leftで左。
valign= 縦の配置場所を指定。topが上、bottomが下。
colspan=数字 横にセルを数字の数だけ結合します。td内に書く。
rowspan=数字 縦にセルを数字の数だけ結合します。td内に書く。
border 枠を立体的にします。border=5と数字を増やせます。
cellspacing=数字 枠の太さを調整できます。0にすると枠の間が無くなります。
cellpadding=数字 枠と文字との間の隙間を調整できます。0にすると密着。
bgcolor="#色" テーブルに色をつけれます。
bordercolor="#色" 枠線に色をつけれます。2重線になります。
bordercolorlight="#色" borderの立体的な枠の明るい部分の色です。
bordercolordark="#色" borderの立体的な枠の暗い部分の色です。
▲目次へ

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