标签<table>:用来定义HTML文档中的表格
其中包含:
标签<thead>定义表格的页头
标签<tbody>定义表格的主体
标签<tfoot>定义表格的页脚
标签<tr></tr>定义表格的行
标签<td></td>定义表格的列
example表格显示如下:
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>frame</title>
<style>
table {
border: 1px solid;
margin: 0 auto; / / 设置表格在页面居中
}
td {
text-align: center; / / 设置每个单元格元素居中
}
p {
text-align: center; / / 设置表头在页面居中
}
</style>
</head>
<body>
<table border="1"> <!--表格-->
<p id="head">购物车</p>
<thead> <!--页头-->
<tr>
<td rowspan="2">名称</td>
<!-- rowspan="2" 设置该单元格占标准表格的2行-->
<td colspan="2">2016-12-7</td>
<!-- colspan="2" 设置该单元格占标准表格的2列-->
<td rowspan="2">小计</td>
</tr>
<tr>
<td>重量</td>
<td>单价</td>
</tr>
</thead>
<tbody> <!--表格内容-->
<tr>
<td>苹果</td>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<td>香蕉</td>
<td>2公斤</td>
<td>6元/公斤</td>
<td>12元</td>
</tr>
</tbody>
<tfoot> <!--页脚-->
<tr>
<td colspan="3">总计</td>
<td>27元</td>
</tr>
</tfoot>
</table>
</body>
</html>
