表格边框

若要在CSS中指定表格边框,请使用border属性.

下面的示例指定<table>、<th>和<td>元素的黑色边框:

如果只希望在表周围设置边框,则仅指定<table>的边框属性:

表格的宽和高

表的宽度和高度由width和height属性定义.

下面的示例将表的宽度设置为100%,将<th>元素的高度设置为50px:

水平对齐方式

text-align属性设置<th>或<td>中内容的水平对齐方式(如left、right或center).

默认情况下,<th>元素的内容是中心对齐的,<td>元素的内容是左对齐的.

下面的示例左对齐<th>元素中的文本:

垂直对齐

vertical-align属性设置内容在<th>或<td>中的垂直对齐(如top、bottom或middle).

默认情况下,表中内容是垂直居中对齐的(对于<th>和<td>元素).

下面的示例将<td>元素的vertical-align设置为bottom:

表格内边距

若要控制表中边框和内容之间的间隔,请在<td>和<th>元素上使用padding属性：

水平间隔

将border-bottom属性添加到<th>和<td>中作为分割线:

鼠标悬停变化

使用<tr>上的:hover选择器可突出显示鼠标悬停的表行:

条纹表

对于斑马条纹表，使用nth-child()选择器并向所有偶数(或奇数)表行添加背景色:

表格颜色

下面的示例指定<th>元素的背景色和文本颜色:

能响应的表

如果屏幕太小,无法显示全部内容，能响应的表将显示水平滚动条:

添加一个容器元素(如<div>),在<table>元素里添加overflow-x:auto,以使其响应:

注意:在OS X Lion(在Mac上)中,滚动条在默认情况下是隐藏的,只有在使用时才会显示(即使设置了"overflow:scroll").

更多例子

这个例子演示了如何创建一张漂亮的表.

此示例演示如何设置表标题的位置.

CSS表属性