第11章设计表格样式

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,11,设计表格样式,表格描述了数据间的关系,，从本质上来分析，表格是数据存储的一种最优化模型（即关系模型），而不是布局的工具。本章将详细讲解数据表格的样式设计。主要包括：,表格基本样式。,表格布局模型。,表格高级样式设计。,表格样式实战。,样吧视频教室（,）,网页制作与网站开发从入门到精通,配套视频,11.1,表格基本样式设计,11.1.1,使用表格属性设计样式,（示例：,11-1.html,）,下面这些属性在标准布局中依然被支持。,样吧视频教室（,）,网页制作与网站开发从入门到精通,配套视频,属性,说明,border,定义表格边框，属性取值用来定义表格边框的宽度，取值为,0,表示好隐藏表格边框线。功能类似,CSS,中的,border,属性，但是没有,CSS,提供的边框属性强大,cellpadding,定义数据表单元格的补白。功能类似,CSS,中的,padding,属性，但是功能比较弱,cellspacing,定义数据表单元格的边界。功能类似,CSS,中的,margin,属性，但是功能比较弱,width,定义数据表的宽度。功能类似,CSS,中的,width,属性,frame,设置数据表的外边框线显示，实际上它是对,border,属性的功能扩展。,取值包括,void,（不显示任一边框线）、,above,（顶端边框线）、,below,（底部边框线）、,hsides,（顶部和底部边框线）、,lhs,（左边框线）、,rhs,（右边框线）、,vsides,（左和右边的框线）、,box,（所有四周的边框线）、,border,（所有四周的边框线）,rules,设置数据表的内边线显示，实际上它是对,border,属性的功能扩展。,取值包括,none,（禁止显示内边线）、,groups,（仅显示分组内边线）、,rows,（显示每行的水平线）、,cols,（显示每列的垂直线）、,all,（显示所有行和列的内边线）,width,定义数据表的宽度,11.1,表格基本样式设计,11.1.2,使用,CSS,设计表格边框,CSS,的,border,属性，可以为,table,和,td,元素定义任意边上的边框样式。（,11-2.html,）,border-collapse,：边框合并为单一边框线。该属性取值包括,separate,（单元格边框相互独立）和,collapse,（单元格边框相互合并）。,table/*,合并单元格边框,*/,border-collapse:collapse;,（,11-3.html,）,样吧视频教室（,）,网页制作与网站开发从入门到精通,配套视频,11.1,表格基本样式设计,11.1.3,单元格分离和补白样式,为了兼容传布布局中,cellspacing,属性，,CSS,定义了,border-spacing,属性，该属性能够分离单元格间距。取值包含,1,个或,2,个值。当定义一个值时，则定义单元格行间距和列间距都为该值。例如：,table/*,分隔单元格边框,*/,border-spacing:20px;,如果分别定义行间距和列间距，就需要定义两个值，例如：,table/*,分隔单元格边框,*/,border-spacing:10px 30px;,11-5.html,样吧视频教室（,）,网页制作与网站开发从入门到精通,配套视频,11.1,表格基本样式设计,11.1.3,单元格分离和补白样式,使用该属性分离单元格时，读者应注意三个问题：,第一，,IE,浏览器不支持该属性，要定义相同效果的样式，这就需要同时结合传统的,cell-spacing,属性来设置。,第二，当使用,cell-spacing,属性时，应确保数据单元格之间的相互独立性，不能够使用,border-collapse:,来定义合并单元格边框。,第三，,cell-spacing,属性不能够使用,CSS,的,margin,属性来代替。对于,td,元素来说，不支持,margin,属性。,样吧视频教室（,）,网页制作与网站开发从入门到精通,配套视频,11.1,表格基本样式设计,11.1.3,单元格分离和补白样式,但是我们可以为单元格定义补白，此时,padding,属性与单元格的,cellpadding,属性是功能相同。例如，下面样式为表格单元格定义,20,像素补白空间。,th,td/*,为单元格定义补白,*/,border:solid 1px#000;,padding:20px;,11-6.html,样吧视频教室（,）,网页制作与网站开发从入门到精通,配套视频,11.1,表格基本样式设计,11.1.4,空单元格显示处理,如果表格单元格的边框处于分离状态（即单元格边框处于非合并状态下），我们可以使用,CSS,提供的,empty-cells,属性来控制空单元格是否显示。,empty-cells,属性取值包括,show,和,hide,。,11-7.html,样吧视频教室（,）,网页制作与网站开发从入门到精通,配套视频,11.1,表格基本样式设计,11.1.4,空单元格显示处理,在使用,empty-cells,属性时，读者应注意三个问题：,第一，,empty-cells,属性控制了没有可视内容的单元格周围边框的显示。所谓没有可视内容，就是单元格内包含内容不可见，或者单元格不包含任何内容，如果单元格的,visibility,属性定义为,hidden,，则都被认为是没有可视内容。可视内容包括“,”，以及其它空白。但是不包括,ASCII,字符中的回车符（“,0D,”）、换行符（“,0A,”）、,Tab,键（“,09,”）和空格键（“,20,”）。,第二，如果表格数据行中所有单元格的,empty-cells,属性取值都为,hide,，而且都没有任何可视内容，那么整行就等于设置了,display:none,。,第三，标准浏览器默认显示空单元格的边框。但是,IE,浏览器不支持该标准属性，且始终不会显示空单元格的边框。,样吧视频教室（,）,网页制作与网站开发从入门到精通,配套视频,11.1,表格基本样式设计,11.1.5,单元格数据水平和垂直对齐,数据对齐方式一直是布局的重中之重，要控制表格中数据的显示位置，可以使用,CSS,提供的,text-align,和,vertical-align,属性，其中,text-align,属性控制数据在单元格中水平对齐方式，而,vertical-align,属性控制数据在单元格中垂直对齐方式。,11-8.html,样吧视频教室（,）,网页制作与网站开发从入门到精通,配套视频,11.2,表格布局模型和高级样式设计,11.2.1,表格布局模型,表格布局模型是建立在数据表格的结构模型基础之上的呈现模型。我们知道一个完整的表格结构包含一个可选的标题以及任意行的单元格。当多行单元格被构建，则根据表格结构模型，会自动派生出列，每行中第,1,个单元格属于第,1,列，第,2,个属于第,2,列，依此类推。行和列可以在结构上被分组，并利用这个分组我们可以使用,CSS,控制多行或多列的显示样式。简单说，表格结构模型包含了,表格、标题、行、行组、列、列组和单元格,。,样吧视频教室（,）,网页制作与网站开发从入门到精通,配套视频,11.2,表格布局模型和高级样式设计,11.2.1,表格布局模型,CSS,使用,display,属性定义了各种对应的显示模型（即显示类型）：,table,：定义一个块状表格，表现为一个长方形的块，并参与块格式化内容。,inline-table,：定义一个行内表格，表现为一个长方形的块，并参与行内格式化内容。,table-row,：定义一个元素为单元格组成的行。,table-row-group,：定义一个元素将一行或多行分组。,table-header-group,：与,table-row-group,功能类似，但是该行组总在所有其它行、其它行组前显示，但在任何顶置标题之后显示。,table-footer-group,：与,table-row-group,功能类似，但是该行组总在所有其它行、其它行组之后显示，但在任何底置标题之前显示。,table-column,：定义一个元素描述了单元格列。,table-column-group,：定义一个元素将一列或多列分组。,table-cell,：定义一个元素代表了一个单元格。,table-caption,：定义了表格的标题。,样吧视频教室（,）,网页制作与网站开发从入门到精通,配套视频,11.2,表格布局模型和高级样式设计,11.2.1,表格布局模型,HTML 4.0,版本开始默认规定了每一种表格元素的对应显示模型：,T,ABLE display:table,TR display:table-row,THEAD display:table-header-group,TBODY display:table-row-group,TFOOT display:table-footer-group,COL display:table-column,COLGROUP display:table-column-group,TD,TH display:table-cell,CAPTION display:table-caption,示例：,11-9.html,样吧视频教室（,）,网页制作与网站开发从入门到精通,配套视频,11.2,表格布局模型和高级样式设计,11.2.2,数据列和行的样式,根据表格布局模型，单元格应该从属于行，而不是列，或者说单元格是行的子对象，但绝对不是列的子对象，不过根据表格布局模型，多个同列的单元格可以组合为一个列，我们可以形象的把它比作列集合。,列和列组元素所支持的标准属性包括如下。,border,：定义指定列或列组的边框。只有当,table,被定义了,border-collapse:collapse,声明时，,border,属性才有效。,background,：定义指定列或列组中单元格的背景，但是只有单元格和行设置了透明背景时适用。,width,：定义指定列或列组的最小宽度。,visibility,：如果当设置一个列的,visibility,为,collapse,，那么该列中所有的单元格都不会被渲染，而延伸到其它列的单元格将被剪裁。另外，表格的宽度也会相应减少该列本应占据的宽度。,IE,不支持列的边框样式，而非,IE,浏览器不支持上面所列之外的任何属性。,示例：,11-10.html,样吧视频教室（,）,网页制作与网站开发从入门到精通,配套视频,11.2,表格布局模型和高级样式设计,11.2.2,数据列和行的样式,对于表格行的控制，操作相对要简单许多。要控制单行样式，这时需要控制,tr,元素即可；要控制多行样式，这时需要使用,tbody,、,tfoot,、,thead,元素对数据行进行分组，然后通过这些行组元素来控制多行数据的样式。,示例：,11-11.html,样吧视频教室（,）,网页制作与网站开发从入门到精通,配套视频,11.2,表格布局模型和高级样式设计,11.2.3,表格标题的样式,表格是一种特殊的布局模型，不管表格是否包含一个有形的外框，它的所有元素都将被装在一个匿名框中，,table,元素产生的匿名框可以包含表格框本身（数据框）、标题框（如果定义）。这些表格匿名框内的包含框是相互独立的，它们都独自包含自身的内容，拥有独自的补白、边界和边框区域。匿名框的大小以包含两者的最小尺寸为准，垂直边距在表格框和标题框相交处重合。移动表格也将自动移动标题框。,表格标题样式：,caption-side,，定义标题的显示位置，该属性取值包括,top,（位于表格框的上面）、,bottom,（位于表格框的下面）、,left,（位于表格框的左侧）、,right,（位于表格框的右侧）。如果要水平对齐标题则可以使用,text-align,属性。对于左右两侧的标题，可以使用,vertical-align,属