■ WSJ21[GHP]
- XHTMLタグ講座で覚えよう
■Section 2-7■良いホームページ作成講座■
▼GHP講座2.7 − XHTMLタグを覚える
◎ 基本的なホームページを作るために最低限必要な知識(言語)
◎ ホームページを作るために覚えなくてはいけないんです。
◎ 頑張って覚えて下さいね＜他人事＞初めは見ながらでいいですからっ♪
◎ 簡単な英語ができるなら、かなり楽に覚えられますよ。
.
◇◆◇このページで、解説するタグ一覧◇◆◇
[table] table caption tr th td (colgropup col thead tbody tfoot)
colgropup col thead tbody tfoot は使えないので省かせて頂きます。
※スタイルシートを使用している都合上、文字のサイズなど実際の表示と多少異なります。
★テーブル - <table> - Table
★テーブルのタイトル - <caption> - Caption
★テーブルの行(横一列) - <tr> - Table Row
★テーブルの見出しセル - <th> - Table Header
★テーブルのデータセル - <td> - Table Data
ページ構成には必須というべきタグです。
少し複雑ですが、分かりやすく解説していきます。
caption要素はtable要素の後に一度だけ書くことができます。
table要素の属性には以下のものなどがあります。
・「summary属性」･･･テーブルの概要を示す
・「border属性」･･･テーブルの枠線の太さ
・「cellspacing属性」･･･枠の太さ
・「cellpadding属性」･･･枠と文字との空間
th,td要素の属性には以下のものなどがあります。
・「colspan属性」･･･テーブルの横セルを結合
・「rowspan属性」･･･テーブルの縦セルを結合
<table summary="サンプル１" border="1">
<caption>サンプル１</caption>
<tr><th>１列目</th><th>２列目</th><th>３列目</th></tr>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
</table>
<table summary="サンプル２" border="1"
cellspacing="0" cellpadding="0">
<caption>サンプル２</caption>
<tr><th>１列目</th><th>２列目</th><th>３列目</th></tr>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
</table>
↓ こんな感じです ↓
サンプル１
| １列目 | ２列目 | ３列目 |
|---|
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
サンプル２
| １列目 | ２列目 | ３列目 |
|---|
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
↓下へ続く↓
〜テーブルの続き〜 セルの結合
次にth,td要素の下記の属性を使ってセルを合成してみます。
・「colspan属性」･･･テーブルの横セルを結合
・「rowspan属性」･･･テーブルの縦セルを結合
<table summary="横セル結合" border="1" cellspacing="0" cellpadding="2">
<caption>横セル結合</caption>
<tr><th
colspan="2">名前</th><th>住所</th></tr>
<tr><td>佐藤</td><td>哲也</td><td>大阪府大阪市･･････</td></tr>
<tr><td>山田</td><td>太郎</td><td>東京都千代田区･･････</td></tr>
</table>
<table summary="縦セル結合" border="1" cellspacing="0" cellpadding="2">
<caption>縦セル結合</caption>
<tr><th
rowspan="2">２００３年度<br />収支報告</th><th>収入</th><td>\1,024,560-</td></tr>
<tr><th>支出</th><td>\1,024,560-</td></tr>
</table>
↓ セルの結合はレイアウトには必須ですね ↓
横セル結合
| 名前 | 住所 |
|---|
| 佐藤 | 哲也 | 大阪府大阪市･･････ |
| 山田 | 太郎 | 東京都千代田区･･････ |
縦セル結合
２００３年度
収支報告 | 収入 | \1,024,560- |
|---|
| 支出 | \1,024,560- |
|---|
cellpadding属性で見やすく調整できますが、CSSを使うとより細かく調整できます。
横セル結合の場合には、同tr要素内のth,td要素が１つ少ないことに注目!!
縦セル結合の場合には、次tr要素内のth,td要素が１つ少ないことに注目!!
★複雑になるとややこしくなるところですので色々試してみて下さいね★
〜テーブルの続き〜 段組
tableを用いることで擬似的に段組することができます。
table内にtableを包容すると高度な段組を表現することができます。
<table summary="段組" border="0" cellspacing="20" cellpadding="0">
<tr>
<td valign="top">◆テーブルを使うと段組を表現できます◆
<br />テーブルのtd要素を２つ作れば２段の段組になります。
<br />同様に３つなら３段の段組になります。
<br />また、tr要素を２つ使えば２段の段組を２つ作れます。
</td>
<td valign="top">◆テーブルで段組する場合の注意事項◆
<br />セル内は上下に中央寄せされるので「valign属性」を使います。
<br />「<td valign="top">」の様に指定してやります。
<br />でも、実際のところはCSSでやったほうがいいです。
</td>
</tr>
</table>
↓ 文字配置に非常に効果的です ↓
◆テーブルで段組を表現できます◆
テーブルのtd要素を２つ作れば２段の段組になります。
同様に３つなら３段の段組になります。
また、tr要素を２つ使えば２段の段組を２つ作れます。
|
◆テーブルで段組する場合の注意事項◆
セル内は上下に中央寄せされるので「valign属性」を使います。
「<td valign="top">」の様に指定してやります。
でも、実際のところはCSSでやったほうがいいです。
|
cellspacing属性で見やすく調整できますが、CSSを使うとより細かく調整できます。
〜テーブルの続き〜 その他の属性
tableには色々な属性が用意されています。
「align属性」･･･属性値：left(左寄せ)、center(中央寄せ)、right(右寄せ)
「valign属性」･･･属性値：top(上寄せ)、middle(中央寄せ)、bottom(下寄せ)
※その他、色に関する物はCSSで指定します。
※↓以下はCSS使用例です↓
<div style="text-align:center;">
<table summary="CSS使用例" border="0" cellspacing="10" cellpadding="0" style="border:1px dashed #ccc;background:#eee;margin:auto;">
<tr>
<td style="width:50px;height:50px;background:#f00;"></td>
<td style="width:50px;height:50px;background:#00f;"></td>
<td rowspan="2" style="font-size:20px;color:#888;padding:0px 50px;vertical-align:middle;text-align:center;line-height:160%;letter-spacing:5px;font-family:"Comic Sans MS";">
Cascading<br />Style<br />Sheet</td>
</tr>
<tr>
<td style="width:50px;height:50px;background:#ff0;"></td>
<td style="width:50px;height:50px;background:#0f0;"></td>
</tr>
</table>
</div>
↓ CSSを使うとこんな感じにできます ↓
CSSについては次の講座で解説します。
★･･･予告･･･
◇◆◇前頁の講座で解説したタグ◇◆◇
[list] ol li, ul li, dl dt dd
◇◆◇今頁の講座で解説したタグ◇◆◇
[table] table caption tr th td (colgropup col thead tbody tfoot)
colgropup col thead tbody tfoot は使えないので省かせて頂きます。
◇◆◇次頁の講座で解説するタグ◇◆◇
[ruby] ruby rb rt rp (rbc rtc)
[text] address div span [base] base
◇◆◇表示例◇◆◇
いままでの物を打ち込めばこのようになります。
◎
サンプル７