How To: Create Custom Table Layouts

Build custom table structures with merged cells, colspan, and row control.

Use table layout attributes when the default row-and-column output is not enough.

Problem

You need tables with merged cells, custom column spans, or specific row structures.

Solution 1: Merge Cells Horizontally

Currency Symbol + Amount:

<!--{{!
<lineitems>
<listname>opportunitylineitems</listname>
<column>PricebookEntry.Product2.name</column>
<column prefix="$" mergenext="true"></column>
<column format-number="#,###.##">unitprice</column>
</lineitems>
}}-->

Result: $ and 12.99 render in one merged cell as $12.99.

Solution 2: Column Spanning

Header Spanning Multiple Columns:

<thead>
  <tr>
    <th colspan="3">Product Information</th>
    <th colspan="2">Pricing</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Code</th>
    <th>Description</th>
    <th>Unit Price</th>
    <th>Total</th>
  </tr>
</thead>

In Line Items:

<!--{{!
<lineitems>
<listname>opportunitylineitems</listname>
<column colspan="2">PricebookEntry.Product2.name</column>
<column prefix="$" format-number="#,###.##">unitprice</column>
</lineitems>
}}-->

Solution 3: Custom Row Breaks

3 Labels Per Row:

<table>
<!--{{!
<lineitems>
<listname>contacts</listname>
<column newrow="3">Name<br>MailingStreet<br>MailingCity, MailingState MailingPostalCode</column>
</lineitems>
}}-->
</table>

Result: Three labels render per row.

New Row for Each Record:

<!--{{!
<lineitems>
<listname>opportunitylineitems</listname>
<column newrow="true">PricebookEntry.Product2.name</column>
<column>Description</column>
<column>UnitPrice</column>
</lineitems>
}}-->

Tips

• mergenext="true" merges a cell with the cell to its right.
• colspan="n" makes a cell span n columns.
• newrow="3" starts a new row after every third record.
• newrow="true" starts a new row for each record.
• mergenext does not work with group-by output.