第11章 设计表格样式.pptx

1、11 设计表格样式,表格描述了数据间的关系，从本质上来分析，表格是数据存储的一种最优化模型（即关系模型），而不是布局的工具。本章将详细讲解数据表格的样式设计。主要包括： 表格基本样式。 表格布局模型。 表格高级样式设计。 表格样式实战。,样吧视频教室（）,网页制作与网站开发从入门到精通配套视频,11.1 表格基本样式设计,11.1.1 使用表格属性设计样式（示例：11-1.html）,下面这些属性在标准布局中依然被支持。,样吧视频教室（）,网页制作与网站开发从入门到精通配套视频,11.1 表格基本样式设计,11.1.2 使用CSS设计表格边框,CSS的border属性，可以为table和td元

2、素定义任意边上的边框样式。（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个值。当定义一个值时，则定义

3、单元格行间距和列间距都为该值。例如： table /* 分隔单元格边框 */ border-spacing:20px; 如果分别定义行间距和列间距，就需要定义两个值，例如： table /* 分隔单元格边框 */ border-spacing:10px 30px; 11-5.html,样吧视频教室（）,网页制作与网站开发从入门到精通配套视频,11.1 表格基本样式设计,11.1.3 单元格分离和补白样式,使用该属性分离单元格时，读者应注意三个问题： 第一，IE浏览器不支持该属性，要定义相同效果的样式，这就需要同时结合传统的cell-spacing属性来设置。 第二，当使用cell-spacin

4、g属性时，应确保数据单元格之间的相互独立性，不能够使用border-collapse:来定义合并单元格边框。 第三，cell-spacing属性不能够使用CSS的margin属性来代替。对于td元素来说，不支持margin属性。,样吧视频教室（）,网页制作与网站开发从入门到精通配套视频,11.1 表格基本样式设计,11.1.3 单元格分离和补白样式,但是我们可以为单元格定义补白，此时padding属性与单元格的cellpadding属性是功能相同。例如，下面样式为表格单元格定义20像素补白空间。 th, td /* 为单元格定义补白 */ border:solid 1px #000; padd

5、ing: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属性控制了没有可视内容

6、的单元格周围边框的显示。所谓没有可视内容，就是单元格内包含内容不可见，或者单元格不包含任何内容，如果单元格的visibility属性定义为hidden，则都被认为是没有可视内容。可视内容包括“”，以及其它空白。但是不包括ASCII字符中的回车符（“0D”）、换行符（“0A”）、Tab键（“09”）和空格键（“20”）。 第二，如果表格数据行中所有单元格的empty-cells属性取值都为hide，而且都没有任何可视内容，那么整行就等于设置了display: none。 第三，标准浏览器默认显示空单元格的边框。但是IE浏览器不支持该标准属性，且始终不会显示空单元格的边框。,样吧视频教室（）,网页

7、制作与网站开发从入门到精通配套视频,11.1 表格基本样式设计,11.1.5 单元格数据水平和垂直对齐,数据对齐方式一直是布局的重中之重，要控制表格中数据的显示位置，可以使用CSS提供的text-align和vertical-align属性，其中text-align属性控制数据在单元格中水平对齐方式，而vertical-align属性控制数据在单元格中垂直对齐方式。 11-8.html,样吧视频教室（）,网页制作与网站开发从入门到精通配套视频,11.2 表格布局模型和高级样式设计,11.2.1 表格布局模型,表格布局模型是建立在数据表格的结构模型基础之上的呈现模型。我们知道一个完整的表格结构包

8、含一个可选的标题以及任意行的单元格。当多行单元格被构建，则根据表格结构模型，会自动派生出列，每行中第1个单元格属于第1列，第2个属于第2列，依此类推。行和列可以在结构上被分组，并利用这个分组我们可以使用CSS控制多行或多列的显示样式。简单说，表格结构模型包含了表格、标题、行、行组、列、列组和单元格。,样吧视频教室（）,网页制作与网站开发从入门到精通配套视频,11.2 表格布局模型和高级样式设计,11.2.1 表格布局模型,CSS使用display属性定义了各种对应的显示模型（即显示类型）： table：定义一个块状表格，表现为一个长方形的块，并参与块格式化内容。 inline-table：定义

9、一个行内表格，表现为一个长方形的块，并参与行内格式化内容。 table-row：定义一个元素为单元格组成的行。 table-row-group：定义一个元素将一行或多行分组。 table-header-group：与table-row-group功能类似，但是该行组总在所有其它行、其它行组前显示，但在任何顶置标题之后显示。 table-footer-group：与table-row-group功能类似，但是该行组总在所有其它行、其它行组之后显示，但在任何底置标题之前显示。 table-column：定义一个元素描述了单元格列。 table-column-group：定义一个元素将一列或多列分组

10、。 table-cell：定义一个元素代表了一个单元格。 table-caption：定义了表格的标题。,样吧视频教室（）,网页制作与网站开发从入门到精通配套视频,11.2 表格布局模型和高级样式设计,11.2.1 表格布局模型,HTML 4.0版本开始默认规定了每一种表格元素的对应显示模型： TABLE display: table TR display: table-row THEAD display: table-header-group TBODY display: table-row-group TFOOT display: table-footer-group COL displa

