《HTML+CSS》視訊15 表格、空表格隔開父子外邊距、解決高度塌陷
阿新 • • 發佈：2020-12-27
表格
在html中，使用table標籤中來建立表格
在table標籤中，使用tr來表示表格中的一行
在tr中使用td來建立一個單元格
在tr中使用th可以給單元格加表頭
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="" cellspacing 
在td標籤中使用colspan屬性，可以橫向合併單元格：
<td colspan="2">Data5</td>
rowspan可以縱向合併單元格。
<td> rowspan="2">Data3</ table是一個塊元素，可以設定寬度。
border="" cellspacing="" cellpadding=""
程式碼中的border、cellspacing、cellpadding等可以設定邊框、間隔等
也可以在CSS中設定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
border: 2px solid orange;
border-spacing: 10px;
}
td{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
<tr>
<td>Data4</td>
<td colspan="2">Data5</td>
</tr>
</table>
</body>
</html>
用border-spacing可以設定table和td邊框之間的距離。
使用border-collapse可以使table和td兩者之間的邊框合併
border-collapse:collapse;
邊框合併之後，則border-spacing自動失效。
隔行變色
可以使用偽元素對tr標籤進行設定：
tr:nth-child(odd){
background-color:#bfa;
}
滑鼠移入變色
還可以使用hover使滑鼠移入的時候，那一行變色。
在HTML中，為表格提供了三個標籤：
- thead 表頭
- tbody 表格主體
- tfoot 表格底部
這三個標籤可以區分表格的不同部分，他們都是表格的子標籤，tr需要寫在這些內容中間，thead永遠在最上邊，tfoot永遠在底部。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
border-collapse:collapse;
}
td,th{
border: 1px solid black;
}
tr:nth-child(odd){
background-color: aquamarine;
}
tr:hover{
background-color: gold;
}
th{
background-color: white;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td>合計</td>
<td>100</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
<tr>
<td>Data4</td>
<td colspan="2">Data5</td>
</tr>
</tbody>
</table>
</body>
</html>
如果表格中沒有寫tbody，瀏覽器會在表格中自動新增tbody，並且將所有的tr都放入tbody中。此時，table不是tr的父元素，tbody才是。
表格是可以巢狀的，可以在td中再放入一個表格，在很久很久以前，是用表格進行佈局的，但是因為難以維護，且不利於搜尋引擎檢索，所以已經被css淘汰了。
解決父子元素外邊距重疊
使用空的table可以隔離父子元素的外邊距重疊。
<div class="box1">
<table></table>
<div class="box2"></div>
</div>
也可以通過CSS，使用before偽類，並且將display設定為table，即可以將父子元素的外邊距隔開。
.box1:before{
content:"";
display:table;
}
解決高度塌陷
原來的解決方案是使用after偽類：
.clearfix:after{
content:"";
display:block;
/*清楚兩邊塌陷元素的影響*/
clear:both;
}
...
<div class="box1 clearfix">
<div class="box2"></div>
</div>
也可以將上面的display中的值改成block。
最終版本
所以我們可以綜合兩種方法，寫出一段同時具備兩種功能的程式碼：
.clearfix:before,.clearfix:after{
content:"";
display:table;
clear:both;
}
/*相容IE6*/
.clearfix{zoom:1;}