What this section is for

Everything else in the Table Wizard is a question with a list of answers. Append code is the open box: four of them, in step 5 (Modifications), under the heading Append code.

Prepend and Append HTML

Two rich-text editors: whatever you put in the first appears immediately above the table, whatever you put in the second immediately below it. Both travel inside the ruleset, so they follow the table wherever it is published.

What to put there

The most useful thing is a sentence or two telling the reader what they are looking at and what they can do with it. A table with column filters, sorting and an export button does not explain itself:

<p class="table-intro">
  Prices are per unit, excluding VAT, and were last checked in September 2026.
  Use the boxes under the headings to filter by product or price band, click a
  heading to sort, and the CSV button to take the figures away with you.
</p>

Other things that belong here: a source and a date, a legend for an abbreviation or a colour you used in a custom style, a note about which rows are totals, a link to the fuller dataset.

Append CSS

A plain box for your own CSS. The wizard tells you, right under the box, the class it has given your table and three selectors to start from.

The suffix is your ruleset's own name, so the note under the box shows something like tabtable-rs_b01bqdc2. Those classes are yours alone: a rule written with them touches this table and no other table on the page.

Why it can override the wizard

Tabulizer generates a stylesheet from your answers in steps 2 and 3 and loads it with the table. Your appended CSS is loaded after it, so where the two say different things about the same property, yours is the one that applies. You rarely need !important; matching the wizard's own specificity is usually enough, and the three selectors above do that.

/* a wider first column than the wizard's widths allow */
table.tabtable-rs_b01bqdc2 tr.tabrow td.tabcol:first-child {
  min-width: 220px;
}

/* a subtler zebra than the colour picker offers */
table.tabtable-rs_b01bqdc2 tr.tabrow:nth-child(even) td.tabcol {
  background: rgba(0, 0, 0, 0.025);
}

/* something the wizard has no field for at all */
table.tabtable-rs_b01bqdc2 td.tabcol a:hover {
  text-decoration: underline wavy;
}

Append JavaScript

A plain box for code that runs on the page with the table, and two checkboxes for the libraries it may need.

Find the table by the same class the CSS box tells you about, so your code cannot wander onto another table:

document.addEventListener('DOMContentLoaded', function () {
  var table = document.querySelector('table.tabtable-rs_b01bqdc2');
  if (!table) return;

  table.querySelectorAll('tr.tabrow td.tabcol:nth-child(4)').forEach(function (cell) {
    if (parseFloat(cell.textContent) > 100) cell.style.fontWeight = 'bold';
  });
});

What the wizard does with it

Because the CSS and JavaScript become files of the ruleset, they travel with it: export the ruleset archive and they are inside it; import it on another site and they arrive too.

Common questions