table 表格细线条实现方式

最新推荐文章于 2024-11-13 09:38:08 发布

NFA_YY

最新推荐文章于 2024-11-13 09:38:08 发布

阅读量1.6w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html webUI

本文链接：https://blog.youkuaiyun.com/NFA_YY/article/details/75089564

html 同时被 2 个专栏收录

7 篇文章

订阅专栏

webUI

3 篇文章

订阅专栏

本文介绍了两种不同的HTML表格样式实现方法。第一种方法通过CSS定义表格样式，具有良好的兼容性；第二种方法则直接利用HTML标签属性来实现表格边框及背景色等样式。这两种方法各有特点，可以根据实际需求选择合适的方式。

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

第一种方式：

推荐使用这种，兼容性好

		<style>
			.define-table{
				border-collapse:collapse;
				border-spacing:0;
				border-left:1px solid #888;
				border-top:1px solid #888;
			}
			.define-table th,.define-table td{
				border-right:1px solid #888;
				border-bottom:1px solid #888;
				padding:5px 15px;
			}
			.define-table th{
				font-weight:bold;background:#ccc;
			}	
		</style>		<table class="define-table" width="800" height="200" >
			<tr>
				<td> </td>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>
			<tr>
				<td> </td>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>			
			<tr>
				<td> </td>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>
		</table>

第二种方式：

		<table  width="800" height="200" border="0" cellspacing="1" cellpadding="0" bgcolor="#888">
			<tr bgcolor="#FFFFFF">
				<td> </td>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>
			<tr bgcolor="#FFFFFF">
				<td> </td>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>
			<tr bgcolor="#FFFFFF">
				<td> </td>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>
		</table>