商品信息表(表格的应用)
程序员文章站
2024-01-04 10:58:40
...
商品信息表(表格的应用)
关键点:
-
colspan 列合并
-
rowspan 行合并
案例代码:
<table border="1" width="80%" cellspacing="0" cellpadding="5">
<caption>
商品信息表
</caption>
<thead>
<tr>
<th>id</th>
<th>品类</th>
<th>品名</th>
<th>数量</th>
<th>价格</th>
<th>金额</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>1</td>
<td rowspan="3">珠宝</td>
<td>翡翠</td>
<td>1</td>
<td>20000</td>
<td>20000</td>
</tr>
<tr>
<td>2</td>
<td>玛瑙</td>
<td>2</td>
<td>3000</td>
<td>6000</td>
</tr>
<tr>
<td>3</td>
<td>琥珀</td>
<td>10</td>
<td>500</td>
<td>50000</td>
</tr>
<tr>
<td>4</td>
<td>手串</td>
<td>檀香</td>
<td>2</td>
<td>200</td>
<td>400</td>
</tr>
</tbody>
<tfoot align="center">
<tr>
<td colspan="2"><strong>合计</strong></td>
<td><strong>总数</strong></td>
<td>15</td>
<td><strong>总金额</strong></td>
<td>76400</td>
</tr>
</tfoot>
</table>
效果图