最近のエントリ
Yahoo! JAPANの検索結果で上位表示させるために有効な、最も簡単な方法。
- やっぱりFC2 ブログは使いやすい

- テキストを装飾するスタイルシート (06/23)
- フォントを装飾するスタイルシート (05/11)
- ページ全体の基本指定 (03/24)
- セレクタ (03/09)
- ホームページ製作者スタイルシートの適用優先順位 (02/17)
- 適用方法 (02/05)
- セル内のテキスト折り返しの禁止 (01/06)
- セルの結合 (11/28)
- セル内の表示位置 (10/27)
- 表の表示位置 (10/21)
- 表の大きさ (10/01)
- セルの余白 (09/29)
- 背景・背景画像 (08/25)
- 罫線 (08/05)
- CAPTION キャプション 表題 (07/03)
- TABLE 基本構造 (05/28)
- フレーム リンク ウィンドウの制御 (04/27)
- インラインフレーム (03/25)
- フレーム ページを分割して表示する。 (03/05)
- イメージ(img)要素で画像をページに指定します。 (02/27)
- リスト List 作成 (02/21)
- ハイパーリンク リンクの指定方法 (02/20)
- 背景色、背景画像を指定する (02/13)
- フォントカラー FONT COLOR を指定する要素 (02/12)
- フォントサイズ FONT SIZE を変更する (02/06)
- フォントを装飾する要素 (01/25)
- 改行と区切り線 (01/23)
- span要素とcenter要素 (01/17)
- ブロックレベル要素 div要素 (01/15)
- 段落 p要素 (01/11)
セルの結合
2008.11.28 (Fri) / HTML CSS 講座
th、td 要素において、colspan属性を用いることで複数列(横方向)を結合でき、rowspan属性を用いることで複数行(縦方向)を結合することができます。
参考URL
http://homepagelecture.web.fc2.com/imasara_html/table_colspan.htm
Q1
<table border="1">
<tr>
<td>年号</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1972年</td>
<td>1973年</td>
<td>1974年</td>
<td>1975年</td>
</tr>
</table>
上記は2行4列のTABLEソースです。
「年号」と記述された「行をすべて」を結合して表示するようにTABLEソースを変更して下さい。
Q2
<table border="1">
<tr>
<td>A</td>
<td>A</td>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>1972年</td>
<td>1973年</td>
<td>1974年</td>
<td>1975年</td>
</tr>
</table>
上記はQ1と同じく2行4列のTABLEソースです。
「A」、「B」と記述された「行それぞれ」を結合して表示するようにTABLEソースを変更して下さい。
Q3
<table border="1">
<tr>
<td>年号</td>
<td>1972年</td>
</tr>
<tr>
<td></td>
<td>1973年</td>
</tr>
<tr>
<td></td>
<td>1974年</td>
</tr>
<tr>
<td></td>
<td>1975年</td>
</tr>
</table>
上記は4行2列のTABLEソースです。
「年号」と記述された「列をすべて」を結合して表示するようにTABLEソースを変更して下さい。
Q4
<table border="1">
<tr>
<td>A</td>
<td>1972年</td>
</tr>
<tr>
<td>A</td>
<td>1973年</td>
</tr>
<tr>
<td>B</td>
<td>1974年</td>
</tr>
<tr>
<td>B</td>
<td>1975年</td>
</tr>
</table>
上記はQ3と同じく4行2列のTABLEソースです。
「A」、「B」と記述された「列それぞれ」を結合して表示するようにTABLEソースを変更して下さい。
Q5
<table border="1">
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>DD</td>
<td>EE</td>
<td>EE</td>
</tr>
<tr>
<td>FF</td>
<td>EE</td>
<td>EE</td>
</tr>
</table>
上記は3行3列のTABLEソースです。
「AA」と記述された3セル、「EE」と記述された4セルをそれぞれ結合して下さい。
【答えはこちらをクリック】
参考URL
http://homepagelecture.web.fc2.com/imasara_html/table_colspan.htm
Q1
<table border="1">
<tr>
<td>年号</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1972年</td>
<td>1973年</td>
<td>1974年</td>
<td>1975年</td>
</tr>
</table>
上記は2行4列のTABLEソースです。
「年号」と記述された「行をすべて」を結合して表示するようにTABLEソースを変更して下さい。
Q2
<table border="1">
<tr>
<td>A</td>
<td>A</td>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>1972年</td>
<td>1973年</td>
<td>1974年</td>
<td>1975年</td>
</tr>
</table>
上記はQ1と同じく2行4列のTABLEソースです。
「A」、「B」と記述された「行それぞれ」を結合して表示するようにTABLEソースを変更して下さい。
Q3
<table border="1">
<tr>
<td>年号</td>
<td>1972年</td>
</tr>
<tr>
<td></td>
<td>1973年</td>
</tr>
<tr>
<td></td>
<td>1974年</td>
</tr>
<tr>
<td></td>
<td>1975年</td>
</tr>
</table>
上記は4行2列のTABLEソースです。
「年号」と記述された「列をすべて」を結合して表示するようにTABLEソースを変更して下さい。
Q4
<table border="1">
<tr>
<td>A</td>
<td>1972年</td>
</tr>
<tr>
<td>A</td>
<td>1973年</td>
</tr>
<tr>
<td>B</td>
<td>1974年</td>
</tr>
<tr>
<td>B</td>
<td>1975年</td>
</tr>
</table>
上記はQ3と同じく4行2列のTABLEソースです。
「A」、「B」と記述された「列それぞれ」を結合して表示するようにTABLEソースを変更して下さい。
Q5
<table border="1">
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>DD</td>
<td>EE</td>
<td>EE</td>
</tr>
<tr>
<td>FF</td>
<td>EE</td>
<td>EE</td>
</tr>
</table>
上記は3行3列のTABLEソースです。
「AA」と記述された3セル、「EE」と記述された4セルをそれぞれ結合して下さい。
copyright © ホームページ作成講座 HTML CSS all rights reserved.
| BLOGTOP |