表格
在Web的歷史中，HTML的表格發揮了極大的作用。最初創建表格就是爲了以表格的形式顯示數據，後來表格 變成了一個極受歡迎的佈局工具。
但是有了CSS以後，CSS在佈局網頁方面實際上會更出色，所以現在我們使用表格的作用只有一個，就是用來 表示格式化的數據。
HTML中的表格可以很複雜，但是通常情況下我們不需 要創建過於複雜的表格。table、tr、th、td
使用table標籤創建一個表格。
• tr表示表格中的一行。
• tr中可以編寫一個或多個th或td。
• th表示表頭。
但是有了CSS以後，CSS在佈局網頁方面實際上會更出色，所以現在我們使用表格的作用只有一個，就是用來 表示格式化的數據。
HTML中的表格可以很複雜，但是通常情況下我們不需 要創建過於複雜的表格。table、tr、th、td
使用table標籤創建一個表格。
• tr表示表格中的一行。
• tr中可以編寫一個或多個th或td。
• th表示表頭。
簡單的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
表格在日常生活中使用的非常的多，比如excel就是專門用來創建表格的工具，
表格就是用來表示一些格式化的數據的，比如：課程表、銀行對賬單
在網頁中也可以來創建出不同的表格。
-->
<!--
在HTML中，使用table標籤來創建一個表格
-->
<table border="1" width="40%" align="center">
<!--
在table標籤中使用tr來表示表格中的一行，有幾行就有幾個tr
-->
<tr>
<!-- 在tr中需要使用td來創建一個單元格，有幾個單元格就有幾個td -->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<!--
rowspan用來設置縱向的合併單元格
-->
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<!--
colspan橫向的合併單元格
-->
<td colspan="2">D3</td>
</tr>
</table>
</body>
</html>
設置表格樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 設置表格的寬度
*/
table{
width: 300px;
/*居中*/
margin: 0 auto;
/*邊框*/
/*border:1px solid black;*/
/*
* table和td邊框之間默認有一個距離
* 通過border-spacing屬性可以設置這個距離
*/
/*border-spacing:0px ;*/
/*
* border-collapse可以用來設置表格的邊框合併
* 如果設置了邊框合併，則border-spacing自動失效
*/
border-collapse: collapse;
/*設置背景樣式*/
/*background-color: #bfa;*/
}
/*
* 設置邊框
*/
td , th{
border: 1px solid black;
}
/*
* 設置隔行變色
*/
tr:nth-child(even){
background-color: #bfa;
}
/*
* 鼠標移入到tr以後，改變顏色
*/
tr:hover{
background-color: #ff0;
}
</style>
</head>
<body>
<!--
table是一個塊元素
-->
<table>
<tr>
<!--
可以使用th標籤來表示表頭中的內容，
它的用法和td一樣，不同的是它會有一些默認效果
-->
<th>學號</th>
<th>姓名</th>
<th>性別</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>孫悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>豬八戒</td>
<td>男</td>
<td>高老莊</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
</table>
</body>
</html>
長表格
有一些情況下表格是非常的長的，這時就需要將表格分爲三個部分，表頭，表格的主體，表格底部在HTML中爲我們提供了三個標籤：
thead 表頭
tbody 表格主體
tfoot 表格底部
這三個標籤的作用，就來區分表格的不同的部分，他們都是table的子標籤，都需要直接寫到table中，tr需要寫在這些標籤當中
thead中的內容，永遠會顯示在表格的頭部
tfoot中的內容，永遠都會顯示錶格的底部
tbody中的內容，永遠都會顯示錶格的中間
如果表格中沒有寫tbody，瀏覽器會自動在表格中添加tbody並且將所有的tr都放到tbody中，所以注意tr並不是table的子元素，而是tbody的子元素通過table > tr 無法選中行 需要通過tbody > tr
表格的佈局
以前表格更多的情況實際上是用來對頁面進行佈局的，但是這種方式早已被CSS所淘汰了表格的列數由td最多的那行決定表格是可以嵌套，可以在td中在放置一個表格
完善clearfix
子元素和父元素相鄰的垂直外邊距會發生重疊，子元素的外邊距會傳遞給父元素使用空的table標籤可以隔離父子元素的外邊距，阻止外邊距的重疊
解決父子原始外邊距重疊
/**
* 解決父子元素的外邊距重疊
*/
.box1:before{
content: "";
/*
* display:table可以將一個元素設置爲表格顯示
*/
display: table;
}
原來解決高度塌陷
/**
* 解決父元素高度塌陷
*/
.clearfix:after{
content: "";
display: block;
clear: both;
}
整合版
/*
* 經過修改後的clearfix是一個多功能的
* 既可以解決高度塌陷，又可以確保父元素和子元素的垂直外邊距不會重疊
*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}