CSS 构造表格

表格边框

CSS 中设置表格边框，请使用 border 属性:

<style type="text/css">
    table{
        border:1px solid red;
    }
    th,td{
            border:1px solid red;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>描述</th>
        </tr>
        <tr>
            <td>小白</td>
            <td>小白是个猥琐但不下流的人</td>
        </tr>
         <tr>
            <td>小黑</td>
            <td>小白是个下流但不猥琐的人</td>
        </tr>
         <tr>
            <td>小红</td>
            <td>小白是个好学但不下流的人</td>
        </tr>
    </table>
</body>

上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。如果需要把表格显示为单线条边框，请使用 border-collapse 属性。(细线表格)

<style type="text/css">
    table{
        border:1px solid red;
        border-collapse:collapse;/*该属性加在table中*/
    }
    th,td{
        border:1px solid red;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>描述</th>
        </tr>
        <tr>
            <td>小白</td>
            <td>小白是个猥琐但不下流的人</td>
        </tr>
         <tr>
            <td>小黑</td>
            <td>小白是个下流但不猥琐的人</td>
        </tr>
         <tr>
            <td>小红</td>
            <td>小白是个好学但不下流的人</td>
        </tr>
    </table>
</body>

表格宽度和高度

通过 width 和 height 属性定义表格的宽度和高度。

<style type="text/css">
    table{
        border:1px solid red;
        border-collapse:collapse;/*该属性加在table中*/
        width:100%;
    }
    th,td{
        border:1px solid red;
        height:50px;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
        </tr>
        <tr>
            <td>小白</td>
            <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
        </tr>
         <tr>
            <td>小黑</td>
            <td>小白是个下流但不猥琐的人</td>
        </tr>
         <tr>
            <td>小红</td>
            <td>小白是个好学但不下流的人</td>
        </tr>
    </table>
</body>

表格文本对齐

text-align 和 vertical-align 属性设置表格中文本的对齐方式。

text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：

vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：

<style type="text/css">
    table{
        border:1px solid red;
        border-collapse:collapse;/*该属性加在table中*/
        width:100%;
        text-align:center;
    }
    th,td{
        border:1px solid red;
        height:50px;
        vertical-align:bottom;/*设置在table中这个属性无效*/
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
        </tr>
        <tr>
            <td>小白</td>
            <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
        </tr>
         <tr>
            <td>小黑</td>
            <td>小白是个下流但不猥琐的人</td>
        </tr>
         <tr>
            <td>小红</td>
            <td>小白是个好学但不下流的人</td>
        </tr>
    </table>
</body>

表格颜色

<style type="text/css">
    table{
        border:1px solid red;
        border-collapse:collapse;/*该属性加在table中*/
        width:100%;
        text-align:center;
    }
    th,td{
        border:1px solid red;
        vertical-align:bottom;/*设置在table中这个属性无效*/
        background-color:#3F0;
        color:#000;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
        </tr>
        <tr>
            <td>小白</td>
            <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
        </tr>
         <tr>
            <td>小黑</td>
            <td>小白是个下流但不猥琐的人</td>
        </tr>
         <tr>
            <td>小红</td>
            <td>小白是个好学但不下流的人</td>
        </tr>
    </table>
</body>

表格内边距

控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：

<style type="text/css">
    table{
        border:1px solid red;
        border-collapse:collapse;/*该属性加在table中*/
        width:100%;
        text-align:center;
    }
    th,td{
        border:1px solid red;
        vertical-align:bottom;/*设置在table中这个属性无效*/
        padding:20px;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
        </tr>
        <tr>
            <td>小白</td>
            <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
        </tr>
         <tr>
            <td>小黑</td>
            <td>小白是个下流但不猥琐的人</td>
        </tr>
         <tr>
            <td>小红</td>
            <td>小白是个好学但不下流的人</td>
        </tr>
    </table>
</body>

CSS 控制Table的其他属性

border-spacing设置分隔单元格边框的距离。（如果使用border-collapse将边框合并了的话，该属性无效）

<style type="text/css">
    table{
        border:1px solid red;
        border-collapse:collapse;/*该属性加在table中*/
        width:100%;
        text-align:center;
        border-spacing:20px;/*如果将上面border-collapse才有效*/
    }
    th,td{
        border:1px solid red;
        vertical-align:bottom;/*设置在table中这个属性无效*/
        padding:20px;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
        </tr>
        <tr>
            <td>小白</td>
            <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
        </tr>
         <tr>
            <td>小黑</td>
            <td>小白是个下流但不猥琐的人</td>
        </tr>
         <tr>
            <td>小红</td>
            <td>小白是个好学但不下流的人</td>
        </tr>
    </table>
</body>

caption-side设置表格标题的位置。

top	默认值。把表格标题定位在表格之上。
bottom	把表格标题定位在表格之下。
inherit	规定应该从父元素继承 caption-side 属性的值。

<style type="text/css">
    table{
        border:1px solid red;
        border-collapse:collapse;/*该属性加在table中*/
        caption-side:bottom;/*将标题设置在表格的最下面*/
    }
    th,td{
        border:1px solid red;
        vertical-align:bottom;/*设置在table中这个属性无效*/
    }
</style>
</head>
<body>
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
        </tr>
        <tr>
            <td>小白</td>
            <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
        </tr>
         <tr>
            <td>小黑</td>
            <td>小白是个下流但不猥琐的人</td>
        </tr>
         <tr>
            <td>小红</td>
            <td>小白是个好学但不下流的人</td>
        </tr>
    </table>
</body>

empty-cells设置是否显示表格中的空单元格。

hide	不在空单元格周围绘制边框。
show	在空单元格周围绘制边框。默认。
inherit	规定应该从父元素继承 empty-cells 属性的值。

<style type="text/css">
    table{
        border:1px solid red;
        border-collapse:collapse;/*该属性加在table中*/
        empty-cells: hide;/*使用了该属性，在没有内容的单元格将不会显示，如果使用border-collapse合并了单元格，那么看起来这个单元格还是存在的，但实际单元格是不存在了*/
    }
    th,td{
        border:1px solid red;
        vertical-align:bottom;/*设置在table中这个属性无效*/
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
        </tr>
        <tr>
            <td>小白</td>
            <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
        </tr>
         <tr>
            <td>小黑</td>
            <td>小白是个下流但不猥琐的人</td>
        </tr>
         <tr>
            <td>小红</td>
            <td><!--这里是空的单元格，没有内容--></td>
        </tr>
    </table>
</body>

table-layout设置显示单元、行和列的算法。

automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

<style type="text/css">
    table{
        border:1px solid red;
        border-collapse:collapse;/*该属性加在table中*/
        width:200px;
        table-layout:auto;
    }
    th,td{
        border:1px solid red;
        vertical-align:bottom;/*设置在table中这个属性无效*/
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>描述</th><!--th中的文字在表格中会默认水平和垂直都居中-->
        </tr>
        <tr>
            <td>小白</td>
            <td>小白是个猥琐但不下流的人</td><!--td中的文字在表格中会默认垂直居中 水平不会默认居中-->
        </tr>
         <tr>
            <td>小黑</td>
            <td>小白是个下流但不猥琐的人</td>
        </tr>
         <tr>
            <td>小红</td>
            <td><!--这里是空的单元格，没有内容--></td>
        </tr>
    </table>
</body>

案例：