本文约 3,826 字，预计阅读 10 分钟。文中命令与配置均经过实测，可直接参考执行。
引言：表格在文章里是个”二等公民”
价格对比、参数规格、版本差异、报价单——这些内容的自然形态是表格，但在 WordPress 里做表格一直很别扭。
古腾堡有原生的表格区块，功能够用但很基础：没有排序、没有搜索、没有分页，样式完全由主题接管，换个主题表格就变形。经典编辑器时代更惨，表格 HTML 常常被 wpautop 插入多余的 <p> 和 <br>，保存几次之后代码一片混乱。
TablePress 的思路是”把表格当成独立数据来管理”：表格不写在文章里，而是单独创建、单独维护，文章里只放一个短代码 [table id=3 /]。这样改表格内容不用编辑文章，一张表还能在多个页面复用，并且自带排序、搜索、分页（基于 DataTables 库）和导入导出能力。
原理分析：表格存在哪、怎么渲染
理解三点就够了：
- 表格数据不在
wp_posts里。 TablePress 把表格存在wp_options（一张索引记录 + 每张表一条记录），所以默认站内搜索搜不到表格里的内容，备份时也要确认 options 表在备份范围内。 - 前台渲染靠短代码。
[table id=1 /]展开成<table>，默认套一层 DataTables 的容器div.dataTables_wrapper，并按需加载 JS。 - 排序/搜索/分页是 JS 能力。 DataTables 在浏览器里对已输出的表格做处理，所以数据量大时（几千行）首屏 HTML 会很长，需要分页或改为异步。
| 能力 | 由谁提供 | 控制方式 |
|---|---|---|
| 表格数据 | TablePress | 后台编辑/导入 |
| 排序、搜索、分页 | DataTables（JS） | 短代码参数 |
| 样式 | 主题 CSS + 插件默认 CSS | 后台 Custom CSS |
| 响应式 | 横向滚动 / 响应式扩展 | datatables_scrollx 或 CSS |
保姆级实操
第一步：创建表格
后台「TablePress → Add New Table」：
- 填名称与描述（描述只给自己看，方便一年后还记得这张表是干什么的）；
- 设置行数与列数（后面可以再增删改）；
- 逐格填写内容，格子支持 HTML（如
<strong>、<a>）； - 第一行可勾选为表头，最后一行为表尾（Table Options 区域）；
- 记下右上角的 Table ID，前台嵌入要用。
第二步：调整表头与表格选项
「Table Options」区域里几个常用项：
- Table Head Row / Table Foot Row：首行/末行是否作为表头/表尾；
- Alternating Row Colors：隔行变色；
- Row Hover Highlighting：鼠标悬停高亮；
- Table Name / Description：可勾选是否显示在表格上方（做标题用）。
第三步：导入与导出
「TablePress → Import」支持 CSV、HTML、JSON，也可从 Excel 复制粘贴（部分版本支持）。推荐流程是在 Excel 里做好表，另存为 CSV（UTF-8）后导入：
型号,风量(m³/h),功率(kW),噪音(dB),价格(元)
AC-1001,3000,1.5,68,2800
AC-1002,4500,2.2,71,3600
AC-1003,6000,3.0,74,4500
导入时注意两点：编码必须是 UTF-8（否则中文乱码），以及分隔符要与导出时一致（中文 Excel 默认可能用分号）。
导出在「TablePress → Export」，可选择导出单张或多张表，格式有 CSV、HTML、JSON，方便做备份或迁站（配合 WP All Import 批量导入配置 的思路可以跨站复用）。
第四步：嵌入前台
在文章或页面里插入短代码：
[table id=1 /]
常用参数（写在 id 后面，用空格分隔）：
[table id=1 datatables_sort=true datatables_paginate=true datatables_paginate_entries=20 datatables_filter=true datatables_info=true datatables_scrollx=true /]
参数含义：
| 参数 | 作用 |
|---|---|
use_datatables |
是否启用 DataTables（关掉就是纯静态表格，不加载 JS） |
datatables_sort |
是否允许点击表头排序 |
datatables_paginate |
是否分页 |
datatables_paginate_entries |
每页行数 |
datatables_filter |
是否显示搜索框 |
datatables_info |
是否显示”第 1 到第 10 条，共 N 条” |
datatables_scrollx |
是否允许横向滚动（移动端必备） |
datatables_lengthchange |
是否允许用户切换每页条数 |
在模板或自定义区块里用代码输出：
echo do_shortcode( '[table id=1 datatables_sort=false datatables_paginate=false /]' );
第五步：写自定义样式
后台「TablePress → Plugin Options → Custom CSS」，这里写的 CSS 只对表格生效，不受主题更新影响：
/* 只作用于 ID 为 1 的表格 */
.tablepress-id-1 {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.tablepress-id-1 th {
background: #f5f7fa;
text-align: left;
font-weight: 600;
}
.tablepress-id-1 td,
.tablepress-id-1 th {
padding: 8px 12px;
border-bottom: 1px solid #e5e7eb;
}
/* 移动端：允许横向滚动，避免撑破布局 */
.dataTables_wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tablepress-id-1 {
min-width: 640px;
}
第六步：大数据量表格的处理
超过几百行就不要一次性输出到页面了：开启分页（datatables_paginate=true，每页 20–50 行），或者拆成多张表用锚点分段；确定不需要排序搜索的表直接 use_datatables=false，省掉一次 JS 加载。
常见踩坑
- 导入 CSV 中文乱码。 文件编码不是 UTF-8。用编辑器另存为 UTF-8（带或不带 BOM 都可），或先在 Excel 里用”从文本导入”指定编码。
- 表格在手机上撑破布局。 没开
datatables_scrollx，或主题给table设了width:100%但没限制min-width。用上面的 CSS 处理。 - 换主题后表格样式全变。 表格样式本来就受主题 CSS 影响，把关键样式写进插件的 Custom CSS（它对
tablepress类有更具体的选择器）。 - 站内搜索搜不到表格内容。 表格不在
wp_posts里，需要搜索插件支持索引自定义数据源，或直接在文章里补一段文字说明（这也利于 SEO）。 - 表格 ID 变了导致页面空白。 删除并重建表格会产生新 ID，引用旧 ID 的短代码会输出错误提示。改表格内容而非删表重建。
- DataTables 的 JS 在不需要的页面也加载。 它会带来 jQuery 依赖与额外请求，纯展示型表格关掉
use_datatables更轻（关于前端资源加载的取舍可参看 代码高亮插件选型 里的同一思路）。 - 案例： 某站把 3000 行的产品价目表整张放进一个页面，前台打开要 6 秒，手机直接卡死。原因是整张表一次性输出成 HTML，再加上 DataTables 初始化要遍历全部行。改成按产品线拆成 6 张表、每张开启分页（每页 50 行）后，单页 HTML 从 1.8MB 降到 80KB，打开时间回到 1 秒内。教训：表格的渲染成本随行数线性增长，几百行以上必须分页或拆分。
总结
TablePress 的正确使用姿势是”数据独立、短代码引用、样式自控”：表格单独维护，文章里只放 [table id=N /]，关键样式写进插件的 Custom CSS。
行动清单：建表时写清楚描述（方便日后辨认）；导入前确认 UTF-8；移动端务必处理横向滚动；几百行以上开分页；换主题后抽查一遍表格样式；定期用 Export 导出一份 CSV 做备份。表格里若出现大量自定义字段数据，字段读取的性能问题可以顺手参考 ACF get_field 性能优化。
