表格
2018-09-11 本文已影响0人
沙子_32c6
创建表格代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!-- 在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>
如图：
选区_040.png
table{
设置表格的宽度
width: 300px;
居中
margin: 0 auto;
边框
border:1px solid black;
table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离
border-spacing: 10px;
border-collapse可以用来设置表格的边框合并
如果设置了边框合并，则border-spacing自动失效
border-collapse: collapse;
设置背景样式
background-color: #bfa;
}
设置边框
th, td{
border: 1px solid black;
}
设置隔行变色
tbody > tr:nth-child(even){
background-color: #bfa;
}
鼠标移入到tr以后，改变颜色
tr:hover{
background-color: yellow;
}
效果图：
选区_041.png
长表格
有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头(内容永远会显示在表格的头部)
tbody 表格主体(内容永远会显示在表格的中间)
tfoot 表格底部(内容永远会显示在表格的底部)
tr需要写在这些标签当中
如果表格中没有写tbody，浏览器会自动在表格中添加tbody并且将所有的tr都放到tbody中。
注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
表格布局
表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的布局</title>
</head>
<body>
<table border="1" width="100%">
<tr height="100px">
<td colspan="2"></td>
</tr>
<tr height="400px">
<td width="20%"></td>
<td width="80%">
<table border="1" width="100%" height="100%">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
效果图：
选区_042.png
