How do I style a table to match my Squarespace site design?
The Custom Table Block keeps styling intentionally basic and prioritizes readability, but you can match it to your site design two ways: apply formatting through the connected Google Sheet, or write custom CSS. By default the table follows your site's font, and the block exposes per-row and per-cell classes (`.table-row-1`, `.table-cell-1`, and so on) so you can target individual rows or columns for colors, borders, and emphasis.
Start with the defaults
Styling is deliberately simple so tables stay readable. Out of the box the table inherits your site’s font, which means it already aligns visually with the rest of your design before you add anything. You can extend this with formatting applied directly in the connected Google Sheet, which carries through to the rendered table (Squarewebsites).
Take control with custom CSS
For finer control, add custom CSS. The block generates predictable classes you can target:
.table-row-1,.table-row-2— style individual rows (for example, a header or “most popular” tier)..table-cell-1,.table-cell-2— style individual columns or cells.
Use these classes to set background colors, borders, padding, text alignment, and emphasis without touching the plugin code itself. Add the CSS in Header Injection, which requires a Business plan or higher; on a Personal plan a Markdown block workaround is available (Squarewebsites).
Responsive styling note
On mobile the table is not shrunk by default — it displays in segments with horizontal and vertical scrolling. If you want a compact layout on phones, use the same custom CSS to shrink the whole table within the viewport (Squarewebsites).
See the full Custom Table Block product page on squarewebsites.org for live pricing, demos, and setup details.
Sources: squarewebsites.org · squarewebsites.org