CSS Table属性

马黑黑

HTML5对表格标签大刀阔斧砍掉了几乎所有的属性，只保留了一个border，像cellspacing、cellpadding等属性都不支持，还好浏览器保留了对这些被H5废弃的属性的良好兼容行。

HTML表格是装载数据的便利工具，表格仍需修饰，所以CSS提供了一些表格属性，可以用来改善表格的外观。

CSS Table属性

属性名称	属性描述	备注
border-collapse	表格边框合并：separate（默认）｜collapse	collapse: table和td合并边框
border-spacing	单元格相邻边框间距离：水平+垂直 ，例如 8px 6px	仅当collapse设为separate 时有效
caption-side	表格标题位置：top（默认）| bottom
empty-cells	显示表格中的空单元格：show | hide
table-layout	显示单元、行和列的算法：automatic | fixed	不常用

除了表中的属性，caption（表头）、th（表格标题）、tr（表行）、td（单元格）等这些table（表格）构造元素均可和其他HTML元素一样设置各自常用属性，如内边距（padding）、文本对齐（text-align | vertical-align）、背景色等等。

最后给出一个表格的代码供参考：

马黑黑

参考代码：

1. <style type="text/css">
   
2. .mDiv { text-indent:2em; padding: 5px 0; }
   
3. .mytable { margin:6px auto; border-collapse:collapse; }
   
4. .mytable td { border:1px solid olive; padding: 6px; }
   
5. .mycaption { font-size: 1.5em; font-weight:bold; padding-bottom:6px; text-align:center; }
   
6. </style>
   
7. 
   
8. <table class="mytable">
   
9.         <caption class="mycaption">CSS Table属性</caption>
   
10.         <tbody><tr style="background:olive; color:white;font-weight:bold; text-align:center; border:1px solid olive;"><th>属性名称</th><th>属性描述</th><th>备注</th></tr>
    
11.         <tr>
    
12.                 <td>border-collapse</td>
    
13.                 <td>表格边框合并：separate（默认）｜collapse</td>
    
14.                 <td>collapse: table和td合并边框</td>
    
15.         </tr>
    
16.         <tr>
    
17.                 <td>border-spacing</td>
    
18.                 <td>单元格相邻边框间距离：水平+垂直 ，例如<br> 8px 6px</td>
    
19.                 <td>仅当collapse设为separate<br>时有效</td>
    
20.         </tr>
    
21.                 <tr>
    
22.                 <td>caption-side</td>
    
23.                 <td>表格标题位置：top（默认）| bottom</td>
    
24.                 <td></td>
    
25.         </tr>
    
26.         <tr>
    
27.                 <td>empty-cells</td>
    
28.                 <td>显示表格中的空单元格：show | hide</td>
    
29.                 <td></td>
    
30.         </tr>
    
31.         <tr>
    
32.                 <td>table-layout</td>
    
33.                 <td>显示单元、行和列的算法：automatic | fixed</td>
    
34.                 <td>不常用</td>
    
35.         </tr>
    
36. </tbody></table>

复制代码

红影

外语学的不太好，看起来有点吃力

红影

有个疑问，
<tbody><<tr style="background:olive; color:white;font-weight:bold; text-align:center; border:1px solid olive;"><th>属性名称</th><th>属性描述</th><th>备注</th></tr>

为什么是两个<，看语句中有 text-align:cente，但看演示中，表格标题貌似没居中？

马黑黑

红影 发表于 2022-1-10 19:36
外语学的不太好，看起来有点吃力

没关系，你的外语比我的好

马黑黑

红影 发表于 2022-1-10 19:40
有个疑问，

那是手快多了一个尖角符号

红影

马黑黑 发表于 2022-1-10 19:41
那是手快多了一个尖角符号

哦哦，还有个疑问呢，为什么表格里的标题不居中？

红影

马黑黑 发表于 2022-1-10 19:40
没关系，你的外语比我的好

肯定不行，中学学的全还给老师了

马黑黑

红影 发表于 2022-1-10 19:46
肯定不行，中学学的全还给老师了

我没读过什么书，后来杀猪也要考证，我就恶补了一下英语，26个字母一天记好，然后一个月背1000个单词，然后考试得了62.5分，拿到了杀猪证。我出身贫寒，不要笑话我。

马黑黑

红影 发表于 2022-1-10 19:45
哦哦，还有个疑问呢，为什么表格里的标题不居中？

默认是居中的。应该是Discuz程序重新定义了什么。我写这个，改了至少10次，因为我正常设定的th、tr和td属性，会影响整个页面。

其实原因很简单，论坛不提倡用table，用的话最好不做什么CSS设定

小辣椒

黑黑，真的没有实践做一次就没有感觉，其实我对CSS 太陌生了，昨天晚上还是忍不住熬夜了，有了一个体会，但还是不知道做的对不对

马黑黑

小辣椒 发表于 2022-1-10 20:09
黑黑，真的没有实践做一次就没有感觉，其实我对CSS 太陌生了，昨天晚上还是忍不住熬夜了，有了一个体会，但 ...

慢慢来不急

小辣椒

马黑黑 发表于 2022-1-10 20:11
慢慢来不急

等一下我去发，本来想发作业的，刚好今天活动第二路标出来了就算个帖了，最近也是没有时间做活动帖的

红影

马黑黑 发表于 2022-1-10 19:48
我没读过什么书，后来杀猪也要考证，我就恶补了一下英语，26个字母一天记好，然后一个月背1000个单词，然 ...

一个月背诵那么多啊，那你一共背了几个月？60分万岁，厉害的

红影

马黑黑 发表于 2022-1-10 19:51
默认是居中的。应该是Discuz程序重新定义了什么。我写这个，改了至少10次，因为我正常设定的th、tr和td属 ...

哦哦，原来是这样，知道了

马黑黑

红影 发表于 2022-1-10 22:09
哦哦，原来是这样，知道了

马黑黑

红影 发表于 2022-1-10 22:08
一个月背诵那么多啊，那你一共背了几个月？60分万岁，厉害的

备考时间就一个月多点呀

红影

马黑黑 发表于 2022-1-10 22:20
备考时间就一个月多点呀

一个月的时间，就能成功，也算是很厉害了

马黑黑

红影 发表于 2022-1-11 16:21
一个月的时间，就能成功，也算是很厉害了

突击还行，考完试好像一切依旧

红影

马黑黑 发表于 2022-1-11 16:32
突击还行，考完试好像一切依旧

短期记忆很难印象深刻，不过应付考试足够了。