任务描述
本关任务:编写一个两行两列的表格网页,表格中的单元格样式进行设置。效果如下图所示:
表格效果3
相关知识
为了完成本关任务,你需要掌握:表格中单元格样式的设置。
表格中的单元格样式
表格中单元格的样式分为单元格的整体样式设置和某个单元格样式的设置。
单元格整体样式
单元格的整体样式主要涉及单元格之间的距离和单元格中内容的内边距。可以在table标签内通过cellspacing和cellpadding属性来来设置。
cellspacing
cellspacing属性用于设置单元格之间的间隙,取值为某一数值。
cellpadding
cellpadding属性用于设置单元格中的文本与单元格边框之间的间隙,也称为内边距,取值为某一数值。
某个单元格的样式
可在对应的th或td标签中设置单元格的属性。
width
th或td标签中的width属性设置单元格的宽度,属性取值为具体宽度值。
height
th或td标签中的height属性设置单元格的高,属性取值为具体行高度值。
align
th或td标签中的align属性设置单元格中文本的水平对齐方式,属性取值可以为left、center、right。
valign
th或td标签中的valign属性设置单元格中文本的垂直对齐方式,属性取值可以为top、middle、bottom。
bgcolor
th或td标签中的bgcolor属性设置单元格的背景颜色,属性取值可以为颜色单词或颜色代码。
background
th或td标签中的background属性设置单元格的背景图像,属性取值为背景图像的路径。
编程要求
根据提示,在右侧编辑器中的Begin - End区域内补充代码,用于设置表格中单元格的样式,具体要求是:
1.该Begin1 - End1区域内添加table标签,设置表格边框线的粗细为4px,单元格之间的间隙为0,单元格内文本的内边距为8,表格总宽度200。
2.Begin2 - End2区域内添加两个数据单元格标签,第一个数据单元格标签中设置单元格的宽度为120,单元格内的文本为“张三”;第二个数据单元格标签中设置其文本的水平对齐方式为居中,单元格内的文本为“90”。
测试说明
补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。
越努力越幸运,祝你成功!
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表格单元格样式的设置</title>
</head>
<body>
<!-- ********* Begin1 ********* -->
<table border=4px cellspacing="0" cellpadding="8" width="200">
</table>
<!-- ********* End1 ********* -->
<caption>成绩表</caption>
<tr height=40 align=center valign=middle bgcolor=00ffff>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr bgcolor=00ff00>
<!-- ********* Begin2 ********* -->
<td width="120">张三</td>
<td align="center">90
</td>
<!-- ********* End 2********* -->
</tr>
</table>
</body>
</html>