|
表（テーブル）セルを水平方向に結合する
|
|
|
中級編 【１４】
データセルを水平方向に結合する
表（テーブル）を作成していくと、例えば成績表などのように
項目毎に、表示するにはセルを結合すると分かり易い。
注意しなければならないのは、機能として便利ですが、複雑な組み合わせのテーブルを作成した場合、結合したセル数に応じて、各セルが影響を受けるので
タグの記述を間違いやすいので確認しながら作成して下さい。
|
|
|
適応
<th>
<td>
属性
|
colspan=""
|
属性
|
水平方向に、結合するセル数。 ピクセル（整数）
|
<th colspan="" >
<td colspan="" >
|
要素
属性
|
適応セル 見出しセル・データセルを水平方向に結合する。
|
|
|
|
|
単純な、セルを水平方向に結合した サンプルタグ
分かり易くするため、マージン・内枠・背景色を付けています。
| 成績表 見出しセルを、5個結合 |
| 氏名 |
国語 |
算数 |
理科 |
社会 |
| 凸凹 太郎 |
点数１ |
点数２ |
点数３ |
点数４ |
| 凸凹 花子 |
点数１ |
点数２ |
点数３ |
点数４ |
|
|
|
セルを水平方向に結合するセルを指定 サンプルHTMLタグ
|
|
<table width="90%" align=center bgcolor="#ddffff" border="1">
<th
colspan="5"
bgcolor="#ffffff">
成績表 見出しセルを、５個結合
</th>
<tr bgcolor="#ffffff" width="100">
<td align=center><b>
氏名
</b></td>
<td align=center><b>
国語
</b></td>
<td align=center><b>
算数
</b></td>
<td align=center><b>
理科
</b></td>
<td align=center><b>
社会
</b></td>
</tr>
<tr>
<td align=center><b>
凸凹 太郎
</b>
</td>
<td align=center>
点数１
</td>
<td align=center>
点数２
</td>
<td align=center>
点数３
</td>
<td align=center>
点数４
</td>
</tr>
<tr>
<td align=center><b>
凸凹 花子
</b></td>
<td align=center>
点数１
</td>
<td align=center>
点数２
</td>
<td align=center>
点数３
</td>
<td align=center>
点数４
</td>
</td></tr> </table>
|
|
|
|
|
見出し・データセルを水平方向に結合するについて
一般的なホームページでは、頻繁に使用するタグでは無いけれど、設定次第で複雑なレイアウトの表組が出来るので商用ページの商品などの展示や紹介など、かなり応用範囲は広いので、ページの目的に応じて学習して下さい。
|
|
|
|
|
|
|
|
|
|