<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<!--为指定的id:t2设置属性：颜色为绿色-->
<style>
#t2{color:green;}
</style>
</head>
<body>
<h3>表格练习</h3>
<!--
tr 代表一行
th 代表第一行标题
td 代表一个单元格
border 属性规定围绕表格的边框的宽度
-->
<table border="1" width="300px" height="200px">
<thead style="background:red">
<tr>
<th>序号</th>
<th>商品名称</th>
<th>供应商家</th>
<th>规格</th>
</tr>
</thead>
<tbody style="background:blue;">
<tr>
<td>1</td>
<td>溜溜球</td>
<td>海澜之家</td>
<td>3块</td>
</tr>
<tr>
<td>2</td>
<td>橡皮擦</td>
<td>警察局</td>
<td>10块</td>
</tr>
<tr>
<td>2</td>
<td>橡皮擦</td>
<td>警察局</td>
<td>10块</td>
</tr>
</tbody>
<tfoot style="background:yellow;">
<tr>
<td>2</td>
<td>橡皮擦</td>
<td>警察局</td>
<td>10块</td>
</tr>
</tfoot>
</table>
<hr /> <!--增加横线-->
<!--
# 合并单元格
colspan: 横向合并
rowspan: 纵向合并
-->
<table border="1" width="300px" height="200px" id="t2">
<thead style="background:red">
<tr>
<th>序号</th>
<th>商品名称</th>
<th>供应商家</th>
<th>规格</th>
</tr>
</thead>
<tbody style="background:yellow;">
<tr>
<td colspan="2">左右合并</td>
<td>海澜之家</td>
<td rowspan="3">上下合并</td>
</tr>
<tr>
<td>2</td>
<td>橡皮擦</td>
<td>警察局</td>
</tr>
<tr>
<td>2</td>
<td>橡皮擦</td>
<td>警察局</td>
</tr>
</tbody>
<tfoot style="background:purple;">
<tr>
<td>2</td>
<td>橡皮擦</td>
<td>警察局</td>
<td>10块</td>
</tr>
</tfoot>
</table>
</body>
</html>
table标签.png
