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: ...

随机推荐

sqlserver中调用服务器中的webservice接口
declare @ServiceUrl as varchar(1000) declare @UrlAddress varchar(500)--WebService地址:以http开头,结尾带斜杠,例如 ...
用fullPage来实现全屏滚动效果
[注意]所有的page要用div包裹,id为fullpage.不能直接包在body中 [使用fullpage的步骤] 1.导入 JQuery.js,fullpage.js,fullpage.css ...
Vuejs中slot实现自定义组件header、footer等
Vuejs中slot实现自定义组件header.footer等 vue中的slot主要负责内容分发,之前有介绍过slot的内容,具体链接:http://www.cnblogs.com/vipzhou/ ...
google vue开发调试插件，简便安装，亲测可用
前言:开发vue项目,使用谷歌浏览器,不得不使用调试插件便于调试插件地址如下: 链接:https://pan.baidu.com/s/159HqJMeFSF-w5z-tMi7drw 密码:ueez ...
Windows上只复制目录结构不复制文件
xcopy /T /E D:\filetest\FB\BK\bs\ D:\filetest\asdf
常用数据库validationQuery语句
validationQuery是用来验证数据库连接的查询语句,这个查询语句必须是至少返回一条数据的SELECT语句.每种数据库都有各自的验证语句,下表中收集了几种常见数据库的validationQue ...
marquee 标签的使用介绍
marquee 实现滚动效果(创建滚动的文本字幕) 1.marquee 支持的属性: (1).behavior设置滚动方式: <marquee behavior="alternate& ...
CentOS7系列--1.3CentOS7用户管理
CentOS7用户管理 1. 添加用户 [root@centos7 ~]# useradd jack [root@centos7 ~]# passwd jack Changing password f ...
sql in interview for a job
1.mysql下建表及插入数据 /* Navicat MySQL Data Transfer Source Server : mysql Source Server Version : 50640 S ...
statsmodels中的summary解读(以linear regression模型为例)
https://datatofish.com/statsmodels-linear-regression/ https://blog.datarobot.com/ordinary-least-squa ...