2009/01/13
Q＆A形式で学ぶHTML,CSS講座 VOL 38
■------------------------------------------------------------------------
ホームページ作成 いまさらHTML,CSS講座【Q＆A形式で学ぶHTML,CSS講座】
■------------------------------------------------------------------------
■ VOL 38
--------------------------------------------------------------------------
ご購読ありがとう御座います。
--------------------------------------------------------------------------
当メールマガジンでは、ホームページ作成において、必要な知識や、HTML、CSSを
Q＆A形式で学ぶ事が出来ます。
■TABLE編
--------------------------------------------------------------------------
■ セルの結合
--------------------------------------------------------------------------
th、td 要素において「colspan属性」を用いることで複数列のセル(横方向)を
結合でき、「rowspan属性」を用いることで複数行のセル(縦方向)を結合することが
できます。
参考URL
http://homepagelecture.web.fc2.com/imasara_html/table_colspan.htm
colspan属性、rowspan属性イメージ画像。
http://www.katch.ne.jp/~j-world/col_row.jpg
--------------------------------------------------------------------------
それでは、以下の問いにチャレンジしてみて下さい。
--------------------------------------------------------------------------
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セルをそれぞれ結合して下さい。
--------------------------------------------------------------------------
以下、答えになります。
A1
<table border="1">
<tr><td colspan="4">年号</td></tr>
<tr>
<td>1972年</td>
<td>1973年</td>
<td>1974年</td>
<td>1975年</td>
</tr>
</table>
A2
<table border="1">
<tr>
<td colspan="2">A</td>
<td colspan="2">B</td>
</tr>
<tr>
<td>1972年</td>
<td>1973年</td>
<td>1974年</td>
<td>1975年</td>
</tr>
</table>
A3
<table border="1">
<tr>
<td rowspan="4">年号</td>
<td>1972年</td>
</tr>
<tr><td>1973年</td></tr>
<tr><td>1974年</td></tr>
<tr><td>1975年</td></tr>
</table>
A4
<table border="1">
<tr>
<td rowspan="2">A</td>
<td>1972年</td>
</tr>
<tr>
<td>1973年</td>
</tr>
<tr>
<td rowspan="2">B</td>
<td>1974年</td>
</tr>
<tr>
<td>1975年</td>
</tr>
</table>
A5
<table border="1">
<tr>
<td colspan="3">AA</td>
</tr>
<tr>
<td>DD</td>
<td colspan="2" rowspan="2">EE</td>
</tr>
<tr>
<td>FF</td>
</tr>
</table>
今回は以上です。次回は セル内のテキスト折り返しの禁止 についてQ＆Aを作成する
予定です。
お疲れ様でした。
最後までお読み頂き、ありがとう御座います。
本講座は、「いまさらHTML,CSS講座」をベースに作成しています。
先に進みたい方は、以下URLをご参照下さい。
いまさらHTML,CSS講座
http://homepagelecture.web.fc2.com/
RSS(最新情報、写真素材のUP状況、メルマガの配信状況などをお知らせしています。)
http://homepagelecture.web.fc2.com/index.xml
ホームページで使えそうな写真素材を配布しています。加工自由のフリー素材
ですので、良かったらお使い下さい。
http://homepagelecture.web.fc2.com/material_index.htm
携帯待ち受けサイズにリサイズした写真の配布も開始しました。
画面対応サイズは「480×864 / 480×640 / 240×400 / 240×320」です。
http://www.katch.ne.jp/~j-world/
写真ブログを始めました。
900×600ピクセルサイズでダウンロードできますのでメールマガジン読者様限定で
著作権フリー素材としてお使い頂けます。
EOS 40D と LUMIX DMC LX3
http://eos40ddmclx3.blogspot.com/
RSS
http://eos40ddmclx3.blogspot.com/feeds/posts/default?alt=rss
ディズニーランドのイルミネーション、なばなの里イルミネーションなどの写真。
Photograph of HCM Pro
http://hcm-pro.blogspot.com/
RSS
http://hcm-pro.blogspot.com/feeds/posts/default?alt=rss
バンダイから発売されている1/200スケールのガンダム完成品プラモデル「HCM Pro」の
レビュー＆写真ブログです。
