テーブル基本形

sample

<table border="1">

<tr>
<td></td>
</tr>

</table>


<table border="1">
<tr>
<td></td> <td></td> <td></td> <td></td> <td></td>
</tr>

<tr>
<td></td> <td></td> <td></td> <td></td> <td></td>
</tr>

</table>

preview


explain

テーブルの基本形

<table> <tr><td>ああああ</td></tr> </table>


<table></table>でテーブル全体を囲み、
横一行を<tr></tr>で囲み、その中のセルを<td></td>で囲みます。

見出し

sample

<table border="1">
<tr>
<th width="150" >果物</th> <th>野菜</th>
</tr>

<tr>
<td>みかん</td> <td>人参</td>
</tr>

<tr>
<td>いちご</td> <td>大根</td>
</tr>

</table>


<table border="1">
<tr>
<th>果物</th> <td>りんご</td> <td>みかん</td>
</tr>

<tr>
<th>野菜</th> <td>白菜</td> <td>青菜</td>
</tr>

</table>

preview

果物 野菜
みかん 人参
いちご 大根

果物 りんご みかん
野菜 白菜 青菜

explain

<th>・・・セルの見出し。<td>の代わりに使います。
<th>で囲ったセルの中は自動的に太字になり、中央寄せになるようです。

キャプション

sample

<table border="1">
<caption>食料一覧</caption>
<tr>
<td>りんご</td> <td>みかん</td>
</tr>

<tr>
<td>白菜</td> <td>青菜</td>
</tr>

</table>

preview

食料一覧
りんご みかん
白菜 青菜

explain

<caption></caption>・・・テーブルのタイトル、題名
<table>タグの直後に記載します。

セルの間隔、マージン

sample

<table border="1" cellspacing="10">
<tr>
<td>りんご</td> <td>みかん</td>
</tr>

<tr>
<td>白菜</td> <td>水菜</td>
</tr>

</table>

preview

りんご みかん
白菜 水菜

explain

cellspacing=" "・・・セルとセルの間隔、セルとテーブルの外枠との間隔設定。

cellspacing="10"(10ピクセルの間隔があきます。)
cellspacing="10%"(10%の間隔があきます。)

sample

<table border="1" cellpadding="10">

<tr>
<td>ガム</td> <td></td>
</tr>

<tr>
<td>プリン</td> <td>ゼリー</td>
</tr>

</table>

preview

ガム
プリン ゼリー

explain

cellpadding=" "・・・セルの中身と枠線との間隔設定。

cellpadding="10"(10ピクセルの間隔があきます。)
cellpadding="10%"(10%の間隔があきます。)

枠線

sample

<table border="5" bordercolor="pink">
<tr>
<td>メロン</td> <td>すいか</td>
</tr>

<tr>
<td>コーヒー</td> <td>紅茶</td>
</tr>

</table>


<table border="10" bordercolor="green">
<tr>
<td>メロン</td> <td>すいか</td>
</tr>

<tr>
<td>コーヒー</td> <td>紅茶</td>
</tr>

</table>

preview

メロン すいか
コーヒー 紅茶

メロン すいか
コーヒー 紅茶

explain

border="5"・・・テーブルの外枠の太さ。(border="5"は、5ピクセルの太さ)
という指示です。

bordercolor="green"・・・テーブルの枠線の色。(外枠だけじゃなく全部の枠線)
bordercolor="#008000"でも一緒)

外枠表示指定

sample

<table border="5" frame="void">
<tr>
<td>メロン</td> <td>すいか</td>
</tr>

<tr>
<td>コーヒー</td> <td>紅茶</td>
</tr>

</table>

preview

frame="void"
メロン すいか
コーヒー 紅茶

frame="above"
メロン すいか
コーヒー 紅茶

frame="below"
メロン すいか
コーヒー 紅茶

frame="hsides"
メロン すいか
コーヒー 紅茶

frame="vsides"
メロン すいか
コーヒー 紅茶

frame="lhs"
メロン すいか
コーヒー 紅茶

frame="rhs"
メロン すいか
コーヒー 紅茶

frame="border"
メロン すいか
コーヒー 紅茶

frame="box"
メロン すいか
コーヒー 紅茶

explain

frame=" " ・・・テーブルの外枠のどの部分を表示させるかの設定。


void
外枠なし
above
上のみ
below
下のみ
hsides
上下のみ
vside
左右のみ
lhs
左側のみ
rhs
右側のみ
box
外枠すべて
border
四辺の縁取り

boxとborderの差がいまいち分かりません・・・。

内側の線表示指定

sample

<table border="5" rules="none">
<tr>
<td>メロン</td> <td>すいか</td>
</tr>

<tr>
<td>コーヒー</td> <td>紅茶</td>
</tr>

</table>

preview

rules="none"
メロン すいか
コーヒー 紅茶

rules="groups"
果物飲み物
メロン すいか
コーヒー 紅茶

rules="rows"
メロン すいか
コーヒー 紅茶

rules="cols"
メロン すいか
コーヒー 紅茶

rules="all"
メロン すいか
コーヒー 紅茶

explain

rules=" " ・・・テーブルの中の罫線のどの部分を表示させるかの設定。


none
なし
groups
グループ毎の境界線
rows
横の列の境界線
cols
縦の列の境界線
all
すべての境界線

thead,tfoot,tbody,colgroup,col要素