テーブル基本形
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
| メロン | すいか |
| コーヒー | 紅茶 |
| メロン | すいか |
| コーヒー | 紅茶 |
| メロン | すいか |
| コーヒー | 紅茶 |
| メロン | すいか |
| コーヒー | 紅茶 |
| メロン | すいか |
| コーヒー | 紅茶 |
| メロン | すいか |
| コーヒー | 紅茶 |
| メロン | すいか |
| コーヒー | 紅茶 |
| メロン | すいか |
| コーヒー | 紅茶 |
| メロン | すいか |
| コーヒー | 紅茶 |
explain
frame=" " ・・・テーブルの外枠のどの部分を表示させるかの設定。
boxとborderの差がいまいち分かりません・・・。
内側の線表示指定
sample
<table border="5" rules="none">
<tr>
<td>メロン</td> <td>すいか</td>
</tr>
<tr>
<td>コーヒー</td> <td>紅茶</td>
</tr>
</table>
preview
| メロン | すいか |
| コーヒー | 紅茶 |
| 果物 | 飲み物 |
| メロン | すいか |
| コーヒー | 紅茶 |
| メロン | すいか |
| コーヒー | 紅茶 |
| メロン | すいか |
| コーヒー | 紅茶 |
| メロン | すいか |
| コーヒー | 紅茶 |
explain
rules=" " ・・・テーブルの中の罫線のどの部分を表示させるかの設定。
※thead,tfoot,tbody,colgroup,col要素
薄毛・抜け毛の解消｜植毛・自毛植毛のヨコ美クリニック
