2014年04月22日

表組 その4

表組 その4

■表の中のセルの結合

表組の中の、横方向・縦方向に並んだ複数のセルをいくつかまとめて、ひとつのセルにすることが出来ます。セルの結合は、見出しセル <th> データセル <td> のどちらでも可能です。

■セルの結合のタグ

●縦方向に並んだセルの結合

rowspan

●横方向に並んだセルの結合

colspan

この二つのタグに続けて、結合するセルの数を記述します。

rowspan=""

colspan=""

この、" と " の間に、結合させたいセルの数を、半角の数字で記述します。
下の例は、縦・横 どちらも3個のセルを結合させる場合の記述です。

縦方向に3個のセルを結合

rowspan="3"

横方向に3個のセルを結合

colspan="3"

※このタグは、MyEditのメニューには無いので、「お気に入りタグ」などを利用して入力して下さい。

■セルのタグの中の記述

この結合のタグは、セルのタグ <th> <td> の中に、次のように記述します。ここでは例として、データセル <td></td> に書き込んだものを紹介します。
※td との間に必ず半角スペースが必要です。

<td rowspan="3">
縦に並んだ3個のセルを、ひとつに結合します。
</td>

■横に並んだセルの結合

<td colspan="3">
横に並んだ3個のセルを、ひとつに結合します。
</td>

以下は、横に3列 縦に3段 並んだ表組の、一番上の段のセルをひとつに結合する例です。

<table border>
<tr>
<td colspan="3">
横に並んだセルが結合されて、ひとつのセルになります。<br>
データセルなので中のデータは(初期値では)左寄せで表示されます。
</td>
</tr>
<tr>
<td>
2段目の左側のセル
</td>
<td>
2段目の真ん中のセル
</td>
<td>
2段目の右側のセル
</td>
</tr>
<tr>
<td>
3段目の左側のセル
</td>
<td>
3段目の真ん中のセル
</td>
<td>
3段目の右側のセル
</td>
</tr>
</table>

■縦に並んだセルの結合

縦に並んだ複数のセルを結合する場合は、その記述に注意する必要があります。
次に挙げるのは、横が3列 縦が3段 の表組で、左側の、縦に3個並んだセルをひとつに結合した例です。

まず最初の行=1段目は、普通に記述し、それに続く行=2段目・3段目は、結合された左側のセルを除いた形で行を記述します。

<table border>

<!-- 1段目は普通に行を記述する -->
<tr>
<td rowspan="3">
縦方向に並んだセルを結合すると、<BR>
中のデータは、自動的に middle =中段に配置されます。
</td>
<td>
1段目 中央のセル
</td>
<td>
1段目 右側のセル
</td>
</tr>

<!-- 2段目は左側のセルを除いて記述する -->
<tr>
<td>
2段目 中央のセル
</td>
<td>
2段目 右側のセル
</td>
</tr>

<!-- 3段目も左側のセルを除いて記述する -->
<tr>
<td>
3段目 中央のセル
</td>
<td>
3段目 右側のセル
</td>
</tr>
</table>

■縦・横 両方のセルを結合する

縦に並んだセル、さらに横に並んだセルの両方を結合させることもできます。
タグは colspan と rowspan のふたつを並べて記述します。
ただし、かなり面倒くさいので、どうしてもこの書き方でないと表組を意図どおりに完成することができない、というような場合に限って使うことをおすすめします。

以下は、横に3列、縦に5段並んだ表組の一部のセルを結合した例です。

<table border>
<tr>
<td colspan="2" rowspan="3">
横に2列、縦に3段並んだセルを結合しました。
</td>
<td>
1段目の右側のセルです
</td>
</tr>
<tr>
<td>
2段目の右側のセルです。
</td>
</tr>
<tr>
<td>
3段目の右側のセルです。
</td>
</tr>
<tr>
<td>
4段目の左側のセルです。
</td>
<td>
4段目の真ん中のセルです。
</td>
<td>
4段目の右側のセルです。
</td>
</tr>
<tr>
<td>
5段目の左側のセルです。
</td>
<td>
5段目の真ん中のセルです。
</td>
<td>
5段目の右側のセルです。
</td>
</tr>
</table>
posted by yanikun at 07:47| Comment(0) | 日記
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: