★文章內容學習來源：拉勾教育大前端就業集訓營

【11】HTML基礎（3）——HTML常用標簽

十二、表格制作相關標簽

（一）表格基礎

創建一個簡單的表格至少有三個標簽組成，分別是<table>、<tr>、<td>標簽，

1.`<table>`

表格，定義的是整個的表格大結構，

2.`<tr>`

table rows，表格的行，定義的是表格由多少行組成，

3.`<td>`

table data，表格資料，也叫表格單元格，定義的是每一行內部的單元格，

4.三者的關系：

table>tr>td (">"表示嵌套的意思）；
一個表格中有多個行，每個行中有多個單元格，

(二）`<table>`標簽常用屬性

`<table>`標簽屬性	含義	屬性值
border	邊框	數字，表示像素值
style	標簽樣式屬性	border-collapse∶collapse表示邊框塌陷，

示例2*3的表格：

<table border="1px">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

瀏覽器顯示：

在這里插入圖片描述
★表格的單元格之間有默認的空隙，會導致雙線邊框，
解決方法∶設定標簽樣式屬性style，
屬性值∶ border-collapse∶collapse;表示邊框塌陷，

示例2*3的表格：

<table border="1px" style="border-collapse: collapse">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

瀏覽器顯示：在這里插入圖片描述

(三）表頭單元格標簽

如果要繪制表頭，使用標簽<th>，

1.語法：

1.<th> table head data，表頭單元格；
2.在表格中繪制的時候，替換的是<td>的位置；
3.<th>標簽中自帶默認的css樣式效果，文字顯示粗體居中；

示例2*3的表格：

<table border="1px" style="border-collapse:collapse">
    <tr>
        <th>表頭</th>
        <th>表頭</th>
        <th>表頭</th>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

瀏覽器顯示：
在這里插入圖片描述

(四）合并單元格

通過單元格標簽進行設定

1.語法：

（1）表格的單元格可以進行合并，通過<th>和<td>的兩個標簽的屬性可以進行合并設定；
（2） rowspan∶跨行合并；上下的合并；
（3）colspan∶ 跨列合并；左右的合并；
（4）屬性值∶ 數字，數字是幾表示跨幾行或跨幾列合并，
示例1：

<table border="1px" style="border-collapse:collapse">
    <tr>
        <th colspan="2"></th>
        <th></th>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

瀏覽器顯示：
在這里插入圖片描述

示例2：某迷宮圖：（后面有制作技巧）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        table {
            width :810px;
            height :810px;
        }
        td {
            text-align:center;
        }
    </style>
</head>
<body>
    <table border="1" style="border-collapse: collapse;">
        <tr>
            <td colspan="12">1</td>
            <td rowspan="12">2</td>
        </tr>
        <tr>
            <td rowspan="12">4</td>
            <td colspan="10">5</td>
            <td rowspan="10">6</td>
        </tr>
        <tr>
            <td rowspan="10">8</td>
            <td colspan="8">9</td>
            <td rowspan="8">10</td>
        </tr>
        <tr>
            <td rowspan="8">12</td>
            <td colspan="6">13</td>
            <td rowspan="6">14</td> 
        </tr>
        <tr>
            <td rowspan="6">16</td>
            <td colspan="4">17</td>
            <td rowspan="4">18</td> 
        </tr>
        <tr>
            <td rowspan="4">20</td>
            <td colspan="2">21</td>
            <td rowspan="2">22</td> 
        </tr>
        <tr>
            <td rowspan="2">24</td>
            <td >25</td> 
        </tr>
        <tr>
            <td colspan="2">23</td> 
        </tr>
        <tr>
            <td colspan="4">19</td> 
        </tr>
        <tr>
            <td colspan="6">15</td> 
        </tr>
        <tr>
            <td colspan="8">11</td> 
        </tr>
        <tr>
            <td colspan="10">7</td> 
        </tr>
        <tr>
            <td colspan="13">3</td> 
        </tr>
    </table>
</body>
</html>

瀏覽器顯示：在這里插入圖片描述
制作技巧
1.先列出所有行<tr>，以最小單元格為標準；
2.再添加每—行的<td>或<th>單元格；
3.劃分單元格所在行時，頂邊對齊的屬于同一行；
4.將所有行和列寫完后，再查看哪個單元格有跨行或跨列，屬性值的個數要參考最小的單元格，

(五）表格磁區

一個完整的表格分為四個大的區域∶
表格標題、表格頭部、表格主體、表格頁腳，

1.磁區標簽

（1）<table>內部最直接的子級包含四個磁區標簽，他們都是雙標簽，
（2）<caption>∶ 表格的標題，內部書寫標題文字;
（3）<thead>∶ table head，表格的頭部，內部嵌套tr>th;
（4）<tbody>∶ table body，表格的主體，內部嵌套tr>td;
（5）< tfoot>∶ table foot，表格的頁腳，內部嵌套tr>td，
★四個磁區可以選擇性的進行組合，
★注意∶ 不論書寫順序如何顛倒，瀏覽器中的加載順序都是自動按照
< caption>→< thead>→ < tbody>→< tfoot>執行的，

練習：瀏覽器顯示如下
在這里插入圖片描述
★制作技巧
1.先書寫大磁區標簽結構；
2.填充每個磁區的內部內容；
3.如果有合并單元格內容，進行單元格合并；

完整代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style></style>
</head>
<body>
  <table border="1" style="border-collapse: collapse;">
    <!-- 先進行磁區 -->
    <caption>各地區固定資產投資情況</caption>
    <thead>
      <tr>
        <th rowspan="2">地區</th>
        <th colspan="2">按總量分</th>
        <th colspan="2">按比重分</th>
      </tr>
      <tr>
        <th>自年初累計(億元)</th>
        <th>比去年同期增長(%)</th>
        <th>自年初累計(%)</th>
        <th>去年同期(%)</th>
      </tr>
    </thead>
    
    <tbody>
      <tr>
        <td>全國</td>
        <td>123456.78</td>
        <td>9.5</td>
        <td>100.0</td>
        <td>100.0</td>
      </tr>
      <tr>
        <td>全國</td>
        <td>123456.78</td>
        <td>9.5</td>
        <td>100.0</td>
        <td>100.0</td>
      </tr>
      <tr>
        <td>全國</td>
        <td>123456.78</td>
        <td>9.5</td>
        <td>100.0</td>
        <td>100.0</td>
      </tr>
      <tr>
        <td>全國</td>
        <td>123456.78</td>
        <td>9.5</td>
        <td>100.0</td>
        <td>100.0</td>
      </tr>
      <tr>
        <td>全國</td>
        <td>123456.78</td>
        <td>9.5</td>
        <td>100.0</td>
        <td>100.0</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

下篇繼續html常用標簽…

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/254956.html

標籤：其他

上一篇：Sqli-labs靶場搭建

下一篇：c#三大特征之一的多型實作

【11】HTML基礎（3）——HTML常用標簽⑦

【11】HTML基礎（3）——HTML常用標簽

十二、表格制作相關標簽

（一）表格基礎

1.<table>

2.<tr>

3.<td>

4.三者的關系：

(二）<table>標簽常用屬性

(三）表頭單元格標簽

1.語法：

(四）合并單元格

1.語法：

(五）表格磁區

1.磁區標簽

1.`<table>`

2.`<tr>`

3.`<td>`

(二）`<table>`標簽常用屬性