CSS 构造表格

最新推荐文章于 2023-10-09 09:49:31 发布
最新推荐文章于 2023-10-09 09:49:31 发布
阅读量91 收藏
点赞数
原文链接：http://www.cnblogs.com/LO-ME/p/3616855.html
版权

表格边框

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>

 

 

 

案例：

 

转载于:https://www.cnblogs.com/LO-ME/p/3616855.html

dbp5156
关注
python如何解析css样式
zhangzhechun的专栏
07-24 504
与其他 CSS 解析库相比，tinycss2 具有更快的解析速度和更低的内存占用，同时支持 CSS3 和 CSS4 标准中的大多数特性。需要注意的是，tinycss2 库虽然支持大多数 CSS3 和 CSS4 标准中的特性，但仍有一些未实现的功能，例如某些伪元素和伪类。该代码使用 parse_stylesheet() 函数解析 CSS 样式表，并遍历解析结果打印出每个选择器和声明的内容。该代码使用 parse_declaration_list() 函数解析 CSS 声明列表，并打印出每个声明的名称和值。
CSS 表格常识（一）
怀公子的博客
01-03 917
表格边框 如需在 CSS 中设置表格边框，请使用 border 属性。 下面的例子为 table、th 以及 td 设置了蓝色边框： table, th, td { border: 1px solid blue; } 请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。 如果需要把表格显示为单线条边框，请使用 border-c...
CSS——表格结构
mintsolace的博客
04-05 995
使用表格布局时，可将表格划分为头部、主体和页脚（页脚有兼容性问题）。 创建表格的基本格式： <table> <tr> <td>单元格内的文字</td> … </tr> … </table> table用于定义一个表格。 tr用于定义表格中的一行，必须嵌套在table标签中，在table中包含几对tr，就有几...
css构造表格
01-16 229
css构造表格 table { /* border-collapse:separate|collapse 设置或检索表格的行和单元格的边是否合并在一起 还是按照标准的HTML样式分开。 separate : 默认值。边框独立(标准HTML) collapse : 相邻边被合并
CSS表格
bwf_erg的博客
05-02 751
表格采用行列格式的简单结构，以及生活中广泛应用，对于他的理解和代码编写都很方便。表格的每行的列数通常一致，同行单元格高度一致且水平对齐，同列单元格宽度一致并且垂直对齐。这种严格的约束成了一个不易变形的矩形盒子结构，堆叠排列起来结构很稳定。 一、 表格的基本结构   1，单元格 单元格为表格的最小单位，一个或者多个单元格纵横排列组成表格。 2，表格行 一个或者多个单元格横向堆叠形成行
25 ,CSS 构造表格
lzjgame的博客
03-31 156
表格的基础构造 边距和边线应用 隐藏和删除应用 简单表格 table { width:auto; border-collapse:collapse; margin-left:20px; border:1px solid black; } td,th { width:50px; border:1px solid black; padding:5px; background:gol...
CSS 之 table 表格布局
热门推荐
weixin_45092437的博客
10-09 1万+
除了使用HTML的table元素外，我们还可以通过display: table/inline-table;设置元素内部的布局类型为表格布局。并结合table-cell、table-row等相关CSS属性值可以实现HTML中table系列元素的效果，具有表头、表尾、行、单元格等概念，让元素以表格的形式进行布局。
DIV+CSS+JS在HTML页面制作表格的思想
weixin_40726526的博客
04-13 1964
DIV+CSS+JS在HTML页面制作表格的思想 1.介绍 在如今的前后端分离的开发当中，前端页面技术要求也越来越高了。 因此就在这对自己对前端技术的理解做个简单的整理，方便日后查阅。本文章主要是介绍了如何制作表格的思想。阅读这文章，至少得了解div标签的特性，特别是可以抽象理解div标签的——块思想。还有选择器的知识也是很重要。 2.表格的结构拆分 首先，我的认为。一张基本的表格主要有俩个...
使用Layui动态构造表格数据
无
06-17 1025
使用Layui动态构造表格数据 如何根据服务端返回的数据动态的显示按钮 javax.el.PropertyNotFoundException: 类型[com.demo.entity.XXX]上找不到属性[YYY] Layui的table的返回json格式是什么
H5表格标准结构
cuyanmai2368的博客
11-23 442
文本元素 name sex 张三 男 统计：共一人
HTML之完整的table结构
皮一下很开心的猴头
07-30 7983
&lt;table border="1" cellpadding="0" cellspacing="0" width="200"&gt; &lt;thead&gt; &lt;tr style="background-color: gray;"&gt; &lt;th&gt;Month&lt;/th&g
html的表格结构以及如何使用CSS控制表格的样式/学习笔记
No1banana的博客
02-10 1338
了解表格结构标签的用法，能够使表给结构标签进行网页布局 一、表格的结构 表格的划分： 头部：定义表格的头部，包含网页logo和导航等信息<thead></thead> 主体：定义表格的主体，包含网页的主要内容<tbody></tbody> 页脚：定义表格的页脚，包含网页中底部的企业、日期等信息<tfoot></tfoot> 以上的标签都要写在<table>表格标签内。 注意事项 1、一个table表格只能定义一对&lt.
css2: 详解css的表格
qq_59076775的博客
10-19 749
一.定义css中的表格元素有那些 1.table 作用范围：定义一个大表格 2.thead 作用:为了更更好的区分结构，列如th 3.tbody 作用:为了更更好的区分结构，列如td 4.tofoot 作用:为了更好的区分结构 5.tr 作用:表示表格中的行 6.th 作用:表格中的表头,能使字体加粗,还能够居中 7.td 作用：表示一个单元格； 图片详解: 二,表格中的一些css修饰 1.合并边框 表格边框合并属性(border-collapse)用来定...
CSS表格及表单美化
Super_Robot的博客
06-09 8621
CSS表格及表单美化 有效的传递页面信息 使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户 可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容 具有良好的用户体验 <span> 标签的作用 能让某几个文字或者某个词语凸显出来 <span>字体</span> <p>凸显<span class="show">“字体”&l...
CSS笔记（美化表格）
APieceOfBullshit
02-08 1264
一、表格的基本结构 表格由行、列、单元格三部分组成，单元格是行与列交叉的部分，可以拆分和合并。 表格&lt;table&gt;，行&lt;tr&gt;，单元格&lt;td&gt; 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。 1、标准化的表格结构 *&lt;table&gt;定义表格 *&lt;caption&gt;定义表格标题&lt;caption&gt;必须紧随&l...
CSS（引入方式、选择器）基础知识
weixin_72553821的博客
07-14 285
全面的CSS、引入方式、选择器的基础知识
写一个Java挂机小游戏，测试华为互联网平台的功能。.zip
最新发布
11-05
本资源为Java挂机小游戏项目源码，旨在帮助初学者学习编程并测试华为互联网平台功能。通过编写和运行这个小游戏，用户可以掌握Java基础语法、面向对象编程、事件处理等基本概念，同时了解如何与华为云服务进行集成。项目包含详细的代码结构和注释，适合作为课程设计或毕业设计的参考材料，也可作为初学者的练手项目。请注意，该资源仅供学习使用，不得用于商业用途。
李炎恢讲解CSS构建精美表单与布局技巧
本资源是一份由李炎恢主讲的PHP100视频教程，专注于第26章CSS构造表单，共四页内容。在讲解中，主要涉及以下几个关键知识点： 1. **表单标签使用**： 学习者将掌握如何在HTML中应用`<label>`元素与`<input>`标签...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值