【HTML5プロフェッショナル認定試験レベル1】試験勉強まとめ（リスト要素・テーブル要素）

HTML5プロフェッショナル認定試験レベル1の試験勉強まとめ（リスト要素・テーブル要素）です。

リスト要素

リストを作成するために扱う要素。

リスト要素の種類

全部で３種類ある。

• 箇条書きリスト（マーカー付き）
• 番号付きリスト（数字マーカー付き）
• 用語と説明文がついになった説明（定義）リスト

リスト関連要素一覧

要素	用途	補足説明
ul	箇条書きリストまとめ	unordered list
ol	番号付きリストまとめ	ordered list
li	箇条書き/番号付きリストの項目	list
dl	説明リストまとめ	description list
dt	説明リストの用語項目	description term
dd	説明リストの説明項目	description description

• li要素、dt要素、dd要素は次の場合終了タグを省略可能
  • リスト内の最後の要素である場合
  • 直後に自身の要素（liはli、dt/ddはdtまたはdd）が続く場合

箇条書きリスト

利用例）

<ul>
    <li>項目１</li>
    <li>項目２</li>
    <li>項目３</li>
</ul>

出力結果）

• 項目１
• 項目２
• 項目３

番号付きリスト

• ol要素に指定できる属性

属性	用途	補足説明
type	マーカーの種類設定	type="1", type="a", type="A", type="ⅰ"（ローマ数字の小文字の１）, type="Ⅰ"（ローマ数字の大文字の１）
start	連番の開始番号の設定	整数
reversed	リスト番号を逆順にする	論理属性

• 親要素がol要素の場合にのみli要素に指定できる属性

属性	用途	補足説明
value	項目の表示番号の指定	整数

利用例）

<ol type="1" start="3">
    <li>項目１</li>
    <li value="6">項目２</li>
    <li>項目３</li>
</ol>

出力結果）

3. 項目１
6. 項目２
7. 項目３

説明リスト

利用例）

<dl>
    <dt>用語</dt>
    <dd>説明</dd>
</dl>

<!-- 用語の定義で使用する場合 -->
<dl>
    <dt>用語</dt>
    <dd><dfn>定義</dfn></dd>
</dl>

出力結果）

用語

説明

用語

定義

テーブル要素

テーブル（表）を作成するために扱う要素。

テーブル関連要素一覧

要素	用途	補足説明
table	テーブルのまとめ
caption	テーブルのタイトル	0個か1個
colgloup	テーブルの列のグループ	列にまとめてCSSを適用するなど 0個以上
col	テーブルの列
thead	テーブルの行のヘッダーグループ（見出し部分）	0個か1個
tbody	テーブルの行のグループ（本体）
tfoot	テーブルの行のフッターグループ	0個か1個
tr	テーブルの行
th	テーブルの行の見出しセル
tdテーブルのセル

• table要素内に配置する順番は以下*1：
  1. 0個か1個のcaption
  2. 0個以上のcolgloup
  3. 0個か1個のthead
  4. 0個以上のtbodyまたは１個以上のtr
  5. 0個か1個tfoot
• thead要素、tbody要素、tfoot要素、tr要素、th要素、td要素は次の場合終了タグを省略可能
  • 親要素から見て最後の子要素であるとき
  • 直後に以下の要素が続く場合（tfootを除く）
    • thead/tbodyはtbodyかtfoot
    • tfootはtbody ★tfootはtbodyやtrの後ろにしか置けないので注意！
    • trはtr
    • th/tdはthかtd
• tbody要素は次の場合開始タグも省略可能
  • 直前が終了タグの省略されたtbody要素、thead要素、tfoot要素ではないかつ、最初の要素がtrの場合
• colgroup要素は次の場合終了タグを省略可能
  • 直後に空白もじやコメントがない場合

各テーブル要素に指定できる属性

table要素に指定できる属性

属性	用途	補足説明
border	テーブルの枠線のうむ	boder=""（なし）または border="1"（あり）

★borderは枠線の太さの指定ではないので空白文字か1しか入らないので注意！

colgloup要素/col要素に指定できる属性

属性	用途	補足説明
span	グループ化する/まとめて扱うからむ数	整数（1以上）

※colgroupはspan属性を指定している場合は要素内容は空にし、span属性を指定していない場合は0個以上のcol要素（またはtemplate要素）をいれる。

th/td要素に指定できる属性

属性	用途	補足説明
colspan	1つのセルにまとめる列数（列の結合）	整数（1以上）
rowspan	1つのセルにまとめる行数（行の結合）	整数（0以上）
headers	このセルの見出しになっているヘッダーセル	id属性の値を指定（複数可）
scope	見出しとしてカバーする範囲	※thのみ scorp="row"（行）またはscorp="col"（列）または scorp="rowgloup"またはscorp="colgloup"
abbr	代替ラベル（簡略化した見出し）	※thのみ

※abbr属性はHTML5より廃止

サンプルコード

利用例）

<table border="1">
    <caption>
        海が好きか山が好きか考える
    </caption>
    <thead>
        <tr>
            <th >検討項目</th>
            <th>海の良い点</th>
            <th>山の良い点</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>遊び・レジャー</th>
            <td>海水浴、ダイビング、サーフィン、釣り</td>
            <td>キャンプ、川遊び、釣り</td>
        </tr>
        <tr>
            <th>食</th>
            <td>海鮮、</td>
            <td>山菜、きのこ</td>
        </tr>
    </tbody>
</table>

<table border="1">
    <tr>
        <th colspan="2" id="1_1">１列目と２列目の見出し</th>
        <!-- １行２列目は１列目と結合 -->
        <th id="1_3" headers="1_1">３列目の見出し</th>
    </tr>
    <tr>
        <th rowspan="2" id="2_1" headrs="1_1">２行目と３行目の１列目の見出しセル</th>
        <td headrs="1_1 2_1">２行２列目のセル</td>
        <td headrs="1_1 2_1">２行３列目のセル</td>
    </tr>
    <tr>
        <!-- ３行１列目は２行１列目と結合 -->
        <td headrs="1_3 2_1">３行２列目のセル</td>
        <td headrs="1_3 2_1">３行３列目のセル</td>
    </tr>
</table>

出力結果）

海が好きか山が好きか考える

検討項目	海の良い点	山の良い点
遊び・レジャー	海水浴、ダイビング、サーフィン、釣り	キャンプ、川遊び、釣り
食	海鮮、	山菜、きのこ

１列目と２列目の見出し		３列目の見出し
２行目と３行目の１列目の見出しセル	２行２列目のセル	２行３列目のセル
	３行２列目のセル	３行３列目のセル

*1:script要素とtemplate要素を混ぜて入れてもOK