Custom Table Block lets you create and customized Tables on Squarespace.

Squarespace Custom Table Block Plugin

$45.00

Using this plugin you may now create and generate Table Blocks based on original Squarespace Markdown block just as users of our Squarespace Websites Tools Extension PRO do.

Add To Cart

Using this plugin you may now create and generate Table Blocks based on original Squarespace Markdown block just as users of our Squarespace Websites Tools Extension PRO do.

Using this plugin you may now create Table Blocks based on original Squarespace Markdown block just as users of our Squarespace Websites Tools Extension PRO do. Plugin hooks Markdown block and builds a HTML5 table for you based on manually added data or imported from *.csv file or synchronized with Google Spreadsheets. We also have some base table styles, mobile view and sorting feature. We allow html and markdown markup in table so you are able to add images and other stuff to tables.

To use all table features, please copy/add this code to your Injections tab :

<link rel="stylesheet" href="//assets.squarewebsites.org/custom-tables/style.css">
<script src="//assets.squarewebsites.org/custom-tables/custom-table.js"></script>

Scoring Place	Dog Name	Dog Breed	Dog Owner Name
1	Fredinant	Mixed/Mutt	Franklin Roosevelt
2	Mister Darcy	Basset Hound	Jill Heath
3	Estella	Wirehaired Pointing Griffon	Kyle Pemberton
4	Gruff	Bullmastiff	Glen Smith
5	Timmy	Golden Retriever	Hurley Plimpton
6	Munches	Mixed/Mutt	Missi Lynn
7	Ralphie Dean	Bichon	Tanya Francis
8	Wally	Beagle	Gary Snoopy
9	Dr. Frankenstein	Mixed/Mutt	Brian Cummings
10	Hooper	Boxer	John Doe
11	Corndog	Chocolate Lab	Si Robertson

Adding tables control in admin also need you to inject purchased javascript. So the best way is to add css styles to Header Injection while scripts may be in Footer. So your injections will look like:

If you did Injections right you may see Table Block in Blocks Menu now and ready to create tables.

Creating Tables process is the same as using our PRO Extension, so please check next "how-to" video.

Removing rows and columns

If you edit Table directly in settings (not with CSV or Google sheet) - you see dots icon when mouseover columns titles or rows - drag this icon and you will see a recycle icon bottom - dragging on this will delete column or row.

Styling Tables

Each site has own look, so plugin is not focusing on styling Tables - just giving you a way for easy manage tables on Squarespace site. But you may easy style your tables with just basic CSS knowledges, really simple. Example:

By default Table will follow general body font settings. Let's say you have many columns and need decrease font size to 10px to fit screen.

Table block has classes field, so you may type in Add custom class to your table field: fnt-size-10px, then go to Custom CSS and add a rule for this code.

table.fnt-size-10px {
    overflow: auto; /*allowing table be scrollable*/
    max-height: 70vh; /*limiting max height*/
    color: #000; /* set the font color */
    font-size: 10px; /*set the font size*/
    line-height: 1.4; /* set the text line-height */
    font-family: Helvetica; /* set font family */
    font-weight: 400; /* set font-weight  */
}

That's all folks, any table you added fnt-size-10px will be affected with that rules.

Next, each table row and cell has own number class, so if you want to set first column in bold, you will do:

.custom-table-block .table-cell-1 {
  font-weight: bold;
}

Advanced using

document.querySelector('table').addEventListener('table-init', function () {
 ----Your code here---
}, false);

Attention: Please divide Tables Blocks with another blocks, like Spacer or Line or some another except Markdown and Table. The reason is Squarespace split nearby Markdown blocks into one and we want to keep this for compatibility.