◆知识要点
1. <table>标签的结构和基本用法。
2.要合并左右单元格使用<td>标签的colspan属性来实现,格式如下:
<td colspan="数值">单元格内容</td> colspan属性的“数值”代表几个单元格进行左右合并。要合并左右单元格使用<td>标签的rowspan属性来实现,格式如下:<td rowspan="数值">单元格内容</td> rowspan属性的“数值”代表几个单元格进行上下合并。
◆巩固练习
IE浏览效果图
◆HTML5代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的表格</title>
</head>
<body>
<table border="1">
<caption>xxx公司报价单</caption>
<tr>
<th>产品名称</th>
<th>型号及规格</th>
<th>数量(单位: )</th>
<th>单价(元)</th>
<th>金额(元)</th>
<th>备注</th>
</tr>
<tr>
<td>羽绒</td>
<td>L</td>
<td>100件</td>
<td>900</td>
<td>90000</td>
<td></td>
</tr>
<tr>
<td>体恤</td>
<td>M</td>
<td>50件</td>
<td>200</td>
<td>10000</td>
<td></td>
</tr>
<tr>
<td>牛仔裤</td>
<td>XXL</td>
<td>200条</td>
<td>100</td>
<td>2000</td>
<td></td>
</tr>
<tr>
<td>POLO衬</td>
<td>XL</td>
<td>200件</td>
<td>300</td>
<td>60000</td>
<td></td>
</tr>
<tr>
<td>合计</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6">合计大写金额</td>
</tr>
</table>
</body>
</html>