リストとテーブル-c.d.t.

リスト（箇条書き）

リストを作るための要素を紹介します。

<ul>～</ul>
<ol>～</ol>: リストを定義するブロックレベル要素です。 ul要素が単純なリスト、ol要素が番号付きリストになります。どちらもli要素を中に含ませます。
<li>～</li>: リストの項目を定義します。リストの項目の数だけこの要素が必要になります。


<ol>
	<li>Web作成支援</li>
	<li>CSS講座</li>
</ol>

<dl>～</dl>: 定義済みリストを定義するブロックレベル要素です。 dt要素やdd要素を中に含ませます。
<dt>～</dt>: 定義される項目を定義します。
<dd>～</dd>: dt要素で定義されたものの説明、意味などを示すときに使います。


<dl>
	<dt>ワープロ</dt>
	<dd>Word,一太郎などがある。</dd>
	<dt>Webブラウザ</dt>
	<dd>InternetExplorer、Netscape、Operaなどがある。</dd>
</dl>

テーブル（表）

テーブルを作るための要素を紹介します。

<table summary="表の概要">～</table>: 表を作る場合に使います。下記のtr要素とtd（又はth）要素が必ず必要です。 summary属性は、表の概要を示します。
<tr>～</tr>: 表の行を定義します。例えば4行の表の場合、この要素が4つ必要になります。この要素は、必ずtd（又はth）要素を含みます。
<td>～</td>: 表のセル（マス）を定義します。例えば1行に3項目の表を作る場合、tr要素の中にtd要素を3つ作ります。
<th>～</th>: 表の項目名を示すセルを定義します。使い方はtd要素と同じです。
<caption>～</caption>: 表の名前を示します。


<table summary="表の例">
	<caption>表1:表のサンプル</caption>
	<tr>
		<th>見出し</th>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>ここは見出しじゃない</td>
		<td>3</td>
		<td>4</td>
	</tr>
</table>

セルの連結

td(th)要素に、 colspan="セルの数"、 rowspan="セルの数" という属性を書き加えることによって、セルをくっつけて、複数セル分の幅・高さのセルを含む表を作ることができます。


<table summary="セルを連結した表の例">
	<tr>
		<td>a</td>
		<td>b</td>
		<td colspan="2">横に連結</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">縦・横に連結</td>
		<td>c</td>
		<td rowspan="2">縦に連結</td>
	</tr>
	<tr>
		<td>d</td>
	</tr>
</table>

表示例

a	b	横に連結
縦・横に連結		c	縦に連結
		e

実体参照

XHTMLで使う括弧や二重引用符（ダブルクォーテーション）は、 XHTMLのファイルに書き込むと、WebブラウザなどのUserAgentはタグや属性の値としてが解釈するため、それらを文字として記述するために、実体参照という方法を使います。ここでは代表的なものについて紹介します。実体参照は&___;と書きます。

": ダブルクォーテーション
<: 括弧
>: 閉じ括弧
&: アンドマーク
 : 非改行スペース（半角スペース）

ラウンドナビゲーション

ページ情報

最終更新日2003年7月1日

リストとテーブル