CSS入门教程
CSS入门教程
    • 请登录查看
    阅读(3163)

    CSS 表格

    最后一次修改 2017年08月04日


    HTML表用于在表格中布置表格数据。使用CSS，我们可以通过添加边框，控制表单元格文本对齐，高亮表行等样式HTML表。

    表格边框

    我们可以使用border属性为表，表行和表单元格添加边框。

    table, th, td {   border: 1px solid black;
}
    <!DOCTYPE html>
<html>
<head>
<style>table, th, td {<!--  www.html.cn-->    border: 1px solid black;
}
</style>
</head>
<body>
    <table>
      <tr><th>Value</th><th>Item</th></tr>
      <tr><td>CSS</td><td>Style</td></tr>
      <tr><td>HTML</td><td>Structure</td></tr>
    </table>
</body>
</html>


    表边框折叠

    border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

    其可能的值是折叠或单独。

    浏览器在表格周围绘制边框加上每个单元格周围的边框，创建双边框效果。您可以通过应用border-collapse属性解决此问题。

    以下代码使用border-collapse属性。

    <!DOCTYPE HTML>
<html>
<head>
<style>table  {<!--from   www.html.cn-->    
border-collapse: collapse;
}th,  td {    padding: 2px;
}
</style>
</head>
<body>
    <table  border="1">
        <caption>Results of Survey</caption>
        <colgroup id="colgroup1">
            <col  id="col1And2" span="2"/>
            <col  id="col3"/>
        </colgroup>
        <colgroup id="colgroup2"  span="2"/>
        <thead>
            <tr>
            <th>Rank</th>
            <th>Name</th>
            <th>Color</th>
            <th colspan="2">Size</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Favorite:</th>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>500</td>
            </tr>
            <tr>
            <th>2nd Favorite:</th>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="5">© 2011 www.html.cn Data Enterprises</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

    点击查看演示

    折叠值告诉浏览器您不想在相邻元素的每个边上绘制边框。

    例子：

    以下代码显示如何比较单独和折叠表边框。

    <html>
<body>
  <table id="myTable" border="1" style="border-collapse: collapse">
    <tr>
      <td>column 1</td>
      <td>column 2</td>
      <td>column 3</td>
    </tr><!-- www.html.cn-->
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
    </tr>
  </table>
  <button onclick="myTable.style.borderCollapse='separate'">separate</button>
  <button onclick="myTable.style.borderCollapse='collapse'">collapse</button>
</body>
</html>


    表宽度和高度

    width和height属性控制表的宽度和高度。

    下面的示例将表的宽度设置为100％，th元素的高度设置为50px：

    table {    width: 100%;
}th {    height: 50px;
}

    表文本对齐

    text-align和vertical-align属性控制表中的文本对齐。

    text-align属性设置水平对齐方式，如left，right或center。

    vertical-align属性设置垂直对齐方式，如顶部，中间或底部。

    td {    text-align: right;    vertical-align: bottom;
}

    ← CSS 列表
    没有了 →
    提交