HTMLお勉強コーナー

セルの分割

<table border="1">
<tr>
<td>テーブル1</td>
<td>テーブル2</td>
</tr>
</table>

テーブル1 テーブル2

テーブル1のセルに行を増やします
増やすというよりはテーブル1 と 追加Aを合わせた高さにする といってもいいでしょう
rowspan="n"

<table border="1">
<tr>
<td>テーブル1</td>
<td rowspan="2">テーブル2</td>
</tr>
<tr>
<td>追加A</td>
</tr>
</table>

テーブル1 テーブル2
追加A

テーブル1のテーブルに追加A・追加AAとを追加します
増やすというよりはテーブル1 と 追加Aを合わせた高さにする といってもいいでしょう

<table border="1">
<tr>
<td>テーブル1</td>
<td rowspan="3">テーブル2</td>
</tr>
<tr>
<td>追加A</td>
</tr>
<tr>
<td>追加AA</td>
</tr>
</table>

テーブル1 テーブル2
追加A
追加AA

 


<table border="1">
<tr>
<td>テーブル3</td>
</tr>
<tr>
<td>テーブル4</td>
</tr>
</table>

テーブル3
テーブル4

テーブル4のセルに列を増やします
増やすというよりはテーブル3は、テーブル4・追加Bを合わせた幅にする といってもいいでしょう
colspan="n"

<table border="1">
<tr>
<td colspan="2">テーブル3</td>
</tr>
<tr>
<td>テーブル4</td>
<td>追加B</td>
</tr>
</table>

テーブル3
テーブル4 追加B

テーブル4に追加B・追加BBを追加します
増やすというよりはテーブル3は、テーブル4、追加B、追加BBを合わせた幅にする といってもいいでしょう


<table border="1">
<tr>
<td colspan="3">テーブル3</td>
</tr>
<tr>
<td>テーブル4</td>
<td>追加B</td>
<td>追加BB</td>
</tr>
</table>

テーブル3
テーブル4 追加B 追加BB

応用

<table border="1">
<tr>
<td>テーブル1</td>
<td>テーブル2</td>
</tr>
<tr>
<td>テーブル3</td>
<td>テーブル4</td>
</tr>
</table>
テーブル1 テーブル2
テーブル3 テーブル4

colspan="n"rowspan="n"<TR><TD></TD></TR>の組み合わせで、
"n"の値を変更することによって セルの数を自由に増減できます

<table border="1">
<tr>
<td colspan="2">テーブル1</td>
<td>テーブル2</td>
</tr>
<tr>
<td rowspan="2">テーブル3</td>
<td rowspan="2">追加A</td>
<td>テーブル4</td>
</tr>
<tr>
<td><p>追加B</p>
</td>
</tr>
</table>

テーブル1 テーブル2
テーブル3 追加A テーブル4

追加B