Squarespace Tip: Copy & Paste For Beautiful HTML Tables

I've created 5 HTML tables just for you! Feel free to copy and paste my CSS code to use on your own Squarespace site. 

-Lauren


1. The Classic Table

Tag your table with class = "classic-white-grey"

Month Sales
January $50,000
February $39,000
March $44,000
April $49,000

Copy & paste this CSS code into your Custom CSS file: 

 
 .classic-white-grey {
        margin:auto;
        background-color: white;
        border: 1px solid #000;
        border-collapse: collapse;
        width:300px;  
} 
.classic-white-grey th {
         padding:6px;
         height:35px;
         color: #000;
         background-color: #fff;
         text-align:left;
}
.classic-white-grey td {
        padding: 6px;  
}
.classic-white-grey tr:nth-child(even){
        background-color: #e8e8e8;
}
 

2. The Soft Pink Table

Tag your table with class = "pink"

Month Sales
January $50,000
February $39,000
March $44,000
April $49,000

Copy & paste this code into your Custom CSS file: 

 
 .pink {
        margin:auto;
        border: 1px solid #ffcbd3;
        background-color: white;
        width:300px;
} 
.pink th {
        padding: 6px;
        height:35px;
        color: #fafafa;
        background-color: #ffcbd3;
        text-align:left;
        font-weight:100;
}
.pink td {
        padding: 6px;
        border:0px;
}
.pink tr:nth-child(odd){
        background-color: #fff0f2
}             
.pink tr:nth-child(even){
        background-color: #fafafa;
}
 

3. The Black-Green Table

Tag your table with class = "black-green"

Month Sales
January $50,000
February $39,000
March $44,000
April $49,000

Copy & paste this code into your Custom CSS file:

 
.black-green {
        margin:auto;
        background-color: #222222;
        border-collapse: collapse;
        width:300px;   
}
.black-green th {
        padding:6px;
        height:35px;
        color: #32CD32;
        background-color: #393939;
        text-align:left;      
} 
.black-green td {
        padding: 8px;
        color:white;  
}
 

4. The Blue-Yellow Hover Table

Tag your table with class = "blue-yellow-hover"
Extra feature: hover over a table row.

Month Sales
January $50,000
February $39,000
March $44,000
April $49,000


Copy & paste this code into your Custom CSS file: 

 
.blue-yellow-hover {
        margin:auto;
        background-color: #34495e;
        border-collapse: collapse;
        width:300px;  
}
.blue-yellow-hover th {
        padding:6px;
        height:35px;
        color: yellow;
        background-color: #34495e;
        text-align:left;     
}
.blue-yellow-hover td {
    padding: 8px;
}    
.blue-yellow-hover tr{
    color:white;
}    
.blue-yellow-hover tr:hover{
    background-color: yellow;
    color:#34495e;
}
                
 

5. The Classic Blue Table

Tag your table with class = "classic-blue-hover"
Extra feature: hover over a table row.

Month Sales
January $50,000
February $39,000
March $44,000
April $49,000

Copy & Paste this code into your Custom CSS file: 

 
 .classic-blue-hover {
        margin:auto;
        background-color: white;
        border-collapse: collapse;
        width:300px;
}
.classic-blue-hover th {
        padding: 6px;
        height:35px;
        color: #fff;
        background-color: #000080;
        text-align:left;
}
.classic-blue-hover td {
        padding: 6px;
}         
.classic-blue-hover tr:nth-child(odd){
        background-color:#dae3f1;
}
.classic-blue-hover tr:hover{
        background-color: #3F69AA;
        color: white;
}