インナーテーブル
どのようにしてテーブルコラムの内部にテーブルを作成するのですか?
どのようにしてテーブルセルの間隔を決めることができるのですか?
説明
テーブル内のテーブル
テーブル内にテーブルが必要になることはよくあります。ここでは横2列、縦3列のテーブルを使います。2番目の横列、2番目の縦列の場所をさらに縦横2列に分割します。さらにテーブルの間隔を定めるために cellpadding と cellspacing というアトリビュート(属性)を使用します。
コード例:
<table border=1 width=80% height=30% align=center cellpadding=1 cellspacing=1>
<tr height=30%>
<td>
1番目の横列
</td>
<td>
1番目の横列
</td>
<td>
1番目の横列
</td>
</tr>
<tr height=70%>
<td>
2番目の横列
</td>
<td >
<table bgcolor=yellow border=1 width=80% height=80%>
<tr >
<td> インナーテーブル </td>
<td> インナーテーブル </td>
</tr>
<tr >
<td> インナーテーブル </td>
<td> インナーテーブル </td>
</tr>
</table>
</td>
<td>
2番目の横列
</td>
</tr>
</table>結果:
1番目の横列 | 1番目の横列 | 1番目の横列 |
2番目の横列 | インナーテーブル | インナーテーブル | インナーテーブル | インナーテーブル | | 2番目の横列 |
Cellpadding と Cellspacing
cellpadding と cellspacing アトリビュート(属性)を使用してパディングとスペースを設定します
使用方法:
<table border=0 bgcolor="#776655" width=80% height=150 align=center
cellpadding=0 cellspacing=0>
上記で作成したテーブルの色や境界、セルスペースやセルパッディングを変更することで、より見栄えがよくなります。
結果:
1番目の横列 | 1番目の横列 | 1番目の横列 |
2番目の横列 | | 2番目の横列 |