表格以行列的形式将資料羅列出來，結構緊湊，資料直覺，當組織資料較多時，就需要用到表格
表格在網頁中有兩個作用：
一是布局網頁内容
二是組織相關的資料
一、表格概述
一個表格包含行，列和單元格三個組成部分
表格内容分為三個區域：表格頁眉，表格主體，表格頁腳
表格頁眉：存放表頭内容
表格主體：存放資料
表格頁腳：存放一些注腳内容，彙總資料等
一些标簽
| 标簽 | 描述 |
|---|---|
| table | 定義表格 |
| caption | 定義表格标題 |
| tr | 定義表格的行 |
| th | 定義表格的表頭 |
| td | 定義表格的單元格 |
| thead | 定義表格頁眉 |
| tbody | 定義表格主體 |
| tfoot | 定義表格頁腳 |
注意：
一個表格隻能有一個thead和tfoot，可以有很多個tbody
下面介紹一下表格的結構
<table>
<caption>表格标題</caption>
<thead>
<tr>
<th>表頭1</th> <th>表頭2</th> <th>表頭3</th> ...
</tr>
</thead>
<tbody>
<tr>
<td>資料1</td> <td>資料2</td> <td>資料3</td> ...
</tr>
...
</tbody>
...<!--如果需要的話，此處可添加多個<tbody></tbody>-->
<tfoot>
<td>資料1</td> <td>資料2</td> <td>資料3</td> ...
<!--此處也可用th标簽-->
</tfoot>
</table>
二、表格标簽
主要講解一下各個标簽的用法
-
table标簽
定義表格對象，同時可以使用标簽屬性設定表格的寬度，高度，邊框寬度，對齊方式，背景顔色，單元格間距和邊距樣式
但由于在HTML5中，以上屬性都不支援，故我們使用下面的CSS格式化表格
-
tr标簽
生成表格中行的标簽，一個tr标簽對對應表格的一行
在HTML5中，所有屬性都不支援，故我們使用下面的CSS格式
-
td和th标簽
标準單元格用td标簽對辨別，内容預設為居中且以普通格式顯示
表頭單元格用th标簽對辨別，内容預設居中加粗表示
注意：
标準單元格可以存放任何資料，包含文本，圖檔，清單，段落，表單，表格等内容
其一些基本屬性隻有colspan 和rowspan還可以使用，其它屬性也不支援
| 屬性及屬性值 | 描述 |
|---|---|
| colspan numbers | 單元格可橫跨的列數 |
| rowspan numbers | 單元格可橫跨的行數 |
-
caption标簽
設定表格的标題
在HTML5中，該标簽所有屬性都不支援，故我們使用下面的CSS格式
-
thead和tbody和tfoot标簽
這些标簽對于這些表格進行分區
thead表頭分組
tbody主體内容分組
tfooot頁腳分組
當長的表格被列印時，表頭和頁腳卑鄙列印在包含表格資料的每一張頁面
-
colspan屬性實作單元格跨列合并
可出現在th和td标簽中，指定所跨的列數，實作合并同一行的若幹個單元格
設定的文法為：
<td colspan="橫跨列數">
<th colspan="橫跨列數">
-
rowspan屬性實作跨行操作
可出現在th和td标簽中，指定所跨的行數，實作合并同一列的若幹個單元格
設定的文法為：
<td colspan="橫跨行數">
<th colspan="橫跨行數">
- 格式化表格
三、CSS表格屬性
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| border-collase | seperate | 預設值，表格邊框和單元格邊框會分開 |
| border-collase | collapse | 表格邊框和單元格邊框會合并成一個單一的邊框 |
| border-spacing | length | 規定相鄰單元格的邊框之間的距離，機關可取px/cm等 |
| caption-side | top | 預設值，表格标題顯示在表格上面 |
| caption-side | bottom | 表格标題顯示在表格下面 |
| table-layout | automatic | 單元格寬度由單元格内容決定 |
| table-layout | fixed | 單元格由表格寬度和單元格寬度決定 |
四、CSS格式化表格
即CSS表格屬性雖然得到了期望的細邊框，但是寬度，高度，單元格間距，表格的背景等都保持了預設的效果，預設效果也不太美觀，故可以進行别的格式化
五、表格各元素display屬性值
display屬性可以設定标簽作為一個盒子的類型，display屬性取不同值，決定盒子具有不同類型
六、表格綜合案例
-
分析給定的效果實作圖，以獲得表格結構
分析表格為幾行幾列，哪些需要合并
-
根據分析得到的表格結構，使用表格标簽搭建頁面結構
開始搭建幾乘幾的表格，利用colspan和rowspan實作合并
-
對搭建好的頁面結構進行樣式設定
先判斷樣式是否滿足，再對細節進行設定，直接在CSS子產品内設定即可
在進行了上述的學習，我們可以做出有特色的表格了，大家可以多動手嘗試一下
這是我做的一個關于天氣預報的
貼上部分代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta author="gaozhujun">
<title>表格-天氣預報</title>
<link rel="stylesheet" type="text/css" href="master9.css">
</head>
<body>
<div class="container">
<div class="miao">
<p>MIAOV.COM</p>
</div>
<div class="one">
<ul>
<li>
<p class="i">BREEZE</p>
<p class="ii">Beijing</p>
</li>
<li>
<p class="two">21℃</p>
</li>
</ul>
</div>
<div class="biaoge">
<table>
<tr>
<th colspan="2" class="header">日期</th>
<th colspan="2" class="header">天氣現象</th>
<th class="header">氣溫</th>
<th class="header">風向</th>
<th class="header">風力</th>
</tr>
<tr>
<td rowspan="2" class="date">
<p>23日星期六</p> <p>7℃~30℃</p>
</td>
<td class="day">白天</td>
<td class="icon-d">
<img src="太陽2.jpg" width="50" height="35">
</td>
<td class="weather">晴</td>
<td class="tem">高溫30℃</td>
<td class="wind">無持續風向</td>
<td class="wind">微風</td>
</tr>
<tr>
<td class="night">夜間</td>
<td class="icon-n">
<img src="多雲2.jpg" width="50" height="35">
</td>
<td>多雲</td>
<td class="temdi">低溫7℃</td>
<td class="wind">無持續風向</td>
<td class="wind">3級風</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
該系列部落格參考了聶常紅 劉偉著的前端HTML+CSS修煉之道
第六篇HTML+CSS學習筆記到此結束 cheers! ?
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)