一个用 dl dt dd 做的表格

最新推荐文章于 2024-09-28 12:02:43 发布

原创

最新推荐文章于 2024-09-28 12:02:43 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#class #border #float #div #ie

这篇博客展示了如何利用HTML的dl, dt, dd元素模仿表格布局，创建了一个计算机消费系统的记录表格，包括名称、花费金额、备注、记录时间和记录人等字段。通过CSS进行样式设置，如宽度、边框、浮动等，以实现类似表格的效果。需要注意不同浏览器（如火狐和IE）的解析差异，推荐使用padding和margin来调整行高。" 132363203,10974913,R语言大数据统计分析实践：网民行为与趋势,"['大数据分析', 'R语言编程', '统计图表', '数据处理']

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

看到最近大家流行用dl dt dd布局，我也能照着做了一个，反照表格做的，效果如图：

代码贴出来给大家看看

<html>
<head>
<title></title>
<style type="text/css">
dl,div{width:800px;margin:0 auto; text-align:center;}
dt{clear:both;text-align:center;font-weight: bold;}
dd{float: left;width:125px;text-align: center;height: auto;padding: 5px 0;border:solid 1px #963;margin:0px;}
body {font-size:12px;margin:0px;padding:0px;background:#eee;}
.title{text-align:center;font-size:14px;font-weight:bold;color:#631;}
</style>
</head>
<body>
<br />
<div><h3>亲们，没有搞错，这是一个用 dl dt dd 做的表格</h3></div>
<dl>