Add a Table to Your Squarespace Website
Do you have a sizing guide or other bit of information that you would love to place as a table in Squarespace? Currently there is no table block in Squarespace. However, we can use a table generator and some custom code to make this happen.
In this video, I will show you how to use custom code to add a table to your Squarespace website. All the code used in the video is provided below.
Resource Used:
The following code is used in the video.
HTML
<div class="custom-table"> CODE GOES HERE </div>
CSS
/* Size Table */
.custom-table table {
width: 100%;
table-layout: fixed;
tr,
td,
th {
padding: 1vw;
text-align: center;
border: 2px solid black;
}
thead {
background-color: grey; /*background color of titles */
color: white; /*font color of titles */
}
tbody tr:nth-of-type(2n-1) {
background-color: white; /* background color of white rows */
color: grey; /* font color of white rows */
}
tbody tr:nth-of-type(2n) {
background-color: grey; /* background color of purple rows */
color: white; /* font color of purple rows */
}
}
@media only screen and (max-width: 640px) {
.custom-table table {
tr,
td,
th {
font-size: 0.8rem; /* Font Size on Mobile */
}
}
}