容器元素容器元素.ppt

第5章容器元素所谓容器元素是指该元素代表一块区域，内部用于放置其他元素。例如div元素就是最常见的容器元素。上一章用到的figure元素也是容器元素，属于HTML语义化容器元素。本章首先介绍的容器元素是表格元素teble，然后介绍表单及相关元素，最后学习窗口容器，包括iframe子窗口、Bootstrap模态框和Bootstrap侧边面板。了解表格元素、子窗口元素、表单元素的基本标签和基本属性理解Bootstrap模态框的基本应用方法掌握各种表单元素的的基本功能能熟练制作网页表格

内容安排表格5.1表单5.2窗口容器5.3小试牛刀5.4

5.1表格在CSS出现之前，表格元素曾广泛用于布局与定位。一个表格由若干行元素组成，每一个行元素又包含若干单元格。HTML的内容都放在这一个个单元格容器中。这些单元格可大可小，可横向合并，也可纵向合并，还可在单元格中嵌套表格。新建页面后第一件事就是画一个适当的表格，然后在单元格中插入文字、图片等内容，再把表格线去掉，就完成了表格布局。CSS出现以后，布局与定位不再使用表格。表格逐渐回归其原本的功能，即在页面上用来显示数据，构建文本、图像或其它对象。

表格表格相关标签2.table标签属性1.表格定义基本格式： table trtd…/tdtd…/td…/tr trtd…/tdtd…/td…/tr …/table（1）align属性（2）border属性（3）width属性（4）height属性（5）cellpadding属性（6）cellspacing属性

表格5.13.表格相关的其它配套标签在一个表格中table标签、tr标签、td标签是必须有的标签，除此之外还有一些与表格相关的其它配套标签。（1）表格标题标签captioncaption标签定义表格的标题。caption标签必须直接放置到table标签之后。每个表格只能规定一个标题。标题会自动根据表格的宽度居中并且显示在表格上方。（2）表头单元格标签thth标签用于定义表格内的表头单元格，此单元格中的文字将以粗体的方式显示。（3）表头标签theadthead标签用于组合HTML表格的表头内容。（4）表格的主体标签tbodytbody标签用于组合HTML表格的主体内容。（5）表格的页脚标签tfoottfoot标签用于组合HTML表格的页脚内容。

表格表格边框重叠CSS样式属性border-collapse格式：border-collapse：collapse|separate取值：collapse：表格边框折叠为单一边框separate：表格边框分离5.1.3Bootstrap表格预定义类Bootstrap跟表格相关的预定义类如表5-2所列类名功能.table在table标签中使用预定义类“.table”来设置表格的基础样式.table-striped在table标签中添加“.table-striped”类，可以在行元素上添加背景条.table-bordered在table标签中添加预定义类“.table-bordered”可以为表格添加边框.table-borderless在table标签中添加预定义类“.table-borderless”可以设置一个无边框的表格.table-hover在table标签中添加预定义类“.table-hover”可以为表格的每一行添加鼠标悬停效果（灰色背景）预定义类背景颜色.table-primary蓝色.table-success绿色.table-danger红色.table-dark黑色.table-info浅蓝色.table-warning橘色.table-active灰色.table-secondary灰色.table-light浅灰色

5.1.4使用Bootstrap制作表格案例5.1案例5-1：使用Bootstrap制作一个4行3列的表格，效果如图5-2所示。表格分为表头和主体两大部分，分别用不用的背景颜色。表头使用预定义类.table-dark，样式为黑底白字；表格主体使用预定义类.table-primary，样式为蓝底黑字。在table标签使用预定义类.table-hover，使鼠标悬停在表格主体时，所在行的背景颜色变为灰色htmlheadtitle案例5-1/titlemetacharset=utf-8linkhref=css/bootstrap.min.cssrel=stylesheet/headbodytableclass=tabletable-hoverthead trclass=table-darkth姓名/thth年龄/ththEmail/th/tr/theadtbody trclass=table-primarytd张三/tdtd23/tdtdjohn