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

Css基本样式————表格

简介:
+关注继续查看

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中,我们可以使用caption-side属性来定义表格标题的位置 caption-side属性取值只有2个:
0 0
HTML5 + CSS3 列表 表格 媒体元素学习笔记(四)
HTML5 + CSS3 列表 表格 媒体元素学习笔记(四)
0 0
CSS 表格| 学习笔记
快速学习 CSS 表格。
0 0
CSS 属性_列表、表格 | 学习笔记
快速学习 CSS 属性_列表、表格
0 0
Web前端开发笔记——第三章 CSS语言 第四节 CSS列表、表格样式
Web前端开发笔记——第三章 CSS语言 第四节 CSS列表、表格样式
0 0
通过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
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载