第四章 · 4.3 节

列表与表格样式

列表（<ul>/<ol>）与表格（<table>）是两类自带默认样式的语义化标签，本节介绍如何驯服它们默认的间距、标记与边框，做出干净的自定义样式。

list-style 系列

属性	常用取值	说明
list-style-type	disc / decimal / none	标记的形状，none 常用于导航菜单去掉圆点
list-style-position	outside（默认）/ inside	inside 让标记参与文本排版，多行时随文本缩进
list-style-image	url(...)	用图片替代默认标记，现已较少使用，多用 ::marker 或伪元素替代

nav ul {
  list-style: none;
  margin: 0;
  padding: 0; /* ul 默认有 padding-left，用于给圆点/数字留位置，去掉标记后一并清零 */
}

自定义列表标记

::marker 伪元素专门用来样式化列表标记本身，比替换整个 list-style-image 更灵活——可以单独设置标记的颜色、字号，而不影响列表项文字。

li::marker {
  color: var(--accent2);
  font-weight: 700;
}

::marker 效果

默认标记颜色跟随文字
::marker 单独着色后的效果（此处用行内样式模拟）

更多伪元素的通用用法见 3.3 其他伪元素。

表格基础属性

属性	作用对象	说明
border-collapse	table	collapse 合并相邻单元格边框为一条线，separate（默认）各自保留边框
border-spacing	table	仅在 separate 模式下生效，控制单元格间距
table-layout	table	fixed 让列宽由首行单元格决定，渲染更快，避免内容撑开列宽
caption-side	caption	控制表格标题在上方还是下方

边框合并与间距

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid var(--rule);
  padding: 8px 12px;
  text-align: left;
}

提示本教程页面里的所有表格（包括这一张）都使用了 border-collapse: collapse ——这是让表格看起来"干净"而非"每个格子都是一个独立盒子"的关键一行。

斑马纹与响应式表格

用 :nth-child() 结构性伪类给隔行变色，是提升宽表格可读性的经典手法（结构性伪类的完整介绍见 2.4 伪类选择器）：

tbody tr:nth-child(even) {
  background: var(--desk);
}

窄屏下表格容易横向溢出，最简单的应对方式是给外层容器设置横向滚动，而不强行压缩列宽：

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

常见误区

去掉 list-style 后忘记清零默认的 padding-left，导致列表看起来仍有一段莫名的缩进。
表格不设置 table-layout: fixed 时，某个单元格内容过长会撑开整列甚至整个表格，破坏预期布局。
混用 border-collapse: collapse 与单元格的 border-radius——合并边框模式下圆角可能不生效，需要 separate 模式配合 border-spacing: 0 实现圆角表格。

Chapter 4 · Section 4.3

Styling Lists and Tables

Lists (<ul>/<ol>) and tables (<table>) are two semantic tags that ship with default styles of their own. This section shows how to tame their default spacing, markers, and borders to produce clean, custom styles.

The list-style Family

Property	Common values	Description
list-style-type	disc / decimal / none	the shape of the marker; none is commonly used in navigation menus to remove the bullet
list-style-position	outside (default) / inside	inside lets the marker participate in text layout, indenting with the text on wrapped lines
list-style-image	url(...)	replaces the default marker with an image; now rarely used, usually replaced by ::marker or pseudo-elements

nav ul {
  list-style: none;
  margin: 0;
  padding: 0; /* ul has a default padding-left that reserves room for bullets/numbers; clear it once the marker is removed */
}

Custom List Markers

The ::marker pseudo-element styles the list marker itself and is more flexible than replacing the whole list-style-image — you can set the marker's color and font size independently without affecting the list item text.

li::marker {
  color: var(--accent2);
  font-weight: 700;
}

::marker effect

The default marker color follows the text
The effect of coloring ::marker separately (simulated here with inline styles)

For more general pseudo-element usage, see 3.3 Other Pseudo-elements.

Basic Table Properties

Property	Applies to	Description
border-collapse	table	collapse merges adjacent cell borders into a single line; separate (default) keeps each border
border-spacing	table	only takes effect in separate mode; controls the spacing between cells
table-layout	table	fixed lets the first row's cells decide column widths; renders faster and stops content from stretching columns
caption-side	caption	controls whether the table caption appears above or below

Border Collapsing and Spacing

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid var(--rule);
  padding: 8px 12px;
  text-align: left;
}

TipEvery table on this tutorial site (including this one) uses border-collapse: collapse — the single line that makes tables look "clean" instead of like a collection of independent boxes.

Zebra Striping and Responsive Tables

Using the :nth-child() structural pseudo-class to alternate row colors is the classic way to improve readability of wide tables (a full introduction to structural pseudo-classes is in 2.4 Pseudo-class Selectors):

tbody tr:nth-child(even) {
  background: var(--desk);
}

On narrow screens tables tend to overflow horizontally; the simplest fix is horizontal scrolling on the wrapper instead of forcing column widths:

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Common Pitfalls

Removing list-style but forgetting to clear the default padding-left, so the list still shows an unexplained indent.
Without table-layout: fixed, an overlong cell can stretch the whole column or even the entire table, breaking the intended layout.
Mixing border-collapse: collapse with border-radius on cells — in collapsed mode rounded corners may not apply; you need separate mode combined with border-spacing: 0 to get rounded tables.