第六十三節，html表格元素

時間  2019-11-12
標籤 第六十 三節 html 表格 元素 欄目 HTML 简体版
原文   原文鏈接

html表格元素html

 

學習要點：學習

    1.表格元素總彙spa

    2.構建表格解析code

    本章主要探討HTML5中表格元素的用法。表格的主要用途是以網格的形式顯示二維數據。htm

 

一．表格元素總彙blog

    表格的基本構成最少須要三個元素：<table>、<tr>、<td>，其餘的一些做爲可選輔 助存在。ip

        元素名稱                                  說明io

          table        表示表格table

          thead       表示標題行class

          tbody       表示表格主體

          tfoot        表示表腳

           tr         　表示一行單元格

           th           表示標題行單元格

           td            表示單元格

           col          表示一列

        colgroup   表示一組列

         caption     表示表格標題

 

二．構建表格解析

1.<table><tr><td>構建基礎表格

<table border="1">
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
</table>

效果：

張三 男 未婚
李四 女 已婚

 

 

解釋：<table>元素表示一個表格的聲明，<tr>元素表示表格的一行，<td>元素表示一個單元格。默認狀況下表格是沒有邊框的，因此，在<table>元素增長一個border屬性，設置爲1便可顯示邊框。

 

2.<th>爲表格添加標題單元格

<table border="1" style="width:300px;">
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>婚姻</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
</table>

效果：

姓名 性別 婚姻
張三 男 未婚
李四 女 已婚

 

 

   

 

解釋：<th>元素主要是添加標題行的單元格，實際做用就是將內部文字居中且加粗，這裏使用了一個通用屬性style，主要用於CSS樣式設置，之後會涉及到。<th><td>均屬於單元格，包含兩個合併屬性：colspan橫向合併、rowspan縱向合併等。

colspan橫向合併單元格，也就是向左合併

<table border="1" style="width:300px;">
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>婚姻</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
    <tr>
        <td colspan="3">共計</td> <!--注意這個colspan橫向合併3，表示合併共站表格數-->
    </tr>
</table>

效果：

姓名 性別 婚姻
張三 男 未婚
李四 女 已婚
共計

 

 

 

 

 

rowspan縱向合併，也就是向下合併

<table border="1" style="width:300px;">
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>婚姻</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td rowspan="2">女</td> <!--注意這個rowspan縱向合併2，表示合併共站表格數-->
        <td rowspan="2">已婚</td>
    </tr>
    <tr>
        <td>共計</td>
    </tr>
</table>

效果：

姓名 性別 婚姻
張三 男 未婚
李四 女 已婚
共計

 

 

 

 

 

 

注意：合併只能操做單元格，<th><td>均屬於單元格

 

3.<thead>添加表頭

<table border="1" style="width:300px;">
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>

    <thead> <!--添加表頭開始，也就是表頭部分用<thead>元素包起來，聲明是表頭，不管表頭代碼在表單什麼位置，它始終顯示在表單頭部-->
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>婚姻</th>
        </tr>
    </thead> <!--添加表頭結束-->
</table>

效果：

姓名 性別 婚姻
張三 男 未婚
李四 女 已婚

 

 

 

 

解釋：<thead>元素就是限制和規範了表格的表頭部分。尤爲是之後動態生成表頭，它的位置是不固定的，使用此元素能夠限定在開頭位置。

 

4.<tfoot>添加表腳

<table border="1" style="width:300px;">
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tfoot> <!--添加表尾開始，也就是表尾部分用<tfoot>元素包起來，聲明是表尾，不管表尾代碼在表單什麼位置，它始終顯示在表單尾部-->
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>已婚</td>
        </tr>
    </tfoot> <!--添加表尾結束-->

    <thead> <!--添加表頭開始，也就是表頭部分用<thead>元素包起來，聲明是表頭，不管表頭代碼在表單什麼位置，它始終顯示在表單頭部-->
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>婚姻</th>
        </tr>
    </thead> <!--添加表頭結束-->
</table>

效果：

姓名 性別 婚姻
張三 男 未婚
李四 女 已婚

 

 

 

 

 

解釋：<tfoot>元素爲表格生成表腳，限制在表格的底部。

 

5.<tbody>添加表主體

<table border="1" style="width:300px;">
    <tbody> <!--添加表主體開始，也就是主體部分用<tfoot>元素包起來，聲明是表主體，不管表主體代碼在表單什麼位置，它始終顯示在表單主體部-->
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>未婚</td>
        </tr>
    </tbody> <!--添加表主體結束-->

    <tfoot> <!--添加表尾開始，也就是表尾部分用<tfoot>元素包起來，聲明是表尾，不管表尾代碼在表單什麼位置，它始終顯示在表單尾部-->
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>已婚</td>
        </tr>
    </tfoot> <!--添加表尾結束-->

    <thead> <!--添加表頭開始，也就是表頭部分用<thead>元素包起來，聲明是表頭，不管表頭代碼在表單什麼位置，它始終顯示在表單頭部-->
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>婚姻</th>
        </tr>
    </thead> <!--添加表頭結束-->
