在网页排版里，表格布局和列表布局是两种基础但容易被混用的方式。表格天生为二维数据设计，列表则更偏向线性内容组织。很多老项目用table堆出整个页面框架，后来发现响应式改不动，于是改用ul li加CSS重排。理解两者差异并优化ul li样式，是写出可维护前端页面的关键一步。
一、表格布局与列表布局的本质区别
表格布局依赖<table>、<tr>、<td>等标签，浏览器在渲染时要先算完整个表结构才绘制，数据量大的时候会阻塞首屏。它的优势是单元格自动对齐，适合后台报表。列表布局用<ul>和<li>表达条目关系，默认是块级纵向堆叠，语义清晰，也方便屏幕阅读器识别。
从CSS角度说，table的display值为table，内部元素display为table-cell，这种匿名盒生成机制让控制粒度变粗。而ul li是普通块盒，我们可以用flex或grid自由重排。下面这段HTML展示同一个数据用两种结构表达：
<!-- 表格写法 --> <table class="old-table"> <tr><td>首页</td><td>文章</td><td>关于</td></tr> </table> <!-- 列表写法 --> <ul class="nav-list"> <li>首页</li> <li>文章</li> <li>关于</li> </ul>
如果仅仅是做导航，列表写法少一层嵌套，CSS可控性更高。表格写法在窄屏下必须靠滚动或display:block拆解，维护成本明显更大。
二、ul li默认样式带来的坑与重置
浏览器给ul预设了margin和padding，并且li带list-style圆点。直接写样式常常发现左边空了一截，或者圆点去不掉。正确做法是在项目级CSS开头统一重置，而不是每个页面单独覆盖。
下面代码演示一个基础重置，把列表变成无装饰的横向容器前身：
/* 统一重置列表 */
ul.nav-list {
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
}
ul.nav-list li {
/* 先纵向块级，后面用flex改横向 */
margin: 0;
padding: 8px 12px;
box-sizing: border-box;
}
这里box-sizing设为border-box很重要，否则padding会撑大li导致换行不齐。list-style:none去掉了默认标记，但语义上仍是列表，对SEO和无障碍友好。很多新手用div代替li，结果丢失了条目语义，这是得不偿失的。
三、用flex优化ul li横向导航
把纵向列表变横向导航，最干净的办法是给ul加display:flex。这样li自动排成一行，还能用justify-content控制间距，用align-items对齐基线。相比旧式float布局，flex不会脱离文档流，也免去了清除浮动的麻烦。
示例代码如下，我们让导航居中且等距：
ul.nav-list {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
background: #f5f5f5;
}
ul.nav-list li {
padding: 8px 16px;
cursor: pointer;
white-space: nowrap; /* 防止文字折行 */
}
ul.nav-list li:hover {
background: #e0e0e0;
}
gap属性是现代浏览器支持的弹性间距，比用margin-left兼容写法更直观。white-space:nowrap保证菜单项不被强制折断。如果项目要兼容老浏览器，可以把gap换成li的margin，但flex本身在IE10+就可用，基本够用。
四、表格布局仍不可替代的场景
当内容本身是行列关系，比如商品价格对比、数据报表，用ul li硬拼反而不如table。此时优化方向是缩小表格复杂度，只保留必要行列，并用CSS控制单元格边框合并。
参考下面的表格样式优化：
table.data-table {
border-collapse: collapse;
width: 100%;
font-size: 13px;
}
table.data-table td,
table.data-table th {
border: 1px solid #ddd;
padding: 6px 10px;
text-align: left;
}
table.data-table th {
background: #fafafa;
}
border-collapse让边框不重叠，渲染更快也更美观。这种场景下强行用ul li加display:table-cell，代码量和可维护性都不如原生table。所以实践原则是：数据结构像网格就用table，像条目流就用ul li。
五、混合实践与性能小结
真实页面往往头部导航用ul li，主体数据用table。两者通过外层容器隔离，互不影响。优化ul li时注意重置默认样式、用flex排布、控制文字不折行；优化table时减少嵌套、合并边框、限制宽度。
从性能看，flex布局在重排时比float轻，table在内容固定时绘制稳定。只要不把table当万能布局框，也不把ul li当表格使，页面就能兼顾语义、速度与扩展。写CSS前先问一句：这块内容是流还是网格，答案出来，选型就清晰了。
CSS_layouttableul_li修改时间：2026-08-07 12:30:29