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>

案例：

CSS 构造表格的更多相关文章

25 ,CSS 构造表格
1. 表格的基础构造 2. 边距和边线应用 3. 隐藏和删除应用 1. 简单表格 table { width:auto; border-collapse:collapse; margin-left: ...
CSS构造表格
表格的基础构造边距和边线应用隐藏和删除应用简单表格 table { width:auto; border-collapse:collapse;(把单元格空隙合并起来) m ...
CSS控制表格（table）样式
CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}
css构造块级元素
css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...
css构造文本
1. 1. 文本缩进text-indent:值:值为数字,最常用的数值单位是px(像素),也可以直接是百分比!text-indent:100px;text-indent:10%;2. 文本对齐text ...
四个好看的CSS样式表格
文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格和上面差点儿相 ...
常用的四种CSS样式表格
1. 单像素边框CSS表格这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...
24, CSS 构造超链接
1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; Text-d ...
23 , CSS 构造列表与导航
1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...

随机推荐

JPA之@Entity、@Table、@Column、@Id
Java Persistence API定义了一种定义,可以将常规的普通Java对象(有时被称作POJO)映射到数据库.这些普通Java对象被称作Entity Bean.除了是用Java Persis ...
下拉框多选实现回显及sql
<td class="tabTd"><label>客户来源:</label></td> <td><select c ...
Jquery 筛选选择器
筛选选择器(方法) 既然是方法那就应该对象调用 obj.metch(); $(“.dd”).children("ul"),show(); //找到.dd下 ...
Java多线程学习之线程的取消与中断机制
任务和线程的启动很容易.在大多数情况下我们都会让他们运行直到结束,或是让他们自行停止.但是,有时我们希望提前结束任务或是线程,可能是因为用户请求取消,或是线程在规定时间内没有结束,或是出现了一些问题迫 ...
Docker 更改镜像存储位置
在使用 Docker 的过程中,如果我们一切都以默认的设置进行操作的话,在使用一段时间之后你应该会发现系统的根目录空间越来越少,直到有一天发现空间都被占满了,最后发现原来是被 Docker 占用了.所 ...
升级cocoapods1.1.0版本遇到的坑
先容我吐槽两句, 最近写Swfit3.0, 要用到一些框架, 然后就用cocoapods嘛, 结果说要cocoapods1.1.0版本才行, 而自己的是cocoapods1.0.1版本的, 所以就想着 ...
PHPCMS V9标签循环嵌套调用数据的方法
PHPCMS V9的标签制作以灵活见长,可以自由DIY出个性的数据调用,对于制作有风格有创意的网站模板很好用,今天就介绍一个标签循环嵌套方法,可以实现对PC标签循环调用,代码如下: 在此文件里/php ...
php5.5过渡--mysql连接
以前: // $conn=mysql_connect("localhost","root","");// $db=mysql_select_ ...
GDAL线面互转换（2）
在上一个文章中介绍了线转化为面和面转化为线,其主要的实现思路就是把面中的点取出来构成线,把线中的点取出来构成面,实际上就是一个硬拷贝,无奈客户的实际需求并非如此,客户想要线转面的时候几条相交线构成面, ...
Modify Dokuwiki Email Template 修改 Dokuwiki 邮件模板
Email Notification Templates There are two places to modify 1) log in as Admin -> configuration ...