IT課程 HTML基礎 012_列表和表格
列表
HTML列表是在網頁中組織和呈現信息的重要元素，通過使用不同類型的列表，可以更好地結構化和展示內容。
HTML 列表有三種類型：
- 無序列表（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>第二項</li> <li>第三項</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>效果：
表格合併
表格合併是指將兩個或多個單元格合併為一個單元格。表格合併可以用來簡化表格布局，或突出顯示特定數據。使用 colspan 屬性來指定單元格跨越的行數，或使用 rowspan 屬性來指定單元格跨越的列數。屬性值為一個數字，表示跨越的行數。
示例：
<table border="1"> <tr> <td>單元格 1</td> <td colspan="2">橫向合併兩列</td> <td>單元格 4</td> </tr> <tr> <td rowspan="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 的縮寫，表示表格的表頭單元格。- 大多數瀏覽器會把表頭顯示為粗體居中的文本。
- 表格內可以包含文本、圖片、列表、段落、表單、水平線、表格等等。