ITコース HTML基礎 012_リストとテーブル
リスト
HTML リストは、Web ページで情報を整理し表示するための重要な要素です。異なるタイプのリストを使用することで、コンテンツをより良く構造化し表示できます。
HTML リストには 3 つのタイプがあります：
- 順序なしリスト（Unordered list）：
<ul>要素を使用して作成し、各リスト項目は<li>要素で表します。 - 順序付きリスト（Ordered list）：
<ol>要素を使用して作成し、リスト項目は同様に<li>要素で表しますが、自動的に番号が追加されます。 - 定義リスト（Definition list）：
<dl>要素を使用して作成し、<dt>（定義用語）と<dd>（定義説明）要素を含みます。
順序なしリスト
順序なしリストは最も一般的なリストタイプで、各リスト項目の前に小さな丸点（リストマーカーとも呼ばれる）を追加します。<ul> をリストのコンテナとして使用し、<li> で具体的なリスト項目を記述します。
例：
<ul> <li>項目1</li> <li>項目2</li> <li>項目3</li></ul>効果：
順序付きリスト
順序なしリストと比較して、順序付きリストの各項目は数字でマークされます。順序付きリストは <ol> をコンテナとして使用し、同様に <li> で具体的なリスト項目を記述します。
例：
<ol> <li>最初の項目</li> <li>2番目の項目</li> <li>3番目の項目</li></ol>効果：
定義リスト
定義リストは <dl>（定義リスト）、<dt>（定義用語）、<dd>（定義説明）要素で構成されます。定義リストは通常、用語とその定義のセットを表示するために使用されます。
例：
<dl> <dt>用語1</dt> <dd>説明1</dd> <dt>用語2</dt> <dd>説明2</dd></dl>効果：
[!まとめ]
- リスト項目内には段落、改行、画像、リンク、その他のリストなどを含めることができます。
テーブル
HTML テーブルは構造化されたデータを表示するための強力な要素です。基本的な HTML テーブルは <table> 要素で表され、<tr>（テーブル行）、<th>（テーブルヘッダーセル）、<td>（テーブルデータセル）などの重要な子要素を含みます。
例：
<table> <tr> <th>名前</th> <th>年齢</th> <th>性別</th> </tr> <tr> <td>張三</td> <td>20</td> <td>男</td> </tr> <tr> <td>李四</td> <td>21</td> <td>女</td> </tr></table>効果：
テーブル要素：
<table>: テーブル全体を表します。<thead>: テーブルヘッダー部分を定義し、列のタイトルを表す<th>要素を含みます。<tr>: テーブル行、ヘッダーセル<th>を含みます。<th>: テーブルヘッダーセル、列のタイトルを識別するために使用します。<tbody>: テーブル本体部分を定義し、各行に実際のデータを表す<td>要素を含みます。<td>: テーブルデータセル、実際のデータを含みます。<tfoot>: テーブルフッター部分を定義し、通常はテーブルの要約やその他のフッター情報を配置します。<caption>：HTML テーブルにタイトルを追加するために使用され、通常はテーブルの上部に表示されます。<colgroup>：テーブル列のグループを定義します。<col>：テーブル列のプロパティを定義します。
例：
<table border="1"> <caption>これはテーブルのタイトルです</caption> <colgroup> <col style="width: 50px; background-color: #f2f2f2;"> <col style="width: 100px; background-color: #ddd;"> <col style="width: 150px; background-color: #f2f2f2;"> </colgroup> <thead> <tr> <th>名前</th> <th>年齢</th> <th>都市</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>25</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>30</td> <td>上海</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">総人数: 2</td> </tr> </tfoot></table>効果：
テーブル属性：
border：テーブルの境界線を指定します。値は境界線の幅を表す数値です。cellpadding：セル間の間隔を指定します。値は間隔のサイズを表す数値です。cellspacing：セル境界間の間隔を指定します。値は間隔のサイズを表す数値です。width：テーブルの幅を指定します。値は幅を表す数値です。height：テーブルの高さを指定します。値は高さを表す数値です。style：テーブルのスタイルを指定します。
例：
<table style="border-collapse: collapse; width: 60%; margin: 20px auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);"> <caption style="font-size: 1.5em; font-weight: bold; padding: 10px; background-color: #3498db; color: #fff;">これは美しいテーブルです</caption> <colgroup> <col style="width: 30%;"> <col style="width: 30%;"> <col style="width: 40%;"> </colgroup> <thead> <tr> <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">名前</th> <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">年齢</th> <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">都市</th> </tr> </thead> <tbody> <tr> <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">張三</td> <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">25</td> <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">北京</td> </tr> <tr> <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">李四</td> <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">30</td> <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">上海</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" style="border: 1px solid #ddd; padding: 8px; text-align: center; background-color: #3498db; color: #fff;">総人数: 2</td> </tr> </tfoot></table>効果：
テーブルの結合
テーブルの結合とは、2つ以上のセルを1つのセルに結合することです。テーブルの結合はテーブルレイアウトを簡素化したり、特定のデータを強調表示したりするために使用できます。colspan 属性を使用してセルがまたがる列数を指定するか、rowspan 属性を使用してセルがまたがる行数を指定します。属性値はまたがる行/列数を表す数値です。
例：
<table border="1"> <tr> <td>セル 1</td> <td colspan="2">2列を横方向に結合</td> <td>セル 4</td> </tr> <tr> <td rowspan="2">2行を縦方向に結合</td> <td>セル 3</td> <td>セル 4</td> <td>セル 5</td> </tr> <tr> <td>セル 7</td> <td>セル 8</td> <td>セル 9</td> </tr></table>効果：
[!まとめ]
- テーブルはデフォルトでは境界線を表示しません。
<tr>は table row の略で、テーブルの行を表します。<td>：td は table data の略で、テーブルのデータセルを表します。<th>：th は table header の略で、テーブルのヘッダーセルを表します。- ほとんどのブラウザはテーブルヘッダーを太字で中央揃えのテキストとして表示します。
- テーブル内にはテキスト、画像、リスト、段落、フォーム、水平線、他のテーブルなどを含めることができます。