上一节:
下一节:

  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>
    尝试一下
    请注意,上例中的表具有双边框。这是因为表和<th>和<td>元素都有单独的边框。
  • 折叠表边框

    border-collapse属性设置是否应将表格边框折叠为单个边框:
    table {
                 border-collapse: collapse;
               }
    
               table, td, th {
                 border: 1px solid black;
               }
    尝试一下
    如果您只想要围绕表格的边框,只需指定<table>的border属性:
    table {
                 border-collapse: collapse;
                 border: 1px solid black;
               }
    尝试一下
  • 表宽度和高度

    表的宽度和高度由widthheight属性定义。下面的示例将表的宽度设置为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样式
上一节:
下一节: