●HTMLのサンプル例→ > №00 > №01 > №02 > №03 > №04 > №05 > №06 > №07 > №00 > END

№４．リスト、テーブル

№４．リスト、テーブル

01<ul>要素は、箇条書きのリストを作成する要素です。

<ul>要素は、箇条書きのリストを作成する要素です。 リストで表示したい内容を<ul>～</ul>で囲みます。囲まれた項目にはマーク（デフォルトは黒丸）が付けられます。 項目は<li>要素を使用します。<ul>要素には、マークの種類を設定することができますが、 これらの属性はHTML4.01では非推奨とされていますので、CSS内で定義（list-style-type）することをおすすめします。

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic○

汎用属性：id、class、lang、title、style、dir、xml:lang

ブロックレベル要素

※HTML 

<ul>～</ul>


サンプルコード
HTML
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
※★sample
★①011サンプル

▲Ｔｏｐ

02<ol>要素は、番号付きのリストを作成する要素です。

<ol>要素は、番号付きのリストを作成する要素です。 リストで表示したい内容を<ol>～</ol>で囲みます。囲まれた項目にはマーク（デフォルトは数字）が付けられます。 項目は<li>要素を使用します。<ol>要素には、マークの種類を設定することができますが、 これらの属性はHTML4.01では非推奨とされていますので、CSS内で定義（list-style-type）することをおすすめします。

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic○

汎用属性：id、class、lang、title、style、dir、xml:lang

ブロックレベル要素

※HTML 

<ol>～</ol>


サンプルコード
HTML
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>
※★sample
★①021サンプル

▲Ｔｏｐ

03<li>要素は、<ul>要素や<ol>要素でリストを作成する際に、項目を示す要素です。

<li>要素は、<ul>要素や<ol>要素でリストを作成する際に、項目を示す要素です。

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic○

汎用属性：id、class、lang、title、style、dir、xml:lang

※HTML 

<li>～</li>


サンプルコード
HTML
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
※★sample
★①031サンプル

▲Ｔｏｐ

04<dl>要素は、定義型のリストを作成する要素です。

<dl>要素は、定義型のリストを作成する要素です。 定義する用語は<dt>要素を使用し、その用語に対する説明は<dd>要素を使用します。

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic○

汎用属性：id、class、lang、title、style、dir、xml:lang

ブロックレベル要素

※HTML 

<dl>～</dl>


サンプルコード
HTML
<dl>
<dt>定義1</dt>
<dd>説明1-1</dd>
<dd>説明1-2</dd>
<dt>定義2-1</dt>
<dt>定義2-2</dt>
<dd>説明2</dd>
</dl>
※★sample
★①041サンプル

▲Ｔｏｐ

05<dt>要素は、定義する言葉を示す要素です。

<dt>要素は、定義する言葉を示す要素です。 定義型のリストを定義するためには、<dl>要素を使用し、用語に対する説明は、<dd>要素を使用します。

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic○

汎用属性：id、class、lang、title、style、dir、xml:lang

※HTML 

<dt>～</dt>


サンプルコード
HTML
<dl>
<dt>定義1</dt>
<dd>説明1-1</dd>
<dd>説明1-2</dd>
<dt>定義2-1</dt>
<dt>定義2-2</dt>
<dd>説明2</dd>
</dl>
※★sample
★①051サンプル

▲Ｔｏｐ

06<dd>要素は、定義された用語の説明を示す要素です。

<dd>要素は、定義された用語の説明を示す要素です。 定義型のリストを定義するためには、<dl>要素を使用し、定義する用語は<dt>要素を使用します。

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic○

汎用属性：id、class、lang、title、style、dir、xml:lang

※HTML 

<dd>～</dd>


サンプルコード
HTML
<dl>
<dt>定義1</dt>
<dd>説明1-1</dd>
<dd>説明1-2</dd>
<dt>定義2-1</dt>
<dt>定義2-2</dt>
<dd>説明2</dd>
</dl>
※★sample
★①061サンプル

▲Ｔｏｐ

07<table>要素は、テーブル（表）を表示する要素です。

<table>要素は、テーブル（表）を表示する要素です。 <table>～</table>で表全体を設定し、<th>要素で見出しを設定、 <tr>要素で行を設定し、<td>要素でセルの内容を記述して作成します。

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic○

汎用属性：id、class、lang、title、style、dir、xml:lang

ブロックレベル要素


<table>～</table>
属性
属性名 値 解説
border ピクセル 外枠の太さを指定（非推奨）
cssでの設定borderをおすすめします
<table border="1">
cellspacing ピクセル 表の外枠とセルの間隔、各セルとセルを指定（非推奨）
cssでの設定border-spacingをおすすめします
<table cellspacing="7">
cellpadding ピクセル セル枠とデータの間隔を指定（非推奨）
cssでの設定paddingをおすすめします
<table cellpadding="5">
width ピクセル テーブル全体の幅を指定（非推奨）
cssでの設定width_heightをおすすめします
<table width="200">
summary 文字列 表の説明を記述
<table summary="テーブルの説明">
frame void 表の外枠を表示しない
above 表の上の外枠だけを表示
below 表の下の外枠だけを表示
rhs 表の右の外枠だけを表示
lhs 表の左の外枠だけを表示
hsides 表の上下の外枠だけを表示
vsides 表の左右の外枠だけを表示
box 表の上下左右の外枠を表示
border 表の上下左右の外枠を表示
<table frame="border">
rules none 表の境界線を表示しない
groups 表の<thead>、<tbody>、<tfoot>、<colgroup>、<col>で指定したグループのみの境界線を表示
rows 表の横の境界線を表示
cols 表の縦の境界線を表示
all 表のすべての境界線を表示
<table rules="rows">
※HTML 

サンプルコード


<table border="1">
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
</table>


<div class=c_smpl2>①サンプル画面表示イメージ（border="1"）</div>
<table style="width: 50%; height: 100px" class=mr5 border=1>
  <tbody>
  <tr>
    <th>見出し</th>
    <th>見出し</th></tr>
  <tr>
    <td>データ</td>
    <td>データ</td></tr></tbody></table>

<div class=c_smpl2>②サンプル画面表示イメージ（cellspacing="7"）</div>
<table style="width: 50%; height: 100px" class=mr5 border=1 cellspacing=7>
  <tbody>
  <tr>
    <th>見出し</th>
    <th>見出し</th></tr>
  <tr>
    <td>データ</td>
    <td>データ</td></tr></tbody></table>

<div class=c_smpl2>③サンプル画面表示イメージ（cellpadding="5"）</div>
<table style="width: 50%; height: 100px" class=mr5 border=1 cellpadding=5>
  <tbody>
  <tr>
    <th style="padding-bottom: 5px; padding-left: 5px; padding-right: 5px;
 padding-top: 5px">見出し</th>
    <th style="padding-bottom: 5px; padding-left: 5px; padding-right: 5px;
 padding-top: 5px">見出し</th></tr>
  <tr>
    <td style="padding-bottom: 5px; padding-left: 5px; padding-right: 5px;
 padding-top: 5px">データ</td>
    <td style="padding-bottom: 5px; padding-left: 5px; padding-right: 5px;
 padding-top: 5px">データ</td></tr></tbody></table>

<div class=c_smpl2>④サンプル画面表示イメージ（width="200"）</div>
<table style="height: 100px" class=mr5 border=1 width=200>
  <tbody>
  <tr>
    <th>見出し</th>
    <th>見出し</th></tr>
  <tr>
    <td>データ</td>
    <td>データ</td></tr></tbody></table>

<div class=c_smpl2>⑤サンプル画面表示イメージ（frame="border"）</div>
<table style="width: 50%; height: 100px" class=mr5 frame=border>
  <tbody>
  <tr>
    <th>見出し</th>
    <th>見出し</th></tr>
  <tr>
    <td>データ</td>
    <td>データ</td></tr></tbody></table>

