网页设计与制作教程Web前端开发（第7版）课件：HTML5的块级元素-表格元素table.pptx

表格中的内容按照相应的行或列进行分类和显示。HTML5的块级元素表格元素table

目录块级元素2.1基本块级元素2.2列表元素2.3表格元素table2.4表单2.5分区元素div2.6缩排元素blockquote2.7实训—制作精选信息板块习题2

2.3.1基本表格表格的格式为：tableborder=nwidth=x|x%height=y|y%cellspacing=icellpadding=jcaption标题/captiontrth表头1/thth表头2/thth…/thth表头n/th/trtrtd表项1/tdtd表项2/tdtd…/tdtd表项n/td/tr…trtd表项1/tdtd表项2/tdtd…/tdtd表项n/td/tr/tabletrtablerow表行thtablehead表头tdtabledata表数据2.3表格元素table

2.3表格元素table【例2-9】在页面中添加一个4行3列的表格，本例文件2-9.html在浏览器中显示的效果如图2-9所示。!DOCTYPEhtmlhtmlheadmetacharset=utf-8title表格示例/title/headbody

tablecaption班级名单/captiontrth姓名/thth性别/thth专业/th/trtrtd张三丰/tdtd男/tdtd大数据与信息处理技术/td/trtrtd李四萍/tdtd女/tdtd软件工程/td/trtrtd王五一/tdtd女/tdtd计算机科学与技术/td/tr/tabletableborder=1cellspacing=10cellpadding=20caption班级名单/captiontrth姓名/thth性别/thth专业/th/trtrtd张三丰/tdtd男/tdtd大数据与信息处理技术/td/trtrtd李四萍/tdtd女/tdtd软件工程/td/trtrtd王五一/tdtd女/tdtd计算机科学与技术/td/tr/table/body/html2.3表格元素table

2.3.2跨行跨列的表格（选学）格式为：tabletrtdrowspan=所跨的行数colspan=所跨的列数单元格内容/td/tr/table2.3表格元素table

【例2-10】跨行跨列表格，本例文件2-10.html在浏览器中显示的效果如图2-10所示。2.3表格元素table!DOCTYPEhtmlhtmlheadmetacharset=utf-8title跨行跨列表格示例/title/head

body tablewidth=300border=2 tr tdcolspan=3课程成绩/td!--设置单元格水平跨3列-- /tr tr tdrowspan=2语文/td!--设置单元格垂直跨2行-- td期中/td td89/td /tr tr td期末/td td92/td /tr tr tdrowspan=2英语/td!--设置单元格垂直跨2行-- td期中/td td95/td /tr tr td期末/td td90/td /tr/body/html2.3表格元素table

2.3.3表格数据的分组（选学）【例2-11】表格分组示例，本例文件2-11.html在浏览器中显示的效果如图2-11所示。!DOCTYPEhtmlhtmlheadmetacharset=utf-8title分组表格示例/title/headbodytableborder=0width=420!--设置表格宽度为420px，无边框--caption成绩汇总表/captiontheadstyle=background:#FAF0E6!--设置表格的页眉--tr