CSS 表格
-
表边框
要在CSS中指定表格边框,请使用border属性。下面的示例为<table>,<th>和>td>元素指定了黑色边框:
尝试一下<table> <tr> <th>姓氏</th> <th>名字</th> </tr> <tr> <td>张</td> <td>三</td> </tr> <tr> <td>李</td> <td>四</td> </tr> </table>
-
-
表宽度和高度
表的宽度和高度由width和height属性定义。下面的示例将表的宽度设置为100%,将<th>元素的高度设置为50px:
尝试一下table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } th { height: 50px; }
-
水平对齐
text-align属性设置<th>或<td>中内容的水平对齐(如左,右或中心)。默认情况下,<th>元素的内容是居中对齐的,<td>元素的内容是左对齐的。以下示例左对齐<th>元素中的文本:
尝试一下table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } th { text-align: left; }
-
垂直对齐
vertical-align属性设置<th>或<td>中内容的垂直对齐方式(如顶部,底部或中间)。默认情况下,表中内容的垂直对齐方式是中间的(对于<th>和<td>元素)。以下示例将<td>元素的垂直文本对齐方式设置为底部:
尝试一下table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } td { height: 50px; vertical-align: bottom; }
-
表填充
要控制边框与表中内容之间的空间,请使用<td>和<th>元素上的padding属性:
尝试一下table, td, th { border: 1px solid #ddd; text-align: left; } table { border-collapse: collapse; width: 100%; } th, td { padding: 15px; }
-
水平分隔线
border-bottom属性添加到<th>和<td>以获取水平分隔符:
尝试一下ol { background: #ff9999; padding: 20px; } ul { background: #3399ff; padding: 20px; } ol li { background: #ffe5e5; padding: 5px; margin-left: 35px; } ul li { background: #cce5ff; margin: 5px; }
-
可悬停表
<tr>上使用:hover的选择器突出显示鼠标上的表行:
尝试一下ol { background: #ff9999; padding: 20px; } ul { background: #3399ff; padding: 20px; } ol li { background: #ffe5e5; padding: 5px; margin-left: 35px; } ul li { background: #cce5ff; margin: 5px; }
-
条纹表
对于斑马条纹表,使用nth-child()选择器,并为所有偶数(或奇数)表行添加background-color:
尝试一下table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) {background-color: #f2f2f2;}
-
表颜色
以下示例指定<th>元素的背景颜色和文本颜色:
尝试一下table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even){background-color: #f2f2f2} th { background-color: #4CAF50; color: white; }
-
响应表
如果屏幕太小而无法显示完整内容,则响应表将显示水平滚动条:overflow-x:auto在<table>元素周围添加一个容器元素(如<div>)以使其响应:
尝试一下table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) {background-color: #f2f2f2;}
注意:在OS X Lion(在Mac上),默认情况下隐藏滚动条,仅在使用时显示(即使设置了“overflow:scroll”)。
-
所有CSS表格属性
属性 描述 border 在一个声明中设置所有边界属性 border-collapse 指定是否应该折叠表边界 border-spacing 指定相邻单元格边界之间的距离 caption-side 指定表标题的位置 empty-cells 指定是否在表中的空单元格上显示边框和背景 table-layout 设置要用于表的布局算法 -
相关页面
HTML教程:HTML样式