テーブルタグ
HOME
>
よくわかるHTML講座
>テーブルタグ
記述方法
<table>
<tr>
<td>
記述例
基本的な記述例
記述方法
テーブルタグって？
表を作るためのタグです。本来は表を作るためのタグですが、ページのレイアウトにも多用されています。最新のHTML仕様では、テーブルタグを使ったページレイアウトは「あんまりやっちゃいけないよ」ということになっています。しかし、WEBページを見る人がみんな最新のブラウザを使っているとは限らないので、まだまだテーブルタグを使ったレイアウトは重要なテクニックといえるでしょう。
ページレイアウトの重要性
WEBページが他のメディア(書籍や映像など)と決定的に異なっている点といえば、「見る人の環境が違う」特に、「見ている人のモニタサイズ(orウィンドウサイズ)が違う」ということに尽きます。
「同じ雑誌が、東北地方ではB5サイズで関西地方ではA4サイズ」なんてことは有り得ません。もしそんなことになっていたら、見出しをページの中央にしたくてもページの端からの距離がまちまちだし、ページ一面に写真を載せたくてもサイズが違う、などなどヤヤコシイことこの上なしです。
しかし、WEBページにはそういったことが日常茶飯事なのです。そのため、「メニューはウィンドウサイズの15%」とか、「タイトルは画面の中央」といった「相対的な」位置指定が必要となります。
そういった「相対的な」位置指定にテーブルタグは非常に強力です。タグの手打ちをマスターしたい人は(まるで自分はマスターしたみたいな言い方)、簡単な作表から始めて、徐々にテーブルタグをマスターして下さい。
<table> テーブルを作る
<table cellpadding="
セルの余白
" cellspacing="
セル間隔
" border="
枠の太さ
" width="
幅
">
セルの余白
セルの余白を指定します。例えば "0" を指定すると枠ギリギリに内容が表示され、 "10" を指定すると枠から10の余白を空けて表示されます。
セル間隔
セルの間隔を指定します。例えば "0" を指定すると隣のセルとピッタリ合わさって表示され、 "10" を指定するとセル同士が10の余白を空けて表示されます。
枠の太さ
枠の太さを指定します。 "0" を指定すると枠が表示されなくなります。
幅
表の幅を指定します。 "400" などと絶対指定も出来ますし、 "70%" などと相対指定も可能です。
<tr> 行を作る
<tr align="
水平位置
" valign="
垂直位置
">
水平位置
セルの内容の水平位置を指定します。デフォルトは「左寄せ」です。
垂直位置
セルの内容の垂直位置を指定します。デフォルトは「中央揃え」です。
<td> 列を作る
<td align="
水平位置
" valign="
垂直位置
colspan="
水平結合セル数
" rowspan="
垂直結合セル数
">
水平位置
セルの内容の水平位置を指定します。デフォルトは「左寄せ」です。
垂直位置
セルの内容の垂直位置を指定します。デフォルトは「中央揃え」です。
記述例
基本的な記述例
もっとも基本的な記述例
ソース
<table border="1"> <tr> <td>アサヒ</td> <td>スーパードライ</td> </tr> <tr> <td>キリン</td> <td>ラガー</td> </tr> </table>
実行結果
アサヒ
スーパードライ
キリン
ラガー
セルを結合したり、セル内容位置を指定する例
ソース
<table border="1"> <tr> <td>アサヒ</td> <td>スーパードライ</td> </tr> <tr> <td rowspan="2">キリン</td> <td align="center">ラガー</td> </tr> <tr> <td align="right">一番搾り</td> </tr> </table>
実行結果
アサヒ
スーパードライ
キリン
ラガー
一番搾り
←この行に<td>タグは2個必要
←この行に<td>タグは2個必要(最初のセルは縦に2個結合)
←この行に<td>タグは1個だけ(一段上の最初のタグは縦2個分あるから)
枠線を消したり、セル余白を指定する例
ソース
<table border="0" cellpadding="5"> <tr> <td>アサヒ</td> <td>スーパードライ</td> </tr> <tr> <td>キリン</td> <td>ラガー</td> </tr> </table>
実行結果
アサヒ
スーパードライ
キリン
ラガー