任务描述
本关任务:结合前几关的知识,完成以下表格的创建任务。
实现的效果如下:
相关知识
先看一个例子。如下所示:
<table border="2" cellspacing="0" width="200">
<tr>
<td>科目</td>
<td>科目</td>
<td>科目</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>75</td>
</tr>
</table>
效果如下:
很明显,科目是包括语文、数学、英语的,这个在表格中怎么表示呢?
你可以用<td>
标签的colspan
属性来实现,它规定了单元格可横跨的列数。
代码如下:
<table border="2" cellspacing="0" width="200">
<tr>
<td colspan="3">科目 </td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>75</td>
</tr>
</table>
效果如下:
这里分析一下代码,第一行第一列的 <td colspan="3">科目</td>
表示科目横跨了3
列,所以第二列和第三列就不写了,其他的不变。
编程要求
请仔细阅读右侧代码,结合相关知识,在 Begin-End
区域内进行代码补充,完成一个表格的创建任务。
测试说明
平台会对你的代码进行运行测试,如果实际输出结果与预期结果相同,则通关;反之,则 GameOver
。
赶快试一下吧!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="2" cellspacing="0" width="200">
<tr>
<td>商品</td>
<td>数量</td>
<td>单价</td>
</tr>
<tr>
<td>短袖</td>
<td>70</td>
<td>30</td>
</tr>
<tr>
<td>裤子</td>
<td>50</td>
<td>30</td>
</tr>
<tr>
<td>合计</td>
<td colspan="2">3600</td>
</tr>
</table>
</body>
</html>