上一节:
下一节:

  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;
           }
    尝试一下

  • 表宽度和高度

    表的宽度和高度由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样式
上一节:
下一节: