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