表格
最基本的表格:
有4个元素,table,tr,td
table:定义表格
tr : table row,定义表格里面的行
th : table header cell ,定义表头单元格
td : table data cell,定义数据单元格
默认情况下,浏览器会对表头单元格(th)里面的内容进行加粗居中的处理,td中的内容可以是文本,图像,列表,和表格。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<tr>
<tr>
<td>太阳骑士</th>
<td>25</td>
</tr>
<tr>
<td>洋葱骑士</td>
<td>28</td>
</tr>
</table>
</body>
</html>
有边框的表格:
边框需要用css来实现,border属性
border-collapse: 用于合并重叠的边框线
表格标题:
caption元素:用于给表格添加标题,默认为居中
caption元素必须紧挨着table元素的开始标签
设置内边距:
padding:CSS属性,
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
table,th,td{
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
</style>
</head>
<body>
<table>
<caption>
黑魂小鲜肉汇总
</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<tr>
<tr>
<td>太阳骑士</th>
<td>25</td>
</tr>
<tr>
<td>洋葱骑士</td>
<td>28</td>
</tr>
</table>
</body>
</html>
背景颜色:
background
thead、tbody、tfoot:
这三个元素可以将表格更严密的分为上中下三部分,对应表头,主体和表尾,tfoot会自动将该段的内容放到表格末尾。
colspan:
th和td元素的属性,用来设置单元格横跨的列数
rowspan:
th和td元素的属性,用来设置单元格跨行的列数
colgroup和col:
可以以列为单位批量的处理单元格。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
table,th,td{
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
th {
background: grey;
color:white;
}
thead th {
color: red;
}
tbody th {
color: yellow;
}
tfoot th {
color: blue;
}
</style>
</head>
<body>
<table>
<caption>
黑魂小鲜肉汇总
</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<tr>
</thead>
<tbody>
<tr>
<th>太阳骑士</th>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>洋葱骑士</th>
<td>28</td>
</tr>
</tfoot>
<tr>
<td colspan="2">哈哈哈</td>
</tr>
</table>
</body>
</html>