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 构造表格,布布扣,bubuko.com

时间： 2024-07-29 20:13:40

CSS 构造表格的相关文章

CSS构造表格

表格的基础构造 边距和边线应用 隐藏和删除应用 简单表格 table { ????width:auto; ????border-collapse:collapse;(把单元格空隙合并起来) ????margin-left:20px; ????border:1px solid black; } td,th { ????width:50px; ????border:1px solid black; ????padding:5px; ????background:gold; ????text-alig

四个好看的CSS样式表格

文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相同,只是每一个格子里多了背景图. cell-blue.jpg cell-grey.jpg 1. 下载上面两张图,命名为cell-blue.jpg和cell-grey.jpg 2. 拷贝以下的代码到你想要的地方,记得改动图片url 3. 自己主动换整行颜色的CSS样式表格(须要用到JS) 这个CSS样

css 构造文本

css 构造文本 1. 首行缩进 text-indent :20px;  2em; 10% 2. 文本对齐 text-align : left, right ,center , 3. 文本行高 line-height 4. 字间隔 word-spacing 5. 字母间隔 letter-spacing 6. 文本修饰 text-decoration : underline, overline ,lint-through 7. 字体 font-family 8. 字体大小 font-size 9.

常用的四种CSS样式表格

1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } table.gridtable th {

用div css模拟表格对角线

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>用div css模拟表格对角线</t

CSS控制表格嵌套

1. [图片] table.jpg ?2. [代码]用CSS处理表格嵌套完整代码 <style type="text/css">.form-table{    border-collapse:collapse;    border-spacing:0px;    border-style:solid solid solid solid;    border-width:1px;    border-color:#000000;}.form-table table{    b

纯CSS构造树状结构图

<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯CSS构造树状结构图</title> </head> <body> <div style="width:380px; height:600px; border:1px dashed gray; margin:30px auto; text-align:ce

【转载】用div+css模拟表格对角线

本文引用蓝色理想论坛. 首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见的作法是用图片的方式来处理,还有就是用vml来画对角线,能不能用html+css方式来实现呢?答案是肯定的,下面我们来摸拟一个表格对角线. 原理: 用边框线来摸拟斜线,我们知道,如果将一个DIV的边框线设置得足够宽并定义了不同的颜色时,其相邻的两条边框线交界处就是斜线.知道了

23 , CSS 构造列表与导航

1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: 0; Padding:0; Width: 200px; List-style-image:url(images/list.gif); Line-height: 150%; } 3. 以背景图片作为项目列表图标 Ul { List-style-type:none; } Li { Background: