类似ul的 html,用 UL 实现类似 Table 的数据列表样式

在 CSS 变成热门之前，大多数人都是用 table 来显示数据或者控制页面布局，自从大家开始关注 CSS 起，人们发现， table 远没有用 CSS 控制的代码结构清晰，而且一旦 CSS 被缓存到客户端，直接从服务器端加载的数据就大大减少了。因此，有众多的人开始研究 table 的替代方案，从页面布局到内容导航，而本文介绍的技巧是用 CSS 控制

• 来实现类似于 table 的数据列表样式。

先看看效果：

通过上面的图片和示例，我们很容易发现通过 CSS 是很容易实现类似 table 的数据列表样式，接下来让我们看看代码：

先看看 CSS 部分:

接着再看看 (X)HTML:

• 1-1
• 1-2
• 1-3
• 1-4

• 2-1
• 2-2
• 2-3
• 2-4

• 3-1
• 3-2
• 3-3
• 3-4

• 4-1
• 4-2
• 4-3
• 4-4

可见，控制显示样式的代码和数据结构分离后，整个代码更加清晰了，同时一旦 CSS 被缓存了，在其他页面调用相同样式的时候，加载的代码大大减少，而且，通过这样分离，我们很容易通过修改 CSS 而改变整个网站的风格。使网站改版或者维护变得更加容易。