| ソース | 表示 | 例 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| <table border="2"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
|
| <table></table> | テーブルの範囲を示すタグ |
| <tr></tr> | テーブルの行を示すタグ。<table></table>内で使用する |
| <td></td> | テーブルの項目で左寄せになる項目。<tr></tr>内で使用する |
| <th></th> | テーブルの項目で自動的に太字・センタリングされる項目。<tr></tr>内で使用する |
<td><th>による項目内には文字列の他に通常のタグが使用できます。その場合、必ず項目内でタグの開始と終了が組みで行われるように注意しましょう。
もし、<td><th>内に文字列が収まっていない場合は、テーブルが表示された上にそれら文字列（タグを含む）が押し出されて表示されてしまいます。
border="n" … テーブルの外枠。太さを数値で表記します。ｎピクセル分の太さの枠になります。
| ソース | 表示 | ソース | 表示 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="0"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
<table border="2"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
||||||||
| ソース | 表示 | ソース | 表示 | ||||||||
| <table border="5"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
<table border="10"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
文章の段落や写真配置を整えるためにテーブルを使う場合、
border="0"に設定してテーブル枠を見えないようにしてしまいます。
しかし、作業中はborder="2"などとして細い枠を表示させた方が、項目のずれや、設定の必要な項目を見つけるのに最適です。
| width=n; n% … | <table>内でテーブル幅。ｎピクセルまたは画面幅のｎ％で表記します。 %で表記した場合、画面のサイズを変化させると即座に幅が変わります。テーブル内にあるテーブルに％指定をした場合、内側のテーブルが収まっている外側テーブルの項目の幅を100%として幅が決まります。 |
| height=n; n% … | <table>内でテーブルの高さを指定します。ｎピクセルまたは画面の高さのｎ％で表記します。 他の注意点は同上です。 |
| ソース | 表示 | ソース | 表示 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="2" width="100"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
<table border="2" width="300"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
| 表示 |
|---|
| このテーブルの幅が画面の50% |
| ソース |
| <table border="2" width="50%"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
| 表示 |
|---|
| このテーブルの幅が画面の80% |
| ソース |
| <table border="2" width="80%"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
| ソース | 表示 | ソース | 表示 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="2" width="100" height="100"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
<table border="2" width="200" height="200"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
| width=n; n% … | <td><th>内で項目の幅を決める。ｎピクセルまたは画面幅のｎ％で表記します。 |
| height=n; n% … | <td><th>内で項目の高さを決める。ｎピクセルまたは画面幅のｎ％で表記します。 <tr>内で指定した場合、その行の全項目に指定が行われます。 項目全てを指定しなくても、同じ列はすべて同じ幅になります。また、指定をしなかった項目は全体の幅から残された幅を使って有効な幅に自動設定されます。 |
| ソース | 表示 | ||||
|---|---|---|---|---|---|
| <table border="2"> <tr><th width="100">title</th><th width="200">title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
||||
| ソース | 表示 | ||||
| <table border="2" width="100"> <tr><th>title</th><th height="50">title</th></tr> <tr height="100"><td>data</td><td>data</td></tr> </table> |
|
| bgcolor="#rrggbb" … | テーブルの背景色を設定します。<table>内に記述するとテーブル全体の背景色を、<tr>内だと行、<td>や<th>内だと項目の背景色が設定されます。 #rrggbbには色の設定をしますが、通常はRGB（赤緑青）の色深度を16進数2桁毎に表記します。赤は#ff0000、緑は#00ff00、青は#0000ffとなります。また、色名で指定することもできます。（カラーチャート参照） <table><tr><td><th>にそれぞれbgcolorを設定した場合、前から順番に色を重ね塗るため後から指定した色が上になって表示されます。 |
| ソース | 表示 | ソース | 表示 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="2" bgcolor="#ffffff"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
<table border="2"> <tr bgcolor="#ffffff"><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
||||||||
| ソース | 表示 | ソース | 表示 | ||||||||
| <table border="2"> <tr><th bgcolor="#ffffff">title</th><th>title</th></tr> <tr><td>data</td><td bgcolor="#ffffff">data</td></tr> </table> |
|
<table border="2" bgcolor="#ffffff"> <tr bgcolor="#ff0000"><th bgcolor="#00ff00">title</th><th>title</th></tr> <tr><td>data</td><td bgcolor="#0000ff">data</td></tr> </table> |
|
align=left; center; right … <table>内に記述した場合、テーブル全体の画面内での位置を決めます。
| <table border="2"> | 省略することができます |
| <table border="2" align="left"> | 左寄せ。ページ全体が中央や右寄せになっている場合に有効です |
| <table border="2" align="center"> | 中央寄せ |
| <table border="2" align="right"> | 右寄せ |
| align=left; center; right … | <tr><td><th>内に記述した場合、項目内の文字の横方向の位置を決めます。<td>は基本がleftです。<th>は基本がcenterなので、leftやrightが有効です。 |
| valign=top; middle; bottom … | <tr><td><th>内に記述し、項目内の文字の縦方向の位置を決めます。基本はmiddleです。 |
| ソース | 表示 | ソース | 表示 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="2" width="100"> <tr align="left"><th>title</th><th>title</th></tr> <tr align="center"><td>data</td><td>data<br>data</td></tr> </table> |
|
<table border="2" width="100"> <tr align="right"><th>title</th><th align="left">title</th></tr> <tr align="right"><td>data</td><td align="left">data<br>data</td></tr> </table> |
|
||||||||
| ソース | 表示 | ソース | 表示 | ||||||||
| <table border="2" width="100"> <tr><th>title</th><th>title</th></tr> <tr valign="top"><td>data</td><td>data<br>data</td></tr> </table> |
|
<table border="2" width="100"> <tr><th>title</th><th>title</th></tr> <tr valign="bottom"><td>data</td><td>data<br>data</td></tr> </table> |
|
テーブルを組んで見栄えを整える例として、箇条書きの文章の頭を揃えるときに使えます。
左側の項目の長さが異なっていても改行後の文章の左端が揃います。
そのときに左の項目を文章の書き出しの行に合わせるために、<tr>にvalignで行全体を上に寄せます。
また、左の項目が強制的に改行しないようにnowrapも使っています。
| ソース | 表示 | ||||
|---|---|---|---|---|---|
| align=left … 項目内の文字の横方向の位置を決めます。<br> valign=top … 項目内の文字の縦方向の位置を決めます。 |
align=left … 項目内の文字の横方向の位置を決めます。 valign=top … 項目内の文字の縦方向の位置を決めます。 |
||||
| ソース | 表示 | ||||
| <table border="0"> <tr valign="top"> <td nowrap>align=left …</td> <td>項目内の文字の横方向の位置を決めます。</td> </tr> <tr valign="top"> <td nowrap>valign=top …</td> <td>項目内の文字の縦方向の位置を決めます。</td> </tr> </table> |
|
||||
| <table border="2"> |
|
| background=ファイル名 … | <body>と同様に背景に画像を使用することができます。<table><td><th>の各タグ内で指定することができます。IEでは<tr>には対応していません。 画像は項目の大きさに合わせてタイル張りされます。画像にあわせてテーブルや項目の大きさが自動に決まることはありませんので、項目の幅と高さを画像にあわせる必要があります。通常は項目内に<img>タグで画像を配置しますが、背景に設定することで、項目内に記述した文字を画像の上に重ねることができます。 bgcolorを指定している場合、その上に画像が表示されますが、<table>で指定した画像を<tr><td><th>内で指定した背景色で上塗りすることができます。 |
| ソース | 表示 | ||||
|---|---|---|---|---|---|
| <table border="2" width="100" bgcolor="#FFFFFF"> <tr><th background="image/kogara_6023L.gif">title</th><th>title</th></tr> <t><td>data</td><tdr background="image/kogara_6023D.gif">data</td></tr> </table> |
|
||||
| ソース | 表示 | ||||
| <table border="2" width="100" background="image/kogara_6023L.gif"> <tr><th>title</th><th bgcolor="#FFFFFF">title</th></tr> <tr><td background="image/kogara_6023D.gif">data</td><td>data</td></tr> </table> |
|
重ね順：(下） <table bgcolor> <table background> <tr bgcolor> <td/th bgcolor> <td/th background> (上）
cellpadding="n" … 項目内の文字と周囲の枠との余白を設定します。
| ソース | 表示 | ソース | 表示 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="2" width="100" cellpadding="0"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
<table border="2" width="100" cellpadding="5"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
||||||||
| ソース | 表示 | ソース | 表示 | ||||||||
| <table border="2" width="100" cellpadding="10"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
<table border="2" width="100" cellpadding="20"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
cellspacing="n" … テーブルの枠の幅を設定します。
| ソース | 表示 | ソース | 表示 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="2" width="100" cellspacing="0"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
<table border="2" width="100" cellspacing="5"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
||||||||
| ソース | 表示 | ソース | 表示 | ||||||||
| <table border="2" width="100" cellspacing="10"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
<table border="2" width="100" cellspacing="20"> <tr><th>title</th><th>title</th></tr> <tr><td>data</td><td>data</td></tr> </table> |
|
| colspan="n" … | <td><th>で設定した項目をｎ個分横につなぎます。<td><th>内に記述します。 指定位置より右側に影響を及ぼしますので、"2"と指定した場合、右にある１つの項目を減らさないと数が合わなくなります。 |
| rowspan="n" … | <td><th>で設定した項目をｎ個分縦につなぎます。<td><th>内に記述します。 指定位置より下側に影響を及ぼしますので、"2"と指定した場合、次の行の同列の位置まで項目が伸びて、そこに来るはずの項目を右に押し出します。 |
| ソース | 表示 | ソース | 表示 | ソース | 表示 | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="2"> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> |
|
<table border="2"> <tr> <td>A</td> <td colspan="2">BC</td> </tr> <tr> <td rowspan="2">a1</td> <td>b</td> <td>c</td> </tr> <tr> <td>2</td> <td>3</td> </tr> </table> |
|
<table border="2"> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>a</td> <td colspan="2" rowspan="2">bc23</td> </tr> <tr> <td>1</td> </tr> </table> |
|
||||||||||||||||||||||||
上記の例では、右が標準の状態です。真ん中がcolspanとrowspanをそれぞれ別の箇所で使っており、右は同じ項目にcolspanとrowspanの両方を設定しています。
箱の個数を間違うと次のようになります。テーブル面の凹凸で間違っている部分を特定できます。
| ソース | 表示 | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="2"> <tr> <th> </th><th width="50">1</th><th width="50">2</th><th width="50">3</th> </tr> <tr> <th>1</th><td>A</td><td>B</td> </tr> <tr> <th>2</th><td>a</td><td>b</td><td>c</td> </tr> <tr> <th>3</th><td>1</td><td>2</td><td>3</td><td>4</td> </tr> </table> |
|
1行目は１つ少なく、3行目は１つ多く<td>が入っています。3行目のせいで、2行目の表示も正しくなりません。
colspanやrowspanで項目の数が変わってしまう時は特に注意が必要な点です。
どちらにせよテーブルの設定を変更する場合は、ブラウザで同じファイルを表示させながら、少しずつ変化を追いかけた方が間違いを発見しやすくなります。また、間違った時の表示を覚えていると解決も早くなりますので、間違った経験も無駄にはなりません。
項目の統合を手作業で繰り返すのは非常に難しいことです。先に内容を考えて、中に文字を入れておくと、どの箱がどこに来るのか判りやすくなります。
内容が決まっていなくても仮に文字を入れておくと手間は増えますが、見た目で判断しやすいため作業がスムーズになります。
nowrap … <td><th>の中で自動改行をさせたくない項目に使います。
| ソース | 表示 | ||
|---|---|---|---|
| <table border="2"> <tr> <td width="50">テキストテキスト</td> <td width="50">テキスト</td> </tr> </table> |
|
||
| <table border="2"> <tr> <td width="50" nowrap>テキストテキスト</td> <td width="50">テキスト</td> </tr> </table> |
|
上記例では、わざと項目の幅を狭くしてあります。
上が通常の場合で、中のテキストは自動的に改行されて縦にテーブルが伸びていきます。
下はnowrapを指定しているため、テキストが項目の設定幅を無視して項目の幅を強制的に広げています。これによりテーブルが右に伸びるので、画面からはみ出すことも起こります。
改行させない項目を指定した場合、１つは改行しても良い項目を残しておくと、画面内にテーブルが収まります。
テーブル内に文章を記述したときに、テーブルが画面いっぱいに広がります。そのときに項目内で自動改行が発生しますが、行数を合わせるために短い文字列が押しつぶされたようになることがあります。このような時に項目名を改行させないようにして、表示を美しく整えることができます。
| 表示 | 解説 |
|---|---|
| 項目名 | テーブル内に文章を記述したときに、テーブルが画面いっぱいに広がります。そのときに項目内で自動改行が発生します。左の項目にある文字列が縦に並んでしまいます。また、その影響が上の行にも現れてしまいました。 テーブル幅を500に設定し強制的に改行を発生させています。 |
| 表示 | 解説 |
|---|---|
| 項目名 | テーブル内に文章を記述したときに、テーブルが画面いっぱいに広がります。そのときに項目内で自動改行が発生します。左の項目にある文字列が縦に並んでしまいます。また、その影響が上の行にも現れてしまいました。 ←こちらにnowrapを設定したため、項目が正しく表示されています。 |
属性はテーブルに付けるタイトルや注記のようなものです。特徴としてはテーブルの幅に適応した文字列をテーブルの上か下に配置することができます。
| 属性 | align=left; center; right; top; bottom … 基本はcenterです。（Firefoxの場合、left/rightでは表の左右に表示されます） valign=top; bottom … 基本はtopです。（IEのみの使用可能） |
| ソース | 表示 | ソース | 表示 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
<table border="2" width="100"> |
|
<table border="2" width="100"> |
|
||||||||
| ソース | 表示 | ソース | 表示 | ||||||||
<table border="2" width="100"> |
|
<table border="2" width="100"> |
|
テーブルの応用例は「テーブル 事例集」として別にまとめました。
基本的な配置、色分けによる見やすい表の作り方、テーブルの階層化、画像を使用した飾り枠など紹介しています。
| width=n; n% … | 水平線の長さをｎポイント分、または画面に対するn%に指定する。 テーブルの中でn%の指定をした場合、その項目の幅に対する長さとなる。 |
| ソース | 表示 | ソース | 表示 |
|---|---|---|---|
<hr width="50"> |
<hr width="100"> |
||
| ソース | width=80 | ソース | width=160 |
<hr width="50%"> |
<hr width="100%"> |
| size=n … | 水平線の幅（太さ）を指定します。 |
| ソース | 表示 | ソース | 表示 |
|---|---|---|---|
<hr width="50" size="2"> |
<hr width="50" size="10"> |
| align=left; center; right … | 水平線の行位置を指定します。基本はcenterです。 <p><center><div>を使っても行位置を変更できますが、その影響を単独で変えたいときにも使います。 |
| ソース | 表示 | ソース | 表示 | ソース | 表示 |
|---|---|---|---|---|---|
<hr width="50" align="left"> |
<hr width="50" align="center"> |
<hr width="50" align="right"> |
| noshade … | 水平線の影を取ります。IEでは線の中が影の色になります。 |
| ソース | 表示 | ソース | 表示 |
|---|---|---|---|
<hr width="50" noshade> |
<hr width="50" size="10" noshade> |
同じページ内で話題を切り替えるために水平線を使いますが、複数の水平線を使って飾りとすることもあります。
同じ長さの水平線や、異なる長さの水平線を複数組合わせることで、それらにデザイン性を与えることができます。
| ソース | 表示 |
|---|---|
| <hr width="80%"> <hr width="60%"> <hr width="40%"> <hr width="20%"> |
|
| <hr width="10" size="10"> <hr width="10" size="10"> <hr width="10" size="10"> <hr width="10" size="10"> <hr width="10" size="10"> |
|
| <hr align="right" width="50%"> <hr align="right" width="40%"> <hr align="right" width="30%"> <hr align="right" width="20%"> |
|
| <hr width="10" size="10"> <hr width="20" size="20"> <hr width="40" size="20"> <hr width="20" size="20"> <hr width="10" size="10"> |
水平線のwidth とsizeを同じにすると四角いタイルの様に見えます。これをテーブルと組み合わせて縦横に並べることができます。