任务描述
本关任务:按照以下要求,完成一个复杂的表格创建任务。
创建表格的要求如下:
-
边框为
2px
; -
宽为
100%
; -
cellspacing
为0
; -
cellpadding
为6
; -
标题内容为
本周财政计划
; -
在
<style>
标签里设置文本为居中对齐。
其它内容和效果图展示的一样。
注意:表格属性的顺序按照创建表格的要求的顺序来写。
实现的效果如下:
相关知识
这关是对大家前面所学知识的一个总结和拓展,通过前面的学习,做一个表格是没有问题的。
这里介绍一个控制表格内文本方向的属性,本来表格有自带的属性align
也是控制文本方向的,不过现在浏览器大多不支持,都用 css 的另一个属性text-align
来代替。
不知你们有没有发现,表格的内容都是靠左的,在表格宽度比较大的情况下是很明显的。这里因为 表格默认的文本方向是向左。
现在让文本居中,例子如下:
<style>
table{
text-align: center;
}
</style>
<table border="2" cellspacing="0" width="300">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
</tr>
</table>
效果图如下:
这样是不是效果要好一些。下面介绍一个这个属性。
text-align
属性有下面的几个值:
-
left
:左对齐; -
center
:居中对齐; -
right
:右对齐; -
justify
:两端对齐。
这几个值大家可以在表格里试一下,看看有什么不一样的。
编程要求
请仔细阅读右侧代码,结合相关知识,在 Begin-End
区域内进行代码补充,完成一个表格的创建任务。
测试说明
平台会对你的代码进行运行测试,如果实际输出结果与预期结果相同,则通关;反之,则 GameOver
。
赶快试一下吧!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- ********* Begin ********* -->
<style>
body{
margin:30px;
}
table{
/*居中对齐*/
text-align: center;
}
</style>
<!--设置表格-->
<caption>本周财政计划</caption>
<table border="2" cellspacing="0" cellpadding="6" width="100%">
<caption>本周财政计划</caption>
<tr>
<td rowspan="2"colspan="2">项目 </td>
<td colspan="2">本周发生</td>
<td rowspan="2">备注</td>
</tr>
<tr>
<td>收入</td>
<td>支出</td>
</tr>
<tr>
<td rowspan="3">收入</td>
<td>贷款收回</td>
<td>8700</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>内部转款</td>
<td>6000</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>收入合计</td>
<td>14700</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td rowspan="3">支出</td>
<td>采购支出</td>
<td>0</td>
<td>5000</td>
<td></td>
</tr>
<tr>
<td>工资支出</td>
<td>0</td>
<td>7000</td>
<td></td>
</tr>
<tr>
<td>支出合计</td>
<td>0</td>
<td>12000</td>
<td></td>
</tr>
<!-- ********* End ********* -->
</body>
</html>