<div class=c_smpl2>⑥サンプル画面表示イメージ（rules="rows"）</div>
<table style="width: 50%; height: 100px" class=mr5 rules=rows>
  <tbody>
  <tr>
    <th>見出し</th>
    <th>見出し</th></tr>
  <tr>
    <td>データ</td>
    <td>データ</td></tr></tbody></table>
※★sample
★00070サンプル > ★①071サンプル > ★②072サンプル > ★③073サンプル > ★④074サンプル > ★⑤075サンプル > ★⑥076サンプル >

▲Ｔｏｐ

08<tr>要素は、テーブル（表）の行を表示する要素です。

<tr>要素は、テーブル（表）の行を表示する要素です。 <table>～</table>で表全体を設定し、<th>要素で見出しを設定、 <tr>要素で行を設定し、<td>要素でセルの内容を記述して作成します。

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic○

汎用属性：id、class、lang、title、style、dir、xml:lang


<tr>～</tr>
属性
属性名 値 解説
align left 行のセルの内容を左揃えで表示（デフォルト）
center 行のセルの内容を中央揃えで表示
right 行のセルの内容を右揃えで表示
<tr align="center">
valign top 行のセルの内容を上揃えで表示
middle 行のセルの内容を中央揃えで表示（デフォルト）
bottom 行のセルの内容を下揃えで表示
baseline 行のセルの内容をベースライン揃えで表示
<tr valign="bottom">
※HTML 

サンプルコード


HTML
<table border="1" width="50%" height="100">
<tr>
<td>デフォルト</td>
<td>デフォルト</td>
</tr>
<tr align="center" valign="bottom">
<td>センターボトム</td>
<td>センターボトム</td>
</tr>
</table>
※★sample
★①081サンプル

▲Ｔｏｐ

09<th>要素は、テーブル（表）の行や列の見出しを表示する要素です。

<th>要素は、テーブル（表）の行や列の見出しを表示する要素です。 <td>要素の代わりに<th>要素を使用するとそのセルが見出しとなります。文字列は太字になりセンターに表示されます。

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic○

汎用属性：id、class、lang、title、style、dir、xml:lang


<th>～</th>
属性
属性名 値 解説
colspan セル数 横方向のセルの連結数を指定
<th colspan="3">
rowspan セル数 縦方向のセルの連結数を指定
<th rowlspan="2">
align left 見出しを左揃えで表示
center 見出しを中央揃えで表示（デフォルト）
right 見出しを右揃えで表示
<th align="center">
valign top 見出しを上揃えで表示
middle 見出しを中央揃えで表示（デフォルト）
bottom 見出しを下揃えで表示
baseline 見出しをベースライン揃えで表示
<th valign="bottom">
abbr 文字列 見出しセルの省略系を指定
<th abbr="会社名">
scope row 縦方向見出しセルの対象となる範囲を指定
col 横方向見出しセルの対象となる範囲を指定
<th scope="row">
width
height		 ピクセル 見出しの幅、高さを指定（非推奨）
cssでの設定width_heightをおすすめします
<th width="200" height="80">
bgcolor 16進数またはカラーネーム 背景色を指定（非推奨）
cssでの設定background_colorをおすすめします
<th bgcolor="ffffff">
※HTML 

サンプルコード
HTML
<table>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>>
</table>
※★sample
★①091サンプル

▲Ｔｏｐ

10<td>要素は、テーブル（表）のセル内容を記述します。

<td>要素は、テーブル（表）のセル内容を記述します。 <table>～</table>で表全体を設定し、<th>要素で見出しを設定、<tr>要素で行を設定し、 <td>要素でセルの内容を記述して作成します。

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic○

汎用属性：id、class、lang、title、style、dir、xml:lang


<td>～</td>
属性
属性名 値 解説
colspan セル数 横方向のセルの連結数を指定
<td colspan="3">
rowspan セル数 縦方向のセルの連結数を指定
<td rowlspan="2">
align left セルを左揃えで表示（デフォルト）
center セルを中央揃えで表示
right セルを右揃えで表示
<td align="center">
valign top セルを上揃えで表示
middle セルを中央揃えで表示（デフォルト）
bottom セルを下揃えで表示
baseline セルをベースライン揃えで表示
<td valign="bottom">
width
height		 ピクセル セルの幅、高さを指定（非推奨）
cssでの設定width_heightをおすすめします
<td width="200" height="80">
bgcolor 16進数またはカラーネーム 背景色を指定（非推奨）
cssでの設定background_colorをおすすめします
<td bgcolor="ffffff">
※HTML 

