CSS 构造表格

表格边框

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

CSS 构造表格
<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>
CSS 构造表格

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

CSS 构造表格
<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>
CSS 构造表格

 

 

 

 

表格宽度和高度

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

CSS 构造表格
<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>
CSS 构造表格

 

 

 

 

表格文本对齐

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

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

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

CSS 构造表格
<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>
CSS 构造表格

 

 

 

表格颜色

CSS 构造表格
<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>
CSS 构造表格

 

 

 

表格内边距

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

CSS 构造表格
<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 构造表格

 

 

 

 

 

 

 

CSS 控制Table的其他属性

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

CSS 构造表格
<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>
CSS 构造表格

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

top 默认值。把表格标题定位在表格之上。
bottom 把表格标题定位在表格之下。
inherit 规定应该从父元素继承 caption-side 属性的值。
CSS 构造表格
<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>
CSS 构造表格

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

hide 不在空单元格周围绘制边框。
show 在空单元格周围绘制边框。默认。
inherit 规定应该从父元素继承 empty-cells 属性的值。
CSS 构造表格
<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>
CSS 构造表格

 

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

automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值。
CSS 构造表格
<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>
CSS 构造表格

 

 

 

案例:

 

CSS 构造表格,布布扣,bubuko.com

CSS 构造表格

上一篇:Android:activity跳转过渡效果


下一篇:Extjs4对Model定义相关的校验内容