Kadenceチュートリアル:高度なテーブルブロックの説明

在内容展示中,结构清晰且具备视觉层次的表格布局能有效展示关键信息,常被用于产品价格对比、课程排期、功能参数说明等场景。ケイデンス・ブロック 插件中的 Advanced Table 区块,为 ワードプレス 用户提供了更自由的表格构建能力。

相比原生 グーテンベルク 表格模块,Advanced Table 支持多层嵌套、响应式布局控制、自定义样式设定,更贴合实际应用需求。

图片[1]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

添加 Advanced Table 区块

ある グーテンベルク 编辑器中,点击“+”添加区块,搜索并插入 Advanced Table.

图片[2]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

首次插入时将提示设置初始的行与列数量,建议根据预期内容结构设置基本尺寸,后续可随时增加或删除行列。

图片[3]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

表格中的每个单元格(Table Data)默认包含段落区块,并支持插入任意其他 ケイデンス・ブロック 模块,如图像、图标、按钮、列表等。

图片[4]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

插入内容与嵌套区块

点击任意单元格后,即可直接输入文本。

图片[5]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

也可以按下 / 键或点击加号,快速插入其他 グーテンベルク 区块,实现嵌套效果。

图片[6]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

这种方式适合展示更复杂的内容结构,例如图文混排、列表型数据、带按钮的价格表等。

表格行(Row)管理

每一行可单独选中,通过工具栏中的箭头调整上下位置。

图片[7]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

点击行尾的“+”按钮,可快速在当前行上方或下方插入新行,也可插入到最顶部或最底部。

图片[8]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

每一行都支持独立样式设定,包括:

  • 背景颜色与悬停背景颜色
  • 行高(支持 px、em、vh)
  • 响应式显示设定:桌面、平板、移动端分别调节
图片[9]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

表格列(Column)管理

表格中的每列以 Table Data 区块呈现。

图片[10]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

通过工具栏箭头图标可移动列位置;点击加号图标则可新增列,插入于任意位置。

图片[11]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)
图片[12]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

每个单元格支持设置独立内边距(Padding),也可以进行响应式调整。

图片[13]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

若需要精细控制每列宽度,可在表格设置中关闭「Auto Width」,手动输入百分比或像素值,提升在不同设备上的适配效果。

表格整体设置

在选中整个 Advanced Table 区块后,可对整个表格模块进行全局设定。

基本設定

  • 行数与列数:可手动调整
  • 首行设为表头:将 HTML 标签切换为 <th>,并自动应用表头字体样式
  • 首列设为表头:同样适用于纵向数据列表
图片[14]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

固定行列功能(需 Kadence Blocks Pro)

  • 固定首行(Sticky First Row):常用于长表格的标题固定展示
  • 固定首列(Sticky First Column):适合参数型对比表
图片[15]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

需设置最大高度或最大宽度字段,才能启用滚动条件下的固定显示效果。

横向滚动

  • 开启 Overflow X 滚动,可在移动端或窄屏设备中横向滑动浏览表格内容,有效解决列过多导致内容被截断的问题。
图片[16]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

样式与视觉设定

Advanced Table 提供丰富的样式配置,包括但不限于:

  • フレーム:可设定颜色、粗细,并选择是否仅作用于行
  • 单元格内边距:统一或分别设置
  • 字体样式:支持字体、字号、颜色、行高、字重、字间距等控制
  • 表头样式:可单独为表头配置字体风格、颜色等
  • 行背景:可设置奇偶行交替背景色,提升可读性
  • 列背景:支持为单列设置专属背景色
  • 御身長:统一调整整体表格的行高
图片[17]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

詳細設定

  • 可为整个表格区块设置外边距与内边距,方便进行模块间留白控制
  • 可保存当前配置为默认设置,未来添加表格时自动使用相同样式
  • 支持添加自定义 カスケーディングスタイルシート 类名,适配更个性化的前端样式需求
图片[18]-Kadence 教程:Advanced Table 表格区块完整使用指南(附样式设置与响应式排版)

結語

Advanced Table 区块结合 ケイデンス・ブロック 插件提供的响应式排版与区块嵌套功能,使得构建高度可控、美观且实用的表格结构变得更加轻松。

无论是展示服务套餐、课程时间表、对比功能、よくあるご質問 解答,还是搭配电商模块使用,Advanced Table 都能提供足够的表现力与灵活性,是内容排版不可或缺的组成部分。


お問い合わせ
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事を書いた人:泥棒はネズミの勇気になる
終わり
好きなら応援してください。
クドス632 分かち合う
おすすめ
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし