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

随机推荐

如何移动 nuget 缓存文件夹
本文告诉大家如何移动 nuget 缓存文件夹. 因为 nuget 文件夹一般比较大,现在我的 nuget 文件夹有 10 G,默认的 nuget 文件夹是在C盘,所以需要移动他. 可以使用下面的代码查 ...
JQuery判断浏览器类型（IE, Firefox…）
1 2 3 4 5 6 7 8 9 10 11 $(function() { if ($.browser.msie) { alert("这是一个IE浏览器&q ...
Code Signal_练习题_isLucky
Ticket numbers usually consist of an even number of digits. A ticket number is considered lucky if t ...
洛谷P3437 [POI2006]TET-Tetris 3D(二维线段树标记永久化)
题意题目链接 Sol 二维线段树空间复杂度是多少啊qwqqq 为啥这题全网空间都是$n^2$还有人硬要说是$nlog^2n$呀.. 对于这题来说,因为有修改操作,我们需要在外层线段树上也打标 ...
vue 面试时需要准备的知识点
前端火热的框架层出不穷,作为码农的我们,依旧需要去学习,去探索新的问题,学习新技术,其实就是为了写一手好的,自认为是高质量的代码.今天主要分享一下前端最火的框架vue,也是我比较喜欢的框架. vue上 ...
报错”Cannot read property 'addEventListener' of null“
1.报错:Cannot read property 'addEventListener' of null 2.解决方案: 把代码放到window.onload=function(){...}里面,因为 ...
Ｕbuntu下编译opencv 和Ubuntu使用ffmpeg实现音频、视频的抽取
一.使用Ubuntu编译opencv (前提是Ubuntu内已经正确配置了opencv,个人采用opencv3.2) g++ 1.cpp -o 1 `pkg-config --cflags --lib ...
润乾V4报表放入WEBINF保护目录下如何实现
润乾报表放入WEBINF保护目录下如何实现 WEB-INF下面的文件都是受保护的,客户为了保护项目的文件不受到非法的访问,jsp页面都放在WEB-INF下,那润乾报表放入WEB-INF保护目录下 ...
HTTP请求封装：Ajax与RESTful API
一.HTTP请求 HTTP即超文本传输协议,用以进行HTML 文件. 图片文件. 查询结果等的网络传输. 一个完整的HTTP请求包括:请求行.请求头.空行和请求数据(请求数据可以为空) HTTP1.1 ...
3org.springframework.beans.factory.BeanDefinitionStoreException异常
1.下面是我遇到的异常信息: 2017-03-25 18:01:11,322 [localhost-startStop-1][org.springframework.web.context.Conte ...