文章目录
一、 表格标签-表格基本结构
第1关:网页表格的基本概念
1、定义表格的项目表头的HTML标签是( )。
D、<th>
2、下列选项中,用于设置表格背景颜色的属性是( )。
B、bgcolor
3、要使表格的行高为18px,以下方法中,正确的是( )
C、<tr height="18px">...</tr>
4、下列选项中,用于设置表格标题的标签是( )
D/ <caption>...</caption>
5、下列设置单元格中文本对齐方式的选项中,正确的是( )
B、
<th align="center" valign="middle">...</th>
第2关:创建简单的表格
编程要求:
根据提示,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 在之间创建一个表格,表格要求两行,每行都包含两个单元格,第一行的单元格是项目表头,第二行是数据单元格。
- 为表格添加如下图所示的背景图
表格背景
该图的URL为:https://www.educoder.net/api/attachments/1208912 - 表格的边框线设置为4px,总宽度200,每个单元格宽100
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>创建表格</title>
</head>
<body>
<!-- ********* Begin ******* -->
<table width="200" border="4px" background="https://www.educoder.net/api/attachments/1208912">
<caption>成绩表</caption>
<tr>
<th width="100">姓名</th>
<th width="100">成绩</th>
</tr>
<tr>
<td width="100">张三</td>
<td width="100">90</td>
</tr>
</table>
<!-- ********* End ********* -->
</body>
</html>
第3关:表格行样式的设置
编程要求
根据提示,在右侧编辑器中的Begin - End区域内补充代码,用于设置表格第一行的样式,具体要求是:
- 该行的行高为40。
- 该行单元格内容的水平和垂直对齐方式都为居中,
- 该行的颜色代码设置为00ffff
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表格行样式的设置</title>
</head>
<body>
<table border="4px" background="https://www.educoder.net/api/attachments/1208912" width="200">
<caption>成绩表</caption>
<!-- ********* Begin ********* -->
<tr height="40" align="center" valign="middle" bgcolor="00ffff">
<!-- ********* End ********* -->
<th width="100">姓名</td>
<th width="100">成绩</td>
</tr>
<tr>
<td>张三</td>
<td>90</td>
</tr>
</table>
</body>
</html>
第4关:表格中单元格样式的设置
编码要求
根据提示,在右侧编辑器中的Begin - End区域内补充代码,用于设置表格中单元格的样式,具体要求是:
- 该Begin1 - End1区域内添加table标签,设置表格边框线的粗细为4px,单元格之间的间隙为0,单元格内文本的内边距为8,表格总宽度200。
- 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">
<!-- ********* 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>
二、 html5—表格高级样式的设置
第1关:表格高级样式设置相关概念
1、下列选项中,用于设置表格内部边框线显示的属性是( )。
C、rules
2、如果希望表格的外部边框只显示上下两条边框线,属性frame的取值应选( )。
A、hsides
3、如果希望表格的内部边框只显示行线,则属性rules的取值应选( )。
B、rows
4、HTML中,若合并两个水平方向单元格,应使用的属性是( )。
C、rowspan
5、<table rules=cols>
,表示( )
D、只显示列与列之间的分隔线
第2关:设置表格的外边框样式
编程要求
根据提示,在右侧编辑器补充代码,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 添加table标签及属性,使得表格的宽度为100,高度为80,边框线粗细设置为4
- 在table标签中添加frame属性,使得表格外边框显示为上下边框样式。
代码展示
<html>
<head>
<meta charset="utf-8"/>
<title>设置表格外边框属性</title>
</head>
<body>
<!-- ********* Begin ******* -->
<table width="100" height="80" border="4" frame="hsides">
<!-- ********* End ********* -->
<caption>简易信息表</caption>
<tr align=center valign=middle>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr align=center valign=middle>
<td>张三</td>
<td>20</td>
</tr>
</table>
</body>
</html>
第3关:设置表格的内边框样式
编程要求
根据提示,在右侧编辑器补充代码,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 添加table标签及属性,使得表格的宽度为100,高度为80,边框线粗细设置为4
- 在table标签中添加frame属性,使得表格外边框显示为上下边框样式。
- 在table标签中添加rules属性,使得表格内边框显示为行边框线样式。
代码展示
<html>
<head>
<meta charset="utf-8"/>
<title>设置表格内边框属性</title>
</head>
<body>
<!-- ********* Begin ******* -->
<table width="100" height="80" border="4" rules="rows" frame="hsides">
<!-- ********* End ********* -->
<caption>简易信息表</caption>
<tr align=center valign=middle>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr align=center valign=middle>
<td>张三</td>
<td>20</td>
</tr>
</table>
</body>
</html>
第4关:表格中单元格的合并
编程要求
根据任务描述的效果图,在 Begin-End 区域内补充代码,创建一个3行4列的签到表,具体要求如下:
- “姓名”和“备注”单元格在垂直方向实现两个单元格合并
- “签到”单元格在水平方向实现两个单元格合并
- “姓名”“签到”“第1次”“第2次”“备注”单元格构成项目表头,请用项目表头单元格标签实现;第三行的单元格为数据单元格,请用数据单元格标签实现。
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>签到表</title>
<style type="text/css">
th{background-color:#00ff33;}
td{background-color:#00ffff;}
</style>
</head>
<body>
<table border="2" width="400" bordercolor="#00ff00" cellpadding="6">
<caption>签到表</caption>
<!-- ********* Begin ********* -->
<tr>
<th rowspan="2">姓名</th>
<th colspan="2">签到</th>
<th rowspan="2">备注</th>
</tr>
<tr>
<th>第1次</th>
<th>第2次</th>
</tr>
<tr>
<td>张三</td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- ********* End ********* -->
</table>
</body>
</html>
第5关:表格的综合案例
编程要求
根据任务描述提示的目标效果,在右侧编辑器补充代码,创建一个题为“家庭账单”的表格,要求如下:
- 为整个网页添加下图所示背景图,其URL为https://www.educoder.net/api/attachments/1217848;
表格背景 - 表格边框为2px;表格宽度为600;bordercolor为#00ff00;cellpadding为6;表格在网页中居中排列;
- 表格标题为“家庭账单”;
- 单元格的背景等样式已在头部style标签中设置,各单元格的内容及合并要求请参看任务描述中的效果图,要注意绿色显示区的单元格要设置为项目表头,青色显示区的单元格要设置为数据单元格。
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格综合</title>
<style type="text/css">
th{background-color:#00ff33;}
td{background-color:#00ffff;text-align:center}
caption{font-family:黑体;font-size:30px;color:blue}
</style>
</head>
<!-- ********* Begin ********* -->
<body background="https://www.educoder.net/api/attachments/1217848">
<table border="2" width="600" cellpadding="6" bordercolor="#00ff00" align="center">
<caption>家庭账单</caption>
<tr>
<th colspan="2" rowspan="2">本周项目</th>
<th colspan="2">费用明细</th>
<th rowspan="2">备注</th>
</tr>
<tr>
<th>收入</th>
<th>支出</th>
</tr>
<tr>
<th rowspan="3">收入</th>
<th>工资</th>
<td>10000</td>
<td>0</td>
<td></td>
</tr>
<tr>
<th>兼职</th>
<td>2000</td>
<td>0</td>
<td></td>
</tr>
<tr>
<th>收入合计</th>
<td>12000</td>
<td>0</td>
<td></td>
</tr>
<tr>
<th rowspan="3">支出</th>
<th>生活用品</th>
<td>0</td>
<td>4000</td>
<td></td>
</tr>
<tr>
<th>学杂费</th>
<td>0</td>
<td>3000</td>
<td></td>
</tr>
<tr>
<th>支出合计</th>
<td>0</td>
<td>7000</td>
<td></td>
</tr>
</table>
</body>
<!-- ********* End ********* -->
</html>