</table>

解釋：<tbody>元素主要是包含住非表頭表腳的主體部分，有助於表格格式的清晰，更加有助於後續CSS  JavaScript的控制。

 

表單頭、主體、尾部正確格式化

<table border="1" style="width:300px;">
    <thead> <!--添加表頭開始，也就是表頭部分用<thead>元素包起來，聲明是表頭，不管表頭代碼在表單什麼位置，它始終顯示在表單頭部-->
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>婚姻</th>
        </tr>
    </thead> <!--添加表頭結束-->

    <tbody> <!--添加表主體開始，也就是主體部分用<tfoot>元素包起來，聲明是表主體，不管表主體代碼在表單什麼位置，它始終顯示在表單主體部-->
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>未婚</td>
        </tr>
    </tbody> <!--添加表主體結束-->

    <tfoot> <!--添加表尾開始，也就是表尾部分用<tfoot>元素包起來，聲明是表尾，不管表尾代碼在表單什麼位置，它始終顯示在表單尾部-->
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>已婚</td>
        </tr>
    </tfoot> <!--添加表尾結束-->
</table>

 

 6.<caption>添加表格標題

<table border="1" style="width:300px;">
    <caption>這是一我的物表</caption> <!--添加表格標題-->

    <thead> <!--添加表頭開始，也就是表頭部分用<thead>元素包起來，聲明是表頭，不管表頭代碼在表單什麼位置，它始終顯示在表單頭部-->
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>婚姻</th>
        </tr>
    </thead> <!--添加表頭結束-->

    <tbody> <!--添加表主體開始，也就是主體部分用<tfoot>元素包起來，聲明是表主體，不管表主體代碼在表單什麼位置，它始終顯示在表單主體部-->
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>未婚</td>
        </tr>
    </tbody> <!--添加表主體結束-->

    <tfoot> <!--添加表尾開始，也就是表尾部分用<tfoot>元素包起來，聲明是表尾，不管表尾代碼在表單什麼位置，它始終顯示在表單尾部-->
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>已婚</td>
        </tr>
    </tfoot> <!--添加表尾結束-->
</table>

效果：

這是一我的物表
姓名 性別 婚姻
張三 男 未婚
李四 女 已婚

 

 

 

 

解釋：<caption>元素給表格添加一個標題。

 

7.<colgroup>設置列

<table border="1" style="width:300px;">
    <caption>這是一我的物表</caption> <!--添加表格標題-->
    <colgroup span="1" style="background:red;"></colgroup> <!--設置列-->
    <colgroup span="1" style="background:#2B2B2B;"></colgroup> <!--設置列-->

    <thead> <!--添加表頭開始，也就是表頭部分用<thead>元素包起來，聲明是表頭，不管表頭代碼在表單什麼位置，它始終顯示在表單頭部-->
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>婚姻</th>
        </tr>
    </thead> <!--添加表頭結束-->

    <tbody> <!--添加表主體開始，也就是主體部分用<tfoot>元素包起來，聲明是表主體，不管表主體代碼在表單什麼位置，它始終顯示在表單主體部-->
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>未婚</td>
        </tr>
    </tbody> <!--添加表主體結束-->

    <tfoot> <!--添加表尾開始，也就是表尾部分用<tfoot>元素包起來，聲明是表尾，不管表尾代碼在表單什麼位置，它始終顯示在表單尾部-->
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>已婚</td>
        </tr>
    </tfoot> <!--添加表尾結束-->
</table>

效果：

  解釋：<colgroup>元素是爲了處理某個列，span屬性定義處理哪些列。1表示第一列，2表示前兩列。若是要單獨設置第二列，那麼須要聲明兩個，先處理第一個，將列點移入第二位，再處理第二個便可。

 

8.<col>更靈活的設置列

<table border="1" style="width:300px;">
    <caption>這是一我的物表</caption> <!--添加表格標題-->
    <colgroup>
        <col> <!--不須要設置的列，能夠用col當作佔位符-->
        <col style="background:red;" span="1">
    </colgroup> <!--設置列-->
    
    <thead> <!--添加表頭開始，也就是表頭部分用<thead>元素包起來，聲明是表頭，不管表頭代碼在表單什麼位置，它始終顯示在表單頭部-->
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>婚姻</th>
        </tr>
    </thead> <!--添加表頭結束-->

    <tbody> <!--添加表主體開始，也就是主體部分用<tfoot>元素包起來，聲明是表主體，不管表主體代碼在表單什麼位置，它始終顯示在表單主體部-->
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>未婚</td>
        </tr>
    </tbody> <!--添加表主體結束-->

    <tfoot> <!--添加表尾開始，也就是表尾部分用<tfoot>元素包起來，聲明是表尾，不管表尾代碼在表單什麼位置，它始終顯示在表單尾部-->
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>已婚</td>
        </tr>
    </tfoot> <!--添加表尾結束-->
</table>

效果：

解釋：<colgroup>的子標籤，<col>元素表示單獨一列，一個表示一列，控制更加靈活。若是設置了span則，控制多列。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程