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数据导入导出问题
sqlserver,如果用结果另存为,导出txt数据,然后在导入数据库,有时候会出问题,很难解决. 但是全选,右击,复制到自己创建的txt里面,在导入数据,就不会有问题的. 神奇,不知道为什么,但是能 ...
Node.js学习笔记(八) --- Node.js的路由模块封装
1 .模块化的方式封装整理中… 2 .封装仿照 express 的路由整理中…
GDC NEC单机自动化设置
GDC NEC 单机自动化设置进入播放列表进入设置,进入登陆,请选择维修员登陆,输入密码257910 选择“一般选项”中的“自动化” 在进入的新菜单中选择“设备”,添加一个新的名称,默认的 ...
【转】从msql数据库处理高并发商品超卖
今天王总又给我们上了一课,其实mysql处理高并发,防止库存超卖的问题,在去年的时候,王总已经提过:但是很可惜,即使当时大家都听懂了,但是在现实开发中,还是没这方面的意识.今天就我的一些理解,整理一下 ...
插入sql返回主键id
<insert id="insertSelective" parameterType="com.xxx.model.XDetail" useGenerat ...
logback和slf4j的使用之logger使用
原文:https://blog.csdn.net/cw_hello1/article/details/51923814 一.logger标签描述:(了解logger标签之前先看看两个重要概念) 1.主 ...
Java虚拟机基础知识你知道多少？
http://www.cnblogs.com/qlky/p/7401841.html java虚拟机结构 http://liuwangshu.cn/java/jvm/1-runtime-data-ar ...
kubernetes学习资源
参考文章: 1.kubernetes学习资源 1. <Kubernetes与云原生应用>系列之Kubernetes的系统架构与设计理念 2.[docker专业介绍的网站dockerinfo ...
K8S基础概念
一.核心概念 1.Node Node作为集群中的工作节点,运行真正的应用程序,在Node上Kubernetes管理的最小运行单元是Pod.Node上运行着Kubernetes的Kubelet.kube ...
spring AOP 动态代理和静态代理以及事务
AOP(Aspect Oriented Programming),即面向切面编程 AOP技术,它利用一种称为"横切"的技术,剖解开封装的对象内部,并将那些影响了多个类的公共行为封装 ...