HTML表格边框怎么正确设置 CSS表格边框怎样更好看

HTML中表格边框怎么正确设置

设置表格边框其实没有那么复杂，只要掌握几种实用的办法就够了。

第一种方法就是传统HTML属性应用：
- 给<table>标签设置BORDER=0和cellspacing=1；
- 同时设置table的背景色为你想要的边框颜色；
- 最后把所有td的背景色设成纯白色(#ffffff)，这样看起来像有边框，但其实是利用背景色显现的边界。
第二种方法结合HTML属性和CSS：
- 在<table>上依然保留BORDER=0；
- 通过CSS给table设置border-top和border-left为1像素实线或想要的样式；
- 所有td单元格则设置border-right和border-bottom，这样效果更加整齐且灵活。
第三种方法直接用CSS控制：
- 设置table, td统一的边框样式，比如1px solid #ddd；
- 利用border-collapse: collapse;让单元格边框合成一条线，避免重复边框看起来厚重。

总之，这3套办法，各有千秋，配合使用，基本能够满足绝大多数需求！

说到让表格边框看起来美美哒，咱们可以用CSS来搞定，具体细节来瞧瞧：

怎么设置统一边框样式
比如说，写一段CSS像这样：
css table { border-color: red; border-width: 4px; border-style: ridge; }
这就给表格四条边都加上了红色的凸起效果，宽度4像素，看起来很有质感。
怎么定制每个边框不同样式
其实你完全可以分别给border-top、border-right、border-bottom、border-left单独设置样式，颜色和宽度都可以不同，想搞成各种炫酷花样都没压力！
如何去掉table外边框只保留某些边框
很简单，CSS就能搞定，比如只显示左边框或者只显示上、下边框。
直接设置没用的边框为none，想要的边框照样设置样式就好，灵活到飞起！
合并表格边框，让表格更紧凑
一定得用：
css border-collapse: collapse;
这样，单元格边框就不会叠加成双线，整个表格看起来整齐又专业。
别忘了背景色的小技巧
给表格或者单元格设置不同的背景色，也能间接影响边框的视觉效果，配合边框颜色玩出不同风格！