Web前端开发（HTML5+CSS3+JavaScript） 课件 第3章 3.3-表格.pptx

Web前端基础技术;;1.表格用途和结构;tableborder=1width=200px

caption学生信息表（标题）/caption

thead

tr

th姓名/th

th性别/th

/tr

/thead

tbody

tr

td张三/td

td男/td

/tr

tr

td李四/td

td女/td

/tr

/tbody;重点关注：tabletrtd标记；常用简化结构的表格;2.表格主要属性;练习：表格在页面居中，其中，表格标题“课程表”使用标题2；个别单元格使用加粗字体，单元格外边距离为10px，内边距为10px，背景色为#ccc。如下图所示。;table

border=1

align=center

cellpadding=10px

cellspacing=10px

bgcolor=#ccc

caption

h2课程表/h2

/caption

!--表格头--

tr

th时间/th

th星期一/th

th星期二/th

th星期三/th

th星期四/th

th星期五/th

/tr;示例：修改课程表样式（细线表格，了解属性rules，只需在上例中修改table属性），如下图;;示例：行、单元格属性使用;3.行列合并

colspan（相邻单元格列方向合并）rowspan（相邻单元格，行方向合并）---需要删除被合并的单元格;4.嵌套表格（了解）;综合实例：使用表格相关属性实现如下图效果。;确定最大列数的行，设置宽度，作为模板行

复制模板行，去掉宽度，再作为模板行，除了第一步的模板行，依次复制到每一行

根据要求进行行列合并;tableborder=1align=center

!--模版行--

!--tr

tdwidth=120px/td

tdwidth=120px/td

tdwidth=120px/td

tdwidth=120px/td

tdwidth=120px/td

tdwidth=120px/td

/tr--

!--1.第1行--

trheight=60px

tdcolspan=6align=centervalign=middle博览会申请表/td

/tr

!--2.第2行--

tr

td参会者姓名/td

tdcolspan=3/td

!--td/td

td/td--

td其他/td

td/td

/tr

!--3.第3行--

tr

td工作单位/td

tdcolspan=5/td

!--td/td

td/td--

!--td其他/td

td/td--

/tr;练习；制作个人信息表;h3align=center个人信息表/h3

tableborder=1width=840pxalign=centerrules=all

!--1.确定表格中最大列数，制作模版行--

!--tr

tdwidth=60px姓