网页设计与制作教程——Web前端开发(第6版)课件第2章 块级元素2.3
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</tbody><!-表格主体结束-->
2.3 表格元素table
<tfoot style="background:#FAF0E6"><!--设置表格的数据页脚--> <tr> <td>平均分数</td> <td>93</td> <td>96</td> <td>95</td> </tr>
</tfoot><!--表格页脚结束--> </table> </bቤተ መጻሕፍቲ ባይዱdy> </html>
2.3 表格元素table
2.3.4 调整列的格式
【例2-12】列格式示例。本例文件2-12.html在浏览器中显示的效果如图2-12所示。
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>分组表格示例</title>
</head> <body>
</table>
2.3 表格元素table
【例2-9】在页面中添加一个4行3列的表格，本例文件2-9.html在浏览器中显示 的效果如图2-9所示。 <!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>表格示例</title>
</head> <body>
<td>李四萍</td> <td>女</td> <td>软件工程</td>
<td>王五一</td> <td>女</td> <td>计算机科学与技术</td>
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你又学完了一节
2.3 表格元素table
2.3.1 基本表格 表格的格式为：
<table border="n" width="x|x%" height="y|y%" cellspacing="i" cellpadding="j"> <caption>标题</caption> <tr> <th>表头1</th> <th>表头2</th> <th>…</th> <th>表头n</th></tr> <tr> <td>表项1</td> <td>表项2</td> <td>…</td> <td>表项n</td></tr> … <tr> <td>表项1</td> <td>表项2</td> <td>…</td> <td>表项n</td></tr>
</table> <table border="1" cellspacing="10" cellpadding="20">
<caption>班级名单</caption> <tr><th>姓名</th><th>性别</th><th>专业</th></tr> <tr><td>张三丰</td><td>男</td><td>大数据与信息处理技术</td></tr> <tr><td>李四萍</td><td>女</td><td>软件工程</td></tr> <tr><td>王五一</td><td>女</td><td>计算机科学与技术</td></tr> </table> </body> </html>
2.3 表格元素table
<table> <caption>班级名单</caption> <tr><th>姓名</th><th>性别</th><th>专业</th></tr> <tr><td>张三丰</td><td>男</td><td>大数据与信息处理技术</td></tr> <tr><td>李四萍</td><td>女</td><td>软件工程</td></tr> <tr><td>王五一</td><td>女</td><td>计算机科学与技术</td></tr>
</head> <body>
<table border="0" width="420"><!--设置表格宽度为420px，无边框--> <caption>成绩汇总表</caption> <thead style="background:#FAF0E6"><!--设置表格的页眉--> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th> </tr> </thead><!--表格页眉结束-->
</body> </html>
2.3 表格元素table
2.3.3 表格数据的分组 【例2-11】表格分组示例，本例文件2-11.html在浏览器中显示的效果如图2-11所 示。
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>分组表格示例</title>
<table border="1"> <colgroup> <col width="150" style="background:#FFFAF0"> <col width="100" style="background:#8d8d8d">
<col width="200" style="background:#FFFAF0">
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第2章 块级元素
2.3 表格元素table
表格中的内容按照相应的行或列进行分类和显示。
目录
第2章 块级元素
2.1 基本块级元素 2.2 列表元素 2.3 表格元素table 2.4 表单 2.5 分区元素div 2.6 缩排元素blockquote 2.7 实训—制作精选信息板块 习题2
2.3 表格元素table
<tbody style="background:#FFFAF0"><!--设置表格主体--> <tr> <td>张三丰</td> <td>90</td> <td>92</td> <td>98</td> </tr> <tr> <td>李四萍</td> <td>96</td> <td>100</td> <td>90</td> </tr> <tr> <td>王五一</td> <td>93</td> <td>97</td> <td>97</td> </tr>
2.3 表格元素table
2.3.2 跨行跨列的表格 格式为：
<table> <tr><td rowspan="所跨的行数" colspan="所跨的列数">单元格内容</td></tr>
</table> 【例2-10】跨行跨列表格，本例文件2-10.html在浏览器中显示的效果如图210所示。
<!DOCTYPE html> <html>
</colgroup>
<tr> </tr>
<th>姓名</th> <th>姓名</th> <th>专业</th>
2.3 表格元素table
<tr>
</tr> <tr>
</tr> <tr>
</tr> </table> </body> </html>
<td>张三丰</td> <td>男</td> <td>大数据与信息处理技术</td>
<head> <meta charset="utf-8"> <title>跨行跨列表格示例</title>
</head>
2.3 表格元素table
<body> <table width="300" border="2"> <tr> <td colspan="3">课程成绩</td><!--设置单元格水平跨3列--> </tr> <tr> <td rowspan="2">语文</td><!--设置单元格垂直跨2行--> <td>期中</td> <td>89</td> </tr> <tr> <td>期末</td> <td>92</td> </tr> <tr> <td rowspan="2">英语</td><!--设置单元格垂直跨2行--> <td>期中</td> <td>95</td> </tr> <tr> <td>期末</td> <td>90</td> </tr>
2.3 表格元素table
<tfoot style="background:#FAF0E6"><!--设置表格的数据页脚--> <tr> <td>平均分数</td> <td>93</td> <td>96</td> <td>95</td> </tr>
</tfoot><!--表格页脚结束--> </table> </bቤተ መጻሕፍቲ ባይዱdy> </html>
2.3 表格元素table
2.3.4 调整列的格式
【例2-12】列格式示例。本例文件2-12.html在浏览器中显示的效果如图2-12所示。
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>分组表格示例</title>
</head> <body>
</table>
2.3 表格元素table
【例2-9】在页面中添加一个4行3列的表格，本例文件2-9.html在浏览器中显示 的效果如图2-9所示。 <!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>表格示例</title>
</head> <body>
<td>李四萍</td> <td>女</td> <td>软件工程</td>
<td>王五一</td> <td>女</td> <td>计算机科学与技术</td>
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你又学完了一节
2.3 表格元素table
2.3.1 基本表格 表格的格式为：
<table border="n" width="x|x%" height="y|y%" cellspacing="i" cellpadding="j"> <caption>标题</caption> <tr> <th>表头1</th> <th>表头2</th> <th>…</th> <th>表头n</th></tr> <tr> <td>表项1</td> <td>表项2</td> <td>…</td> <td>表项n</td></tr> … <tr> <td>表项1</td> <td>表项2</td> <td>…</td> <td>表项n</td></tr>
</table> <table border="1" cellspacing="10" cellpadding="20">
<caption>班级名单</caption> <tr><th>姓名</th><th>性别</th><th>专业</th></tr> <tr><td>张三丰</td><td>男</td><td>大数据与信息处理技术</td></tr> <tr><td>李四萍</td><td>女</td><td>软件工程</td></tr> <tr><td>王五一</td><td>女</td><td>计算机科学与技术</td></tr> </table> </body> </html>
2.3 表格元素table
<table> <caption>班级名单</caption> <tr><th>姓名</th><th>性别</th><th>专业</th></tr> <tr><td>张三丰</td><td>男</td><td>大数据与信息处理技术</td></tr> <tr><td>李四萍</td><td>女</td><td>软件工程</td></tr> <tr><td>王五一</td><td>女</td><td>计算机科学与技术</td></tr>
</head> <body>
<table border="0" width="420"><!--设置表格宽度为420px，无边框--> <caption>成绩汇总表</caption> <thead style="background:#FAF0E6"><!--设置表格的页眉--> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th> </tr> </thead><!--表格页眉结束-->
</body> </html>
2.3 表格元素table
2.3.3 表格数据的分组 【例2-11】表格分组示例，本例文件2-11.html在浏览器中显示的效果如图2-11所 示。
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>分组表格示例</title>
<table border="1"> <colgroup> <col width="150" style="background:#FFFAF0"> <col width="100" style="background:#8d8d8d">
<col width="200" style="background:#FFFAF0">
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第2章 块级元素
2.3 表格元素table
表格中的内容按照相应的行或列进行分类和显示。
目录
第2章 块级元素
2.1 基本块级元素 2.2 列表元素 2.3 表格元素table 2.4 表单 2.5 分区元素div 2.6 缩排元素blockquote 2.7 实训—制作精选信息板块 习题2
2.3 表格元素table
<tbody style="background:#FFFAF0"><!--设置表格主体--> <tr> <td>张三丰</td> <td>90</td> <td>92</td> <td>98</td> </tr> <tr> <td>李四萍</td> <td>96</td> <td>100</td> <td>90</td> </tr> <tr> <td>王五一</td> <td>93</td> <td>97</td> <td>97</td> </tr>
2.3 表格元素table
2.3.2 跨行跨列的表格 格式为：
<table> <tr><td rowspan="所跨的行数" colspan="所跨的列数">单元格内容</td></tr>
</table> 【例2-10】跨行跨列表格，本例文件2-10.html在浏览器中显示的效果如图210所示。
<!DOCTYPE html> <html>
</colgroup>
<tr> </tr>
<th>姓名</th> <th>姓名</th> <th>专业</th>
2.3 表格元素table
<tr>
</tr> <tr>
</tr> <tr>
</tr> </table> </body> </html>
<td>张三丰</td> <td>男</td> <td>大数据与信息处理技术</td>
<head> <meta charset="utf-8"> <title>跨行跨列表格示例</title>
</head>
2.3 表格元素table
<body> <table width="300" border="2"> <tr> <td colspan="3">课程成绩</td><!--设置单元格水平跨3列--> </tr> <tr> <td rowspan="2">语文</td><!--设置单元格垂直跨2行--> <td>期中</td> <td>89</td> </tr> <tr> <td>期末</td> <td>92</td> </tr> <tr> <td rowspan="2">英语</td><!--设置单元格垂直跨2行--> <td>期中</td> <td>95</td> </tr> <tr> <td>期末</td> <td>90</td> </tr>