ぱそおーるHTML講座

<TABLE></TABLE>タグ


<TABLE></TABLE>タグは表を作るためのタグです。
このページもそうですが、レイアウトが容易に出来るので、レイアウトに使っている人も沢山います。
<table border="1">
<tr>
<td>一の部屋</td>
<td>二の部屋</td>
</tr>
<tr>
<td>三の部屋</td>
<td>四の部屋</td>
</tr>
</table>

一の部屋 二の部屋
三の部屋 四の部屋
上のような入れ子構造になっています。
<table></table>内には行を構成する<tr></tr>を行数分だけ記述します。
その中にセルの数だけ<td></td>を記述します。
<table></table>内に<table></table>を入れる事も出来ます。
テーブルタグは</table>を読み込むまで表示されない特徴があるので、複雑な構造にしてしまうと表示に凄く時間が掛かる事があります。

上の４つに区切られた表を使って属性を説明していきます。
表の特性上、border="1"の設定で枠が見えるようにしてあります。

属性
align: 表の表示位置を設定します。（回り込み）
  1. left : 表を左寄せします。
  2. right : 表を右寄せします。
  3. center : 表を中央寄せします。
<table align="center">
一の部屋 二の部屋
三の部屋 四の部屋
leftを指定した場合は、テキストがテーブルの右側に表示されます。
rightを指定した場合は、テキストがテーブルの左側に表示されます。

一の部屋 二の部屋
三の部屋 四の部屋
テーブルの左側にテキストが表示されます。
こんな感じで文字を入力出来ます。


width : テーブルの横幅を設定します。ピクセル、または％で設定します。
height : テーブルの高さを設定します。ピクセル、または％で設定します。
<table width="60%" height="100">
一の部屋 二の部屋
三の部屋 四の部屋
属性を省略すると、セルに記述されたテキストや画像の幅、ウィンドウに合わせた大きさになります。

border : 表の枠の太さを設定します。ピクセル単位です。0だと非表示になります。
bordercolor : 表の枠の色を設定します。
<table border="5" bordercolor="#000000">
一の部屋 二の部屋
三の部屋 四の部屋

cellpadding : 表内の枠とテキストまでの余白を設定します。
cellspacing : 表内の枠幅を設定します。
<table cellpadding="10" cellspacing="10">
一の部屋 二の部屋
三の部屋 四の部屋

赤い部分がcellpaddingで設定する部分です。
青い部分がcellspacingで設定する部分です。


bgcolor : 表の背景色を設定します。
<table bgcolor="#ffcccc">
一の部屋 二の部屋
三の部屋 四の部屋

background : 表の背景画像を設定します。
<table background="sample.gif">
一の部屋 二の部屋
三の部屋 四の部屋

bordercolorlight : 外枠の光の当たる部分の色を設定します。IEのみ
bordercolordark : 外枠の影の部分の色を設定します。IEのみ
<table bordercolorlight="red" bordercolordark="blue">
一の部屋 二の部屋
三の部屋 四の部屋

rules : テーブルの内の内部枠線の表示、非表示を設定します。IE,Netscape7に対応
  1. none : テーブル内の内枠線を非表示にする。
  2. all : テーブル内の内枠線を表示する。（デフォルト）
  3. rows : テーブル内の横内枠線を表示する。
  4. cols : テーブル内の縦内枠線を表示する。
  5. groups : <thead><tbody><tfoot><colgroup>で指定したグループだけを表示する。（使った事がないので、詳細は不明です）
<table rules="none">
一の部屋 二の部屋
三の部屋 四の部屋
<table rules="rows">
一の部屋 二の部屋
三の部屋 四の部屋
<table rules="cols">
一の部屋 二の部屋
三の部屋 四の部屋

frame : テーブルの外枠の表示、非表示を設定します。IE,Netscape7に対応。
  1. void : テーブルの外枠を非表示にします。
  2. above : テーブル上部の外枠を非表示します。
  3. below : テーブル下部の外枠を非表示します。
  4. hsides : テーブル上下部の外枠を非表示にします。
  5. lhs : テーブル左部の外枠を非表示にします。
  6. rhs : テーブル右部の外枠を非表示にします。
  7. vsides : テーブル左右の外枠を非表示にします。
  8. box : テーブル上下左右の外枠を表示します。
  9. border : テーブル上下左右の外枠を表示します。（デフォルト）
<table frame="void">
一の部屋 二の部屋
三の部屋 四の部屋

HOMEへ