サイト内検索
...HTML・XHTMLタグ...
ｔａｂｌｅ・セル
横方向のセルの結合
- 横方向にセルを結合するときは、td要素・th要素にcolspan属性を指定します。
- 結合するセルの数を書きます
- [使い方]
- <th colspan="2">〜</th>
- <td colspan="4">〜</td>
| 属性 | 属性値 | 説明 |
|---|---|---|
| colspan= | "" | 結合するセルの数を指定します。
セルを横方向（右方向）に結合します。 初期値は「1」です |
サンプル
［ｂｏｄｙの中］
<table border="1"><tr>
<td colspan="3">セル</td>
</tr>
<tr>
<td>Ｎｏ１</td>
<td>Ｎｏ２</td>
<td>Ｎｏ３</td>
</tr>
</table>
［ブラウザ上］
| セル | ||
| Ｎｏ１ | Ｎｏ２ | Ｎｏ３ |
縦方向のセルの結合
- 縦方向にセルを結合するときは、td要素・th要素にrowspan属性を指定します。
- 結合するセルの数を書きます。
- [使い方]
- <td rowspan="2">〜</td>
- <td rowspan="4">〜</td>
| rowspan= | "2" | 結合するセルの数を指定します。
セルを縦方向（下方向）に結合します。 初期値は「1」です |
|---|
サンプル
［ｂｏｄｙの中］
<table border="1"><tr>
<td rowspan="3">セル</td>
<td>Ｎｏ１</td>
</tr>
<tr>
<td>Ｎｏ２</td>
</tr>
<tr>
<td>Ｎｏ３</td>
</tr>
</table>
［ブラウザ上］
| セル | Ｎｏ１ |
| Ｎｏ２ | |
| Ｎｏ３ |
colspan・ rowspanを指定
［ｂｏｄｙの中］
<table border="1"><tr>
<th colspan="3" rowspan="2">６枚のセルを結合します。</th>
<td>Ｎｏ１</td>
</tr>
<tr>
<td>Ｎｏ２</td>
</tr>
<tr>
<td>Ｎｏ３</td>
<td>Ｎｏ４</td>
<td>Ｎｏ５</td>
<td>Ｎｏ６</td>
</tr>
</table>
［ブラウザ上］
| 6枚のセルを結合 | Ｎｏ１ | ||
|---|---|---|---|
| Ｎｏ２ | |||
| Ｎｏ３ | Ｎｏ４ | Ｎｏ５ | Ｎｏ６ |
