Spec table

Two-column table for technical data. Optional title and intro above the table.

Информация

Requires PageBuilder Pro.

Specs in a table

• Parameter/value rows, not buried in prose
• Optional intro and section title
• table field edits in the inspector

Typical pages

• Product page: weight, size, material
• Equipment page: specs
• Single product spec sheet

Page examples

• Product copy: Tabs → “Specs” tab = Spec table
• Equipment: Hero → Spec table → CTA

Spec table

Specifications table field: parameter and value columns. Striped rows enables zebra styling.

Similar sections

• Data table for CMP embeddedTable rows
• Product comparison for multiple SKUs (MS3)

Block parameters

Parameter	Value
key	spec_table
Layer	Pro
Category	content (content)
Chunk	pagebuilderpro_spec_table
Requires	pro

Inspector fields

Fill these fields in the section inspector. Field types are documented in the field types reference.

Title (title)

Type text. Optional.

Intro (intro)

Type textarea. Optional.

Specifications (specs)

Type table. Required. Table with fixed columns.

Columns:

Column	Type	Label
label	text	Parameter
value	text	Value

Striped rows (striped)

Type yesno. Optional. Yes/no toggle.

Site output

HTML table pb-spec-table.

Section data

Example payload after save. Media, video, and map values may be enriched on output:

{
  "title": "Section title",
  "intro": "Short intro before the main content.",
  "striped": true
}

Chunk template

Fenom chunk pagebuilderpro_spec_table:

{var $rows = $spec_rows|default:($specs|default:[])}
<section class="pb-section pb-section--spec-table pb-spec-table{if $striped} pb-spec-table--striped{/if}{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="spec_table"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-spec-table__inner">
    {if $title}
      <h2 class="pb-heading pb-spec-table__title">{$title|escape}</h2>
    {/if}
    {if $intro}
      <p class="pb-spec-table__intro">{$intro|escape}</p>
    {/if}
    {if $rows && ($rows | length) > 0}
      <div class="pb-spec-table__scroll">
        <table class="pb-spec-table__table">
          <thead>
            <tr>
              <th scope="col">Parameter</th>
              <th scope="col">Value</th>
            </tr>
          </thead>
          <tbody>
            {foreach $rows as $row}
              <tr>
                <th scope="row">{$row.label|default:''|escape}</th>
                <td>{$row.value|default:''|escape}</td>
              </tr>
            {/foreach}
          </tbody>
        </table>
      </div>
    {else}
      <p class="pb-spec-table__empty">Add specification rows in the inspector.</p>
    {/if}
  </div>
</section>

JSON definition

PageBuilderPro/core/components/pagebuilderpro/sections/spec_table.json

See also

• Section catalog
• Fields overview
• Frontend output