列：每筆資料、列(ROW)

行/欄：每筆資料 的 屬性 ，行(colum)

image.png

<TABLE> 元素

HTML 的 <table> 元素用來創建網頁上的表格，以行列的形式組織數據和資訊。表格元素可以用來展示有結構的數據，例如報表、數據統計、時間表等。

<table> 相關元素與屬性

元素/屬性 說明
<table> 定義整個表格。
<tr> 定義表格中的一行（table row）。
<th> 定義表頭單元格（table header cell），通常用於標題。
<td> 定義表格中的一個單元格（table data cell）。
border 為表格增加邊框（不建議直接使用）。
colspan 指定單元格跨越的列數。
rowspan 指定單元格跨越的行數。
<thead> 定義表格的表頭區域。
<tbody> 定義表格的主體區域。
<tfoot> 定義表格的表尾區域。
<caption> 為表格添加標題或說明。

image.png

HTML呼喚表格的元素

在下面的範例中：

基本用法範例

<table>
    <caption>學生成績表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>數學</th>
            <th>英文</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>90</td>
            <td>85</td>
        </tr>
        <tr>
            <td>小紅</td>
            <td>95</td>
            <td>88</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">總計</td>
        </tr>
    </tfoot>
</table>

注意事項

  1. 語義結構：使用 <thead>、<tbody>、<tfoot> 可以讓表格更具語義性，也有助於提高可訪問性。
  2. 樣式控制：透過 CSS，可以自訂表格的樣式，包括邊框、背景、文字對齊等。
  3. 響應式表格：隨著設備的多樣化，使用 CSS Media Queries 和 Flexbox 等技術，可以讓表格在不同設備上有良好的顯示效果。

HTML 表格元素提供了一種清晰且結構化的方式來展示數據，特別適合用於展示需要對比或計算的資訊。

補充：老師版本的CSS的<table>設定

<head>
    <!-- 定義網頁的編碼為UTF-8 -->
    <meta charset="UTF-8">
 
    <style>
        /* 設置表格邊框合併 */
        table {
            border-collapse: collapse;
        }
 
        /* 設置表格、表頭和單元格的邊框為1像素實線黑色 */
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>

這段 <head> 中的設定包括了對網頁字符集和表格樣式的定義。讓我們逐步來看看這段程式碼：