如何简单美化html中的table标签？

原创于 2019-05-08 20:29:10 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

疑问专栏收录该内容

1 篇文章

订阅专栏

因项目需求做小网页，表格展示效果不佳需美化。介绍了常用的table属性，如border、cellspacing、cellpadding可完成初步美化。还提到老旧版本浏览器中，空单元格边框消失问题，可在空单元格插入空格解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于项目需求，要做一些小网页，其中有一些是通过表格展示的，但我做出来的表格很丑，如何美化呢？

常用的table属性有

border：边框的线条宽度（外边框）

cellspacing：单元格之间的距离

cellpadding：单元格边框与单元格内容的举例

<table border="1" cellpadding="3" cellspacing="0">
		<tr>
			<th>name</th><th>age</th><th>sex</th>
		</tr>
		<tr>
			<td>zhangsan</td><td>28</td><td>male</td>
		</tr>
		<tr>
			<td>zhangsan</td><td>28</td><td></td>
		</tr>
		<tr>
			<td>zhangsan</td><td>28</td><td></td>
		</tr>
</table>

以上代码就可以完成表格的初步美化。

其中，有些单元格内容是空的，对于一些老旧版本的浏览器（IE8），会导致单元格边框消失，也很丑，有个技巧，就是内容为空的单元格里插入空格(  牛Bspace)即可。