开发者社区> 科技小能手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Css基本样式————表格

2017-11-12 809

简介：
+关注继续查看

a.Css表格属性可以帮助我们极大地改善表格的外观

b.表格边框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
</table>

这样可以生成一个没有边框效果的表格

此时可以给表格添加一个边框

1
<table border = "1">

但是这种写法并不能应用于所有的table当中

因此可以选择使用Css样式作为一种更好的方式

1
2
3
4
<table id="tb">
#tb{
    border: 1px solid blue;
}

这时可以看到表格最外层的蓝色的外边框

可以设置表格内部：

1
2
3
#tb,tr,th,td{
    border: 1px solid blue;
}

这里用到了分组选择器。即一个id选择器和3个元素选择器组合在一起，之间用逗号隔开


c.折叠边框

在上面的表格中显示的是双边框

这样显然是不合理的

可以把双边框合成一条线

1
2
3
4
#tb,tr,th,td{
    border: 1px solid blue;
    border-collapse: collapse;
}


d.表格宽高

1
2
3
4
5
6
7
8
#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
}


e.表格文本对齐

1
2
3
4
5
6
7
8
9
#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
    text-align:center;
}


f.表格内边距

g.表格颜色

1
2
3
4
5
6
7
8
9
10
#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
    text-align:center;
    background-color: aqua;
}


本文转自yeleven 51CTO博客，原文链接:http://blog.51cto.com/11317783/1771981

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

前端开发
CSS表格 CSS样式 CSS基本样式表格
开发者社区 > 开发与运维 > 文章
云迁移中心
作者高分内容
更多
关于nginx keep-alive 参数的验证和心得 5015 python之文件的复制 5532 ntop的简单安装、配置及与cacti的整合 4086 expdp+compression性能测试 4074 CentOS通过DNSpod实现动态域名 8918
相关文章
dahezhiquan
CSS表格样式详解
默认情况下，表格标题在表格的上方。如果想要把表格标题放在表格的下方，应该怎么实现？ 在CSS中，我们可以使用caption-side属性来定义表格标题的位置 caption-side属性取值只有2个：
0 0
陈丹宇jmu
HTML5 + CSS3 列表 表格 媒体元素学习笔记（四）
HTML5 + CSS3 列表 表格 媒体元素学习笔记（四）
0 0
ftw2fzqaoykua
CSS 表格| 学习笔记
快速学习 CSS 表格。
0 0
bqospzg5rfs7g
CSS 属性_列表、表格 | 学习笔记
快速学习 CSS 属性_列表、表格
0 0
游客5pa3gelrqbo2g
Web前端开发笔记——第三章 CSS语言 第四节 CSS列表、表格样式
Web前端开发笔记——第三章 CSS语言 第四节 CSS列表、表格样式
0 0
hxyzvw3onrkfg
通过CSS，H5，JavaScript实现表格表单的随机选择，和简单的随机点名
学习通过CSS,H5,JavaScript实现表格表单的随机选择，和简单的随机点名。
0 0
国民机智小淘气
HTML+CSS制作可以自适应的数据表格
HTML+CSS制作可以自适应的数据表格
0 0
天行无忌
CSS实战 | 磁性页头和页脚的表格制作
表格，是用来展示记录集常用的标签，现如今各种终端设备，大分辨率、小分辨率等等，让表格展现数据变得不那么直观，如表头被滚动条操作移除可视范围导致查看数据不够友好。说到表格数据查看的方便性，大家首先想到的应该是Excel。没错，这里跟大家分享一个操作便捷且直观的响应式表格制作方式，以后在项目中或许能够用上，当然现在很多框架都实现了这样的效果。
0 0
张起灵-小哥
web前端学习（十八）——CSS3表格属性（table）的相关设置
web前端学习（十八）——CSS3表格属性（table）的相关设置
0 0
前端歌谣
html+css实战28-表格标题和表头单元格
html+css实战28-表格标题和表头单元格
0 0
+关注
科技小能手
文章
问答
作者高分内容
更多
关于nginx keep-alive 参数的验证和心得 5015 python之文件的复制 5532 ntop的简单安装、配置及与cacti的整合 4086 expdp+compression性能测试 4074 CentOS通过DNSpod实现动态域名 8918
文章排行榜
最热
最新
1 承上启下：基于全域漏斗分析的主搜深度统一粗排 91584
2 复杂链表的复制 90674
3 【Transform3D】转换详解（看完就会） 88227
4 MySQL大表历史数据迁移 72302
5 【flexbox弹性布局学习指南】CSS热门布局方案 68885
6 如何构建标签画像工程体系及实现方案 63427
7 DCM：中间件家族迎来新成员 61178
8 系统的混乱并业务本身之复杂，我们并不擅长处理『简单』 48294
9 超越10倍开发者 48168
10 ⚡Three.js-在场景中导入3D动画模型 46144
11 【从零开始学习深度学习】12. 什么是模型的训练误差？基于三阶多项式的欠拟合与过拟合训练过程演示 27908
12 记录下考Apsara Clouder云计算专项技能认证：云服务器ECS入门过程 22410
13 ChatGPT 常见错误原因及解决方案：报错、回答不完整等 22867
14 学生速看！免费领取阿里云云服务器的详细攻略 5278
15 Python3，9行代码，对比两个Excel数据差异，并把差异结果重新保存。 9195
16 深聊性能测试，从入门到放弃之： Windows系统性能监控(一) 性能监视器介绍及使用。 10188
17 Python3，区区10行代码，批量把图片插入Excel指定单元格中，省下时间去烫头发。 4046
18 Python3，区区9行代码批量提取PDF文件的指定内容，我被震惊了.... 5895
19 Python3，os模块还可以这样玩，自动删除磁盘文件，非必要切勿操作。 11527
20 阿里云服务器价格表，阿里云服务器购买价格出炉（2023更新） 3044
1 人脸活体检测初体验 225
2 程序员必备的数据库知识：数据存储结构 64
3 2023华数杯B题社会稳定预警研究的材料支撑以及解题思路【全网独家社会稳定预警研究材料支撑】 63
4 YOLO涨点Trick | 超越CIOU/SIOU，Wise-IOU让Yolov7再涨1.5个点！ 52
5 Java编程技巧之单元测试用例简化方法 89
6 那些年，我们写过的无效单元测试 66
7 语雀 130
8 基于 Flink+Pravega 的游戏服务器监控与调节系统设计 59
9 计算机视觉-计算机视觉入坑(一)：计算机视觉入坑前的信息采集和了解 54
10 2023 年推荐这 10 个开发者工具 81
11 如何选择离线数据集成方案-全量&增量 117
12 ＜＜ Java ＞＞ String类详解 55
13 云时代，好用的数据迁移方案推荐 181
14 浅谈智能语音交互 145
15 数据仓库建设规范 51
16 Mysql深入优化（三） --- 查询缓存优化、内存管理及优化、MySQL锁问题 79
17 HTTP的基础知识和DNS的解析过程 65
18 大数据知识面试题-Hive 74
19 GitHub push失败-Failed to connect to github.com port 443: Timed out 52
20 【分享】宜搭集成自动化，Groovy节点一般用法，解析JSON数据 121
相关课程
更多
前端开发CSS基础
4128
21
去学习
零基础学前端HTML+CSS
8701
57
去学习
CSS 快速掌握
18793
49
去学习
推荐文章
2022藏经阁年度电子书榜单出炉！ 参与应用引擎 SAE评测，赢取CHERRY机械键盘等好礼 “第益课”大学生技术公益 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师（初级）实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载