①サンプルコード
HTML
<table>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
</table>

②サンプルコード（colspan）
HTML
<table border="1">
<tr>
<td colspan="3">セルの結合</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</table>

③サンプルコード（rowspan）
HTML
<table border="1">
<tr>
<td rowspan="3">セルの結合</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
</tr>
</table>
※★sample
★①101サンプル > ★②102サンプル > ★③103サンプル >

▲Ｔｏｐ

11<caption>要素は、テーブル（表）のタイトルを表示する要素です。

<caption>要素は、テーブル（表）のタイトルを表示する要素です。 <caption>要素は、<table>要素の直後に記述する必要があります。

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic○

汎用属性：id、class、lang、title、style、dir、xml:lang

※HTML 

<caption>～</caption>
 


サンプルコード
HTML
<table border="1">
<caption>タイトル</caption>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
</table>
※★sample
★①111サンプル

▲Ｔｏｐ

12<thead>要素は、テーブル（表）の行のヘッダ部分をグループ化する要素です。

<thead>要素は、テーブル（表）の行のヘッダ部分をグループ化する要素です。 グループ化することにより、まとめて設定の変更等を行うことができます。 <thead>要素、<tfoot>要素、<tbody>要素の順で設定します。また、<thead>要素は、表内に1つだけ配置できます。

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic-

汎用属性：id、class、lang、title、style、dir、xml:lang


<thead>～</thead>
属性
属性名 値 解説
align left グループ内のセルの内容を左揃えで表示
center グループ内のセルの内容を中央揃えで表示
right グループ内のセルの内容を右揃えで表示
<thead align="center">
valign top グループ内のセルの内容を上揃えで表示
middle グループ内のセルの内容を中央揃えで表示
bottom グループ内のセルの内容を下揃えで表示
baseline グループ内のセルの内容をベースライン揃えで表示
<thead valign="bottom">
※HTML 

サンプルコード
HTML
<table>
<thead>
<tr>
<th>ヘッダ</th>
</tr>
</thead>
<tfoot>
<tr>
<td>フッタ</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>本体</td>
</tr>
</tbody>
</table>
※★sample
★①121サンプル

▲Ｔｏｐ

13<tfoot>要素は、テーブル（表）の行のフッタ部分をグループ化する要素です。

<tfoot>要素は、テーブル（表）の行のフッタ部分をグループ化する要素です。 グループ化することにより、まとめて設定の変更等を行うことができます。 <thead>要素、<tfoot>要素、<tbody>要素の順で設定します。また、<tfoot>要素は、表内に1つだけ配置できます。

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic-

汎用属性：id、class、lang、title、style、dir、xml:lang


<tfoot>～</tfoot>
属性
属性名 値 解説
align left グループ内のセルの内容を左揃えで表示
center グループ内のセルの内容を中央揃えで表示
right グループ内のセルの内容を右揃えで表示
<tfoot align="center">
valign top グループ内のセルの内容を上揃えで表示
middle グループ内のセルの内容を中央揃えで表示
bottom グループ内のセルの内容を下揃えで表示
baseline グループ内のセルの内容をベースライン揃えで表示
<tfoot valign="bottom">
※HTML 

サンプルコード
HTML
<table>
<thead>
<tr>
<th>ヘッダ</th>
</tr>
</thead>
<tfoot>
<tr>
<td>フッタ</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>本体</td>
</tr>
</tbody>
</table>
※★sample
★①131サンプル

▲Ｔｏｐ

14<tbody>要素は、テーブル（表）の行のボディ部分をグループ化する要素です。

<tbody>要素は、テーブル（表）の行のボディ部分をグループ化する要素です。 グループ化することにより、まとめて設定の変更等を行うことができます。 <thead>要素、<tfoot>要素、<tbody>要素の順で設定します。 また、<tbody>要素は、表内に必要なだけ配置できます。

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic-

汎用属性：id、class、lang、title、style、dir、xml:lang


<tbody>～</tbody>
属性
属性名 値 解説
align left グループ内のセルの内容を左揃えで表示
center グループ内のセルの内容を中央揃えで表示
right グループ内のセルの内容を右揃えで表示
<tbody align="center">
valign top グループ内のセルの内容を上揃えで表示
middle グループ内のセルの内容を中央揃えで表示
bottom グループ内のセルの内容を下揃えで表示
baseline グループ内のセルの内容をベースライン揃えで表示
<tbody valign="bottom">
※HTML 

サンプルコード
HTML
<table>
<thead>
<tr>
<th>ヘッダ</th>
</tr>
</thead>
<tfoot>
<tr>
<td>フッタ</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>本体</td>
</tr>
</tbody>
</table>
※★sample
★①141サンプル

▲Ｔｏｐ

15<colgroup>要素は、テーブル（表）の列をグループ化する要素です。

<colgroup>要素は、テーブル（表）の列をグループ化する要素です。 グループ化することにより、まとめて設定の変更等を行うことができます。 <colgroup>要素は、<caption>要素の直後に記述する必要があります。 （<caption>要素がない場合は、<table>要素の直後に記述します。）

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic-

汎用属性：id、class、lang、title、style、dir、xml:lang


<colgroup>～</colgroup>
属性
属性名 値 解説
span 列数 グループ化する列数を指定
<colgroup span="3">
align left グループ内のセルの内容を左揃えで表示
center グループ内のセルの内容を中央揃えで表示
right グループ内のセルの内容を右揃えで表示
<colgroup align="center">
valign top グループ内のセルの内容を上揃えで表示
middle グループ内のセルの内容を中央揃えで表示
bottom グループ内のセルの内容を下揃えで表示
baseline グループ内のセルの内容をベースライン揃えで表示
<colgroup valign="bottom">
width ピクセル 列の幅を指定（非推奨）
cssでの設定width_heightをおすすめします
<colgroup width="200">
bgcolor 16進数またはカラーネーム 背景色を指定（非推奨）
cssでの設定background_colorをおすすめします
<colgroup bgcolor="ffffff">
※HTML 

サンプルコード
HTML
<table border="1">
<caption>タイトル</caption>
<colgroup valign="top"></colgroup>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
</table>
※★sample
★①151サンプル

▲Ｔｏｐ

16<col>要素は、テーブル（表）の列をまとめて設定できる要素です。

<col>要素は、テーブル（表）の列をまとめて設定できる要素です。 <col>要素は、<colgroup>要素と異なり、グループ化はされません。 また、<caption>要素の直後に記述する必要があります。 （<caption>要素がない場合は、<table>要素の直後に記述します。）

strict dtd○ tranasitional dtd○ frameset dtd○ xhtml 1.1○ xhtml basic-

汎用属性：id、class、lang、title、style、dir、xml:lang


<col>～</col>
属性
属性名 値 解説
span 列数 変更する列数を指定
<col span="3">
align left 列内のセルの内容を左揃えで表示
center 列内のセルの内容を中央揃えで表示
right 列内のセルの内容を右揃えで表示
<col align="center">
valign top 列内のセルの内容を上揃えで表示
middle 列内のセルの内容を中央揃えで表示
bottom 列内のセルの内容を下揃えで表示
baseline 列内のセルの内容をベースライン揃えで表示
<col valign="bottom">
width ピクセル 列の幅を指定
<col width="200">
※HTML 

サンプルコード
HTML
<table border="1">
<caption>タイトル</caption>
<col valign="top"></col>
<col width="300"></col>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
</table>
※★sample
★①161サンプル

▲Ｔｏｐ

17xxxxx

17xxxxx

※HTML 

★CSS
※★sample
★①000サンプル

▲Ｔｏｐ