编程教程

　　 编程问答　 ACM与蓝桥杯竞赛入门　 C语言教程　 C++教程　 数据结构教程　 Python教程　 JAVA教程　 编译器教程　 C语言函数库　 更多教程
  1. 首页
  2. 教程
  3. CSS教程
  4. CSS语法

CSS表格（table）

111951 阅读 0 评论

在网页中我们通常使用表格来展示一些数据，例如成绩表、财务报表等，但是默认情况下表格的样式并不美观，甚至不符合页面的风格。CSS 中提供了一些属性，通过这些属性您可以修改表格的样式，大大改善表格的外观。


1. HTML表格边框

在HTML教程部分，我们曾经使用border属性设定表格，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table border="1">
        <thead>
            <th>姓名</th>
            <th>性别</th>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
            </tr>
        </tbody>
    </table>

运行结果：

HTML表格边框

其实这种方式，是不推荐使用的。因为网页设计遵循的原则，还是HTML表示内容，而CSS进行样式描述。

对于表格来说，表格的内容就是行列里的文字，而边框属于对表格外观的美化，属于样式部分，所以更适合用CSS描述。


2. CSS设定表格边框

可以利用CSS的border来为表格设定边框，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            border-collapse: separate;
        }
        .table_two {
            margin-left: 20px;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html>

运行结果如下：

CSS设定表格边框

（1）table-layout：设置表格的布局算法，布局算法有两种，分别为固定表格布局算法和自动表格布局算法；

（2）border-collapse：设置表格中单元格的边框是合并在一起还是按照标准的 HTML 样式分开；

（3）border-spacing：设置当表格边框分开时，相邻两个边框在横向和纵向上的间距；

（4）caption-side：设置表格标题相对于表格的位置；

（5）empty-cells：设置当表格的单元格中没有内容时，是否显示该单元格的边框。

点赞(187)

C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程，并配有习题和答疑，点击了解：

一点编程也不会写的：零基础C语言学练课程

解决困扰你多年的C语言疑难杂症特性的C语言进阶课程

从零到写出一个爬虫的Python编程课程

只会语法写不出代码？手把手带你写100个编程真题的编程百练课程

信息学奥赛或C++选手的 必学C++课程

蓝桥杯ACM、信息学奥赛的必学课程：算法竞赛课入门课程

手把手讲解近五年真题的蓝桥杯辅导课程

其他教程

Java常见的异常

枚举算法的思想与实例讲解

wxPython(5)-事件管理

域名和主机的选择

编程命名规范之下划线命名法

C语言tmpnam()函数:创建一个唯一的文件名

结合实例浅析构造题型

DataInputStream和DataOutputStream类的常用方法有哪些？

C语言实现彩色贪吃蛇游戏教程及源码

微调定时精确时间

Java实例变量和类变量

Python控制结构详解

归并排序算法实例详解

C语言数组与指针的区别与联系

回文树/回文自动机 (PAM) 实现及模板

打开文件fopen函数的用法

C语言sqrt()函数:计算一个非负实数的平方根

Python文件操作

常用的元字符及其在正则表达式中的写法

什么是栈溢出？

Dotcpp在线编译　 　　　 （登录可减少运行等待时间） 
#include<stdio.h>
int main()
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX