CSS Table属性
本帖最后由 马黑黑 于 2022-1-10 18:46 编辑 <br /><br /><style type="text/css">.mDiv { text-indent:2em; padding: 5px 0; }
.mytable { margin:6px auto; border-collapse:collapse; }
.mytable td { border:1px solid olive; padding:6px; }
.mycaption { font-size: 1.5em; font-weight:bold; padding-bottom:6px; text-align:center; }
</style>
<div class="mDiv">
<p>HTML5对表格标签大刀阔斧砍掉了几乎所有的属性，只保留了一个border，像cellspacing、cellpadding等属性都不支持，还好浏览器保留了对这些被H5废弃的属性的良好兼容行。</p>
<p>HTML表格是装载数据的便利工具，表格仍需修饰，所以CSS提供了一些表格属性，可以用来改善表格的外观。</p>
<table class="mytable">
<caption class="mycaption">CSS Table属性</caption>
<tbody><tr style="background:olive; color:white;font-weight:bold; text-align:center; border:1px solid olive;"><th>属性名称</th><th>属性描述</th><th>备注</th></tr>
<tr>
<td>border-collapse</td>
<td>表格边框合并：separate（默认）｜collapse</td>
<td>collapse: table和td合并边框</td>
</tr>
<tr>
<td>border-spacing</td>
<td>单元格相邻边框间距离：水平+垂直 ，例如<br> 8px 6px</td>
<td>仅当collapse设为separate<br>时有效</td>
</tr>
<tr>
<td>caption-side</td>
<td>表格标题位置：top（默认）| bottom</td>
<td></td>
</tr>
<tr>
<td>empty-cells</td>
<td>显示表格中的空单元格：show | hide</td>
<td></td>
</tr>
<tr>
<td>table-layout</td>
<td>显示单元、行和列的算法：automatic | fixed</td>
<td>不常用</td>
</tr>
</tbody></table>
<p>除了表中的属性，caption（表头）、th（表格标题）、tr（表行）、td（单元格）等这些table（表格）构造元素均可和其他HTML元素一样设置各自常用属性，如内边距（padding）、文本对齐（text-align | vertical-align）、背景色等等。</p>
<p>最后给出一个表格的代码供参考：</p>
</div>
本帖最后由 马黑黑 于 2022-1-10 19:42 编辑
参考代码：
<style type="text/css">
.mDiv { text-indent:2em; padding: 5px 0; }
.mytable { margin:6px auto; border-collapse:collapse; }
.mytable td { border:1px solid olive; padding: 6px; }
.mycaption { font-size: 1.5em; font-weight:bold; padding-bottom:6px; text-align:center; }
</style>
<table class="mytable">
<caption class="mycaption">CSS Table属性</caption>
<tbody><tr style="background:olive; color:white;font-weight:bold; text-align:center; border:1px solid olive;"><th>属性名称</th><th>属性描述</th><th>备注</th></tr>
<tr>
<td>border-collapse</td>
<td>表格边框合并：separate（默认）｜collapse</td>
<td>collapse: table和td合并边框</td>
</tr>
<tr>
<td>border-spacing</td>
<td>单元格相邻边框间距离：水平+垂直 ，例如<br> 8px 6px</td>
<td>仅当collapse设为separate<br>时有效</td>
</tr>
<tr>
<td>caption-side</td>
<td>表格标题位置：top（默认）| bottom</td>
<td></td>
</tr>
<tr>
<td>empty-cells</td>
<td>显示表格中的空单元格：show | hide</td>
<td></td>
</tr>
<tr>
<td>table-layout</td>
<td>显示单元、行和列的算法：automatic | fixed</td>
<td>不常用</td>
</tr>
</tbody></table>
外语学的不太好，看起来有点吃力{:4_173:} 有个疑问，
<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
外语学的不太好，看起来有点吃力
没关系，你的外语比我的好{:5_106:} 红影 发表于 2022-1-10 19:40
有个疑问，
那是手快多了一个尖角符号{:5_117:} 马黑黑 发表于 2022-1-10 19:41
那是手快多了一个尖角符号
哦哦，还有个疑问呢，为什么表格里的标题不居中？ 马黑黑 发表于 2022-1-10 19:40
没关系，你的外语比我的好
肯定不行，中学学的全还给老师了{:4_173:} 红影 发表于 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分万岁，厉害的{:4_187:} 马黑黑 发表于 2022-1-10 19:51
默认是居中的。应该是Discuz程序重新定义了什么。我写这个，改了至少10次，因为我正常设定的th、tr和td属 ...
哦哦，原来是这样，知道了{:4_204:} 红影 发表于 2022-1-10 22:09
哦哦，原来是这样，知道了
{:4_181:} 红影 发表于 2022-1-10 22:08
一个月背诵那么多啊，那你一共背了几个月？60分万岁，厉害的
备考时间就一个月多点呀 马黑黑 发表于 2022-1-10 22:20
备考时间就一个月多点呀
一个月的时间，就能成功，也算是很厉害了{:4_199:} 红影 发表于 2022-1-11 16:21
一个月的时间，就能成功，也算是很厉害了
突击还行，考完试好像一切依旧 马黑黑 发表于 2022-1-11 16:32
突击还行，考完试好像一切依旧
短期记忆很难印象深刻，不过应付考试足够了。