使用Table和Css制作实线表格

最新推荐文章于 2025-06-22 10:45:00 发布

sighforever

最新推荐文章于 2025-06-22 10:45:00 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

文章标签： table css border xhtml 百度 html

本文链接：https://blog.youkuaiyun.com/sighforever/article/details/5295008

本文介绍了一种使用CSS来创建带有细线的表格的方法。通过调整表格边框的宽度和颜色，可以实现清晰且美观的表格布局。文章还提供了完整的HTML和CSS代码示例。

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

转自·：http://blog.pr1984.com/trackback.asp?tbID=58&action=addtb&tbKey=8a1887379b8b40dc495cfb68a4edc2be6c6f3801

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Css制作table细线表格</title> <style type="text/css" media="screen" mce_bogus="1"> /* PR-CSS */ table { border-collapse:collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */ border:solid #999; /* 设置边框属性：样式(solid=实线)、颜色(#999=灰) */ border-width:1px 0 0 1px; /* 设置边框状粗细：上右下左 = 对应：1px 0 0 1px */ } table caption {font-size:14px;font-weight:bolder;} table th, table td {border:solid #999;border-width:0 1px 1px 0;padding:2px;} /* 设置表格每个td的边框，只设置下侧和右侧的边框 */ tfoot td {text-align:center;}</style> </head> <body> <table> <caption>表格头</caption> <thead> <tr><th>名称</th><th>网址</th><th>时间</th></tr> </thead> <tbody> <tfoot> <tr><td colspan="3">下一页</td></tr> </tfoot> <tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr> <tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr> <tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr> </tbody> </table> </body> </html>

最后合体效果：