表格的基本標籤

運用場景

在網頁中以行列形式的單元格的方式有序的展示資訊和資料

相關標籤名及用法

table標籤

表示表格的整體，裡面可以用於包裹多個tr標籤

tr標籤

表示表格的每一行，裡面用於包裹多個td標籤

td標籤

表示表格每一個單元格，用於表示單元格內每一項具體內容

基本巢狀關係

table>tr>td

程式碼展示

    <table border="15"  >
        <!-- 表格整體標籤 -->
        <tr>
            <!-- 表示每行的tr標籤 -->
            <
 
th>姓名</th>
            <!-- 行列小標題 -->
            <th>年級</th>
            <th>專業</th>
            <th>性別</th>
        </tr>
        <tr>
            <td>張三</td>
        <!-- 表示每個單元格中內容 -->
            <td>19級</td>
            <
 
td>軟體工程</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>20級</td>
            <td>物聯網工程</td>
            <td>女</td>
        </tr>
        <tr>
            <td>王五</
 
td>
            <td>19級</td>
            <td>計算機與資訊科學</td>
            <td>男</td>
        </tr>
    </table>

基本表標籤效果展示

表格相關屬性

運用場景

寫入table標籤中，用於設定表格基本展示效果

常見基本屬性

border標籤

border標籤的屬性值為數字，用於設定表格的邊框長度

width標籤

width標籤的屬性值為數字，用於設定表格寬度

height

height標籤屬性值也為數字，用於設定表格高度

程式碼展示

   <table border="15" width="600" height="300" >
        <!-- 表格整體標籤 -->
        <!-- 設定表格邊框，寬度，高度 -->

效果圖展示

注：實際開發中，多數使用css設定效果樣式

表格標題和表頭單元格標籤

運用場景

用於生成表格整體大標籤和一列小標籤

標籤名及用法

caption

表格大標題標籤，用於表示表格整體大標題，預設表格頂部居中展示，只能書寫在table標籤內部

th

表頭單元格標籤，表示一列的小標籤，通常在表格第一行，居中加粗展示。只能書寫在tr標籤內部代替td標籤

程式碼展示

    <table border="15" width="600" height="300" >
        <!-- 表格整體標籤 -->
        <!-- 設定表格邊框，寬度，高度 -->
        <caption>成員資訊表</caption>
        <tr>
            <!-- 表示每行的tr標籤 -->
            <th>姓名</th>
            <!-- 行列小標題 -->
            <th>年級</th>
            <th>專業</th>
            <th>性別</th>
        </tr>

效果展示

表格的結構標籤

運用場景

突出表格的不同部分（頭部、主體、底部），表達效果更加清晰

標籤名及用法

thead 頭部標籤，用於突出表格頭部

tbody 主體標籤，用於突出表格主體

tfoot 底部標籤，用於突出表格底部

注：表格的結構標籤均需要內部tr標籤包裹，並且結構標籤一般情況下可以省略

程式碼展示

    <table border="5"width="300">
        <caption>成員表</caption>
        <!-- 表頭 -->
        <tr>
            <thead>
                <!-- 表格頭部 -->
                <th>姓名</th>
                <th>年級</th>
                <th>專業</th> 
            </thead>
        </tr>
        <tr>
            <tbody>
                <!-- 表格主題 -->
            <td>張三</td>
            <td>19級</td>
            <td>軟體工程</td>
            </tbody>
        </tr>
        <tr>
            <tbody>
                <!-- 表格主題 -->
                <td>李四</td>
                <td>20級</td>
                <td>網路工程</td>
            </tbody>
        </tr>
        <tr>
            <tfoot>
                <!-- 表格底部 -->
                <td>總結</td>
                <td>分配得體</td>
                <td>分配得體</td>
            </tfoot>
        </tr>
    </table>

執行效果展示

合併單元

運用場景

將相鄰的多個單元格合併為一個單元格

標籤名及用法

rowspan

rowspan標籤屬性值為合併單元格的個數，用於跨行合併，將同列的單元格垂直合併成一個單元格

colspan

colspan標籤屬性值為合併單元格的個數，用於跨列合併，將同行的單元格水平合併成一個單元格

注：要明確保留哪些單元格，合併哪些單元格；若跨行合併，則只保留最上面的單元格值，其餘刪除；跨列合併同理只保留最左邊的；

只有同一結構標籤中的單元格才能進行合併，切記不能跨結果標籤進行合併