11、y: table-column COLGROUP display: table-column-group TD, TH display: table-cell CAPTION display: table-caption 示例：11-9.html,样吧视频教室（）,网页制作与网站开发从入门到精通配套视频,11.2 表格布局模型和高级样式设计,11.2.2 数据列和行的样式,根据表格布局模型，单元格应该从属于行，而不是列，或者说单元格是行的子对象，但绝对不是列的子对象，不过根据表格布局模型，多个同列的单元格可以组合为一个列，我们可以形象的把它比作列集合。 列和列组元素所支持的标准属性包括如下。

12、border：定义指定列或列组的边框。只有当table被定义了border-collapse:collapse声明时，border属性才有效。 background：定义指定列或列组中单元格的背景，但是只有单元格和行设置了透明背景时适用。 width：定义指定列或列组的最小宽度。 visibility：如果当设置一个列的visibility为collapse，那么该列中所有的单元格都不会被渲染，而延伸到其它列的单元格将被剪裁。另外，表格的宽度也会相应减少该列本应占据的宽度。 IE不支持列的边框样式，而非IE浏览器不支持上面所列之外的任何属性。 示例：11-10.html,样吧视频教室（）,网页

13、制作与网站开发从入门到精通配套视频,11.2 表格布局模型和高级样式设计,11.2.2 数据列和行的样式,对于表格行的控制，操作相对要简单许多。要控制单行样式，这时需要控制tr元素即可；要控制多行样式，这时需要使用tbody、tfoot、thead元素对数据行进行分组，然后通过这些行组元素来控制多行数据的样式。 示例： 11-11.html,样吧视频教室（）,网页制作与网站开发从入门到精通配套视频,11.2 表格布局模型和高级样式设计,11.2.3 表格标题的样式,表格是一种特殊的布局模型，不管表格是否包含一个有形的外框，它的所有元素都将被装在一个匿名框中，table元素产生的匿名框可以包含表

14、格框本身（数据框）、标题框（如果定义）。这些表格匿名框内的包含框是相互独立的，它们都独自包含自身的内容，拥有独自的补白、边界和边框区域。匿名框的大小以包含两者的最小尺寸为准，垂直边距在表格框和标题框相交处重合。移动表格也将自动移动标题框。 表格标题样式：caption-side，定义标题的显示位置，该属性取值包括top（位于表格框的上面）、bottom（位于表格框的下面）、left（位于表格框的左侧）、right（位于表格框的右侧）。如果要水平对齐标题则可以使用text-align属性。对于左右两侧的标题，可以使用vertical-align属性进行垂直对齐，取值包括top、middle和bo

15、ttom，其它取值无效，默认为top。 示例： 11-12.html,样吧视频教室（）,网页制作与网站开发从入门到精通配套视频,11.2 表格布局模型和高级样式设计,11.2.4 合并单元格,合并单元格是一种特殊的样式操作，CSS暂时还没有支持该功能，不过由于单元格合并在表格样式设计中很重要，所以我们简单介绍一下如何利用表格单元格td元素的自身属性来实现合并显示。 如果要合并多列单元格，可以使用colspan属性 如果要合并多行单元格，可以使用rowspan属性 示例： 11-14.html,样吧视频教室（）,网页制作与网站开发从入门到精通配套视频,11.2 表格布局模型和高级样式设计,11.

16、2.5 数据表格内元素层叠优先级,由于用户可以同时为table、tr和td等元素定义背景色、边框、字体属性等样式，这时就很容易发生相同样式重叠冲突问题。为此我们需要了解表格布局模型中元素间的层叠覆盖顺序。 示例： 11-15.html,样吧视频教室（）,网页制作与网站开发从入门到精通配套视频,11.2 表格布局模型和高级样式设计,11.2.5 数据表格内元素层叠优先级,边框覆盖的规则和顺序： 如果定义了border-style:hidden;，那么它的优先级高于任何其它相冲突的边框。任何边框只要有该取值，将覆盖该位置的所有边框。通俗说如果边框被定义为隐藏显示，这其他任何重叠声明都是无效的。 如

17、果定义了border-style:none;，那么它的优先级是最低的。只有在该边汇集的所有元素的边框属性都是none，该边框才会被省略，元素的边框默认值为none。 更宽的边框将覆盖相对较窄的边框。如果若干边框的border-width属性值相同，那么样式的优先顺序将根据边框样式类型排序（排在前面的优先级最高）： double、solid、dashed、dotted、ridge、outset、groove和inset 4. 如果边框样式只有颜色上的区别，那么样式的优先顺序将根据元素类型进行排序（排在前面的优先级最高）： td、tr、thead（或tbody、tfoot）、col、colgrou

18、p和table 示例： 11-16、17.html,样吧视频教室（）,网页制作与网站开发从入门到精通配套视频,11.3 表格样式设计实战,11.3.1 清新悦目的数据表样式,本示例数据表格样式比较清秀，特别适合显示大批量数据，该样式的设计考虑到阅读大批量数据所特有的样式风格，即以柔和的色调设计风格，避免长期集中注意力易引起的视觉疲倦。 整个表格样式设计有三个技巧： 技巧一，表格色调以清淡为住，不刺激眼睛，但是又能够准确区分数据行和列。边框线以淡蓝色为主色调，并配以12像素的灰色字体，营造一种精巧设计效果。其设计重点在于色调搭配上。 技巧二，以隔行变色的技巧来分行显示数据，这也是目前数据表的主流样式，它符合视线的换行显示，避免错行阅读数据。 技巧三，通过轻微的渐变背景图像来设计表格列标题，使表格看起来更大方，富有立体感。 示例： 11-18.html,样吧视频教室（）,网页制作与网站开发从入门到精通配套视频,11.3 表格样式设计实战,11.