target.jpg
相关基础知识
表格标记<table></table> 表头标记<th></th>
表行标记<tr></tr> 表元标记<td></td>
设置跨行、跨列
<th>中跨多行<th rowspan=3></th>跨多列<th colspan=3></th>
<td>中跨多行<td rowspan=3></td>跨多列<td colspan=3></td>
设置表格大小和高宽
边框：table标记里嵌入<b>border</b>属性
<table border=1></table>
高宽：table标记里嵌入<b>width</b>，<b>height</b>属性。
设置文字对齐方式
属性<b>align</b>=# #后可接<b>left</b>、<b>right</b>、<b>center</b>。
了解到这些后就可以开始表格的输出了：
先是标题：
<body>里<center>购物车</center>
然后框架：
<pre><html>
<head>
<title>表格</title>
</head>
<body>
</body>
</html></pre>
开始逐行：
(第一行为表头)
<pre> <tr>
<th rowspan=2>名称</th>
<th colspan=2>2016-11-22</th>
<th rowspan=2>小计</th>
</tr></pre>
(第二行，因为名称和小计跨了两行，所以第二行只有重量和单价两个表元。)
<pre> <tr>
<td align=center><b>重量</b></td>
<td align=center><b>单价</b></td>
</tr></pre>
(第三行和第四行照样输出。)
<pre> <tr>
<td align=center><b>苹果</b></td>
<td align=center>3公斤</td>
<td align=center>5元/公斤</td>
<td align=cneter>15元</td>
</tr>
<tr>
<td align=center><b>香蕉</b></td>
<td align=center>2公斤</td>
<td align=center>6元/公斤</td>
<td align=center>12元</td>
</tr></pre>
(最后一行两个表元，表元总价跨三列)
<pre> <tr>
<td colspan=3 align=center><strong>总价</strong></td>
<td align=center>27元</td>
</tr></pre>
完成~
完整代码如下：
<pre><html>
<head>
<title>表格</title>
</head>
<body>
<table border=1 width="250" height="200">
<tr>
<th rowspan=2>名称</th>
<th colspan=2>2016-11-22</th>
<th rowspan=2>小计</th>
</tr>
<tr>
<td align=center><b>重量</b></td>
<td align=center><b>单价</b></td>
</tr>
<tr>
<td align=center><b>苹果</b></td>
<td align=center>3公斤</td>
<td align=center>5元/公斤</td>
<td align=cneter>15元</td>
</tr>
<tr>
<td align=center><b>香蕉</b></td>
<td align=center>2公斤</td>
<td align=center>6元/公斤</td>
<td align=center>12元</td>
</tr>
<tr>
<td colspan=3 align=center><strong>总价</strong></td>
<td align=center>27元</td>
</tr>
</table>
</body>
</html></pre>
效果如图:
Screenshot .jpg
网友评论