揭秘CSS(第 1 版)
11.3.4 表格
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

构建网页版WORD

布局设计

目录树设计

正文设计

列表

段落

正文设计

表格

在word中,表格是一项很常用的功能,并且表格的样式变化多端,用户可以根据需要选择自己喜欢的样式。那么,各式各样的表格到底是怎么实现的呢?

本节,通过一个简单的表格,来揭开word表格的神秘面纱。表格的HTML代码如下:

<table>
<caption>表3-2 关系选择器</caption>
<thead>
    <tr>
       <th>选择器</th>
       <th>语法</th>
       <th>功能描述</th>
       <th>版本</th>
    </tr>
</thead>
<tbody>
    <tr>
       <td>后代选择器</td>
       <td>E F</td>
       <td>选择E元素的所有后代F元素,E和F之间用空格分隔</td>
       <td>1</td>
    </tr>
    <tr>
       <td>子选择器</td>
       <td>E > F</td>
       <td>选择E元素的所有子元素F</td>
       <td>2</td>
    </tr>
    <tr>
       <td>相邻同胞选择器</td>
       <td>E + F</td>
       <td>选择紧接在E元素之后的第一个兄弟元素F</td>
       <td>2</td>
    </tr>
    <tr>
       <td>同胞选择器</td>
       <td>E ~ F</td>
       <td>选择E元素之后的所有兄弟元素F</td>
       <td>3</td>
    </tr>
    </tbody>
</table>

对于一个表格来说,如果没有显式设置宽度,则所有单元格的宽度刚好足够容纳其内容,表格的宽度单元格的宽度决定。因此,一般建议为表格设置固定宽度。

另外,大多数人习惯于让表格本身居中显示,因为这样比较美观。从前面介绍可知,table 本身会形成一个块级框。在CSS中,要使一个块级框居中显示,只需设置 margin: 0 auto 即可。由于左右两侧的外边距设置为 auto,浏览器会为两侧分配相同的外边距,框就自动居中显示了。

table {
   width: 600px;
   margin: 0 auto;   /* 表格居中显示 */
}

表格的自动布局非常方便,无需做任何调整,就可以由浏览器完美布局。当然,如果你不喜欢自动布局,或出于效率考虑,可以把 table 元素的 table-layout属性设置为 fixed,来采用固定布局。

表格默认没有外边框,可以使用 table 元素的 border属性为表格添加线条边框,或者使用 border-image 为表格添加图像边框。单元格默认具有独立边框,可以使用单元格 td 元素的 border属性或 border-image属性,为单元格添加线条边框或图像边框。为单元格添加边框后,默认情况下,单元格的边框独立,会在相邻单元格之间留下一条明显可见的间隙,影响美观。可以通过 table 元素的 border-collapse属性,来合并相邻单元格的边框,消除这个间隙。

table {
   width: 600px;
   margin: 0 auto;                 /* 表格居中显示 */
   border-top: 2px solid #444;     /* 表格的上边框 */
   border-bottom: 2px solid #444;  /* 表格的下边框 */
   border-collapse: collapse;      /* 合并单元格边框 */
}

在 word 中,默认情况下,表格的标题在表格的上方、居中显示,并与表格之间保持一定距离,字体为黑体、加粗显示。这里与 word 保持一致。

caption {
    margin: .5em auto;
    font: bold 14px 黑体;
}

可以通过 table 元素的 background、color 等属性设置整张表的背景色和文字颜色等,也可以通过 th 元素的background、color等属性改变表头的背景色和文字颜色,来突显表头。

th {
   background: #ddd;
   border-bottom: 1px solid #666 ;
}

表头单元格和普通单元格的默认格式稍有不同,表头 th 中的文本默认加粗显示、水平居中,普通单元格 td 中的文本常规显示、水平居左。表头单元格和普通单元格的内容,默认都是垂直居中对齐。

如果需要,可以使用 vertical-align属性调整垂直对齐方式,通过 text-align属性调整水平对齐方式。text-align属性可以被继承,而vertical-align属性不能被继承。

因此,可以通过 table 元素的 text-align属性,来设置整个表格中所有单元格中内容的水平对齐方式,也可以通过 th 和 td 元素的 text-align属性来设置某些单元格的水平对齐方式。但是,只能通过 th 和 td 元素的 vertical-align属性来设置单元格的垂直对齐方式。

如果只想设置某行或某列中内容的对齐方式,可以使用 :nth-child 伪类选择器实现。如,让第 4 列的所有单元格中的内容水平居中:

td:nth-child(4) {
   text-align: center;
}

表头的单元格和普通单元格中的内边距均为 0,内容过于紧凑,影响美观。可以通过 padding属性,来调整单元格的内边距,也可以通过 line-height属性调整单元格内容的行距。

th, td {
  padding: .5em 1em;
}

对于行数较多的表格,如果每一行都使用相同的背景色,阅读起来会很困难,容易产生视疲劳。如果采用隔行变色,使奇数行和偶数行使用不同的背景色,则数据行会一目了然,比传统网格状表格更便于阅读,同时也增加了表格的美感。使用 :nth-child 伪类选择器,也可以轻松实现隔行换色功能。

tr:nth-child(even) {
     background: #eaeaea;
}

对于行数较多的表格,即便是隔行变色,长时间越读,依然会感到疲劳。如果在鼠标悬停到某行或某单元格时,动态改变背景色和文本颜色,可以大大缓解用户的视疲劳,并使页面充满生机,也是很人性化的设计。为 tr 元素使用 :hover 伪类选择器,可以改变某行的背景色和文本颜色。因为不希望表头的背景随着变化,需要限定 tr 的范围,只让 tbody 中的行动态改变背景色。

tbody tr:hover {
     color: #fff;
     background: #09f;
}

经过上述处理后,表格在浏览器中渲染的结果如图 11‑14 所示:

HTML表格
图11-14 HTML表格

上面实现的是一个常规的表格,但人们常常会觉得,没有边框的表格就没有那么多的条条框框,便不会有被束缚的感觉。如果再配上圆角,看上去可能会更美。

提到圆角表格,一般想到的方法,就是通过 table 元素的 border-radius属性来实现。可事实上, table 元素并不支持 border-radius属性。条条大路通罗马,只要肯动脑,办法总是有的。如果为表格四个角上的单元格应用圆角,就间接实现了圆角表格。

thead th:first-child {
   border-top-left-radius: 6px;
}
thead th:last-child {
   border-top-right-radius: 6px;
}
tbody tr:last-child td:first-child {
   border-bottom-left-radius: 6px;
}
tbody tr:last-child td:last-child {
   border-bottom-right-radius: 6px;
}

去掉表格的边框,并应用圆角后,上述表格在浏览器中的渲染效果如图 11‑15 所示:

HTML圆角表格
图11-15 HTML圆角表格

本节基本上都使用元素选择器来定义表格的样式,这会导致页面上的所有表格都使用相同的风格。如果不希望所有表格都千篇一律,就可以定义多个类,并为不同的表格应用不同的类,这样既可以让表格的样式变化多端,又增加了灵活性。

当然,本节只是抛砖引玉,简要介绍了CSS美化HTML表格的一般步骤。在实际应用中,通过变幻表格的相关样式属性,就可以制作出任意风格、美轮美奂的表格,而方法基本不变。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验