Squarespace Table

Squarespace gives you no way other than code to display a table of information. We wrote a little script which turns a list of information into a table which you control formatting by placing special characters within each list item.


  • This is a table
  • This is a column | And this is a column
  • This is another row | And then another column with more content
  • Row 3 | Row 3
  • Sub header 
  • One more row | Final Row
  • One more header
  • Ok, one more | And then a link to nothing
  • Final row with a lot of copy | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  • ~~tbl

The table above in edit mode

When you're in edit mode, by adding --tbl as the last bullet, this signals the script to create a table out of your list. When you add a pipe | that defines a table row. When you have no pipe, that's a header. No pipe and bold will shade the row.

Begin by adding the following to Advanced > Code Injection

<!-- Create Table -->
<script>
  jQuery(document).ready(function($){
    detectCreateTable();
  });

  function detectCreateTable(){
    var chk;

    $('.sqs-block-content ul').each(function(indexTop) {
     $(this).find('li').each(function() { 
      chk = $(this).html();
      if(chk.indexOf('~tbl') != -1){
        $(this).parent('ul').addClass('makeTable table_' + indexTop);

        var pipeArray;
        var table = $('<table class="tableFromUl lineitems">');
        var tbody = $('<tbody>');
        var tr_build = '';
        var ht = '';
        var ulTableID = 'ul.makeTable.table_' + indexTop;
        var ulTableIDLI = 'ul.makeTable.table_' + indexTop + ' li';
        //debug('ulTableID ' + ulTableID);
        $(ulTableIDLI).each(function(index){
          chk = $(this).html();
          
          if(chk.indexOf('|') != -1){
            ht += '<tr class="row_' + index + '">';
            tr_build = '';
            pipeArray = chk.split('|');
            $.each(pipeArray, function(y) {
              tr_build += '<td class="subrow">' + pipeArray[y].trim() + '</td>';
            });
            ht += tr_build;
          }else if(chk.indexOf('~~tbl') != -1){
            //Skip this
          }else if(chk.indexOf('|') == -1 && chk.indexOf('<strong>') != -1 ){
            ht += '<tr class="subheader row_' + index + '">';
            ht += '<td colspan="2">' + chk + '</td>';        
          }else{
            ht += '<tr class="fullrow row_' + index + '">';
            ht += '<td colspan="2">' + chk + '</td>';
          }
          
          ht += '</tr>';
        });
        
        tbody.append(ht);
        table.append(tbody);    
        $(ulTableID).after(table);
      }
     });
    });
  }

</script>
<!-- END: Create Table -->

Then, add this to Design > Custom CSS

/* ~~~~~~~~~~~~~~~~~~~~ [ Make Table ] ~~~~~~~~~~~~~~~~~~~~ */
ul.makeTable {
  display: none;
}
table {
  &.lineitems {
    tr {
      &.subheader {
        box-shadow: none;
        border-bottom: 0;
        border-top: 16px solid #fff !important;

        td {
          background-color: rgba(0,0,0,.05) !important;  
          font-size: 1.5rem;
          padding-bottom: 1rem;
          padding-top: 1rem;
          text-align: center !important;
          
          strong {
            font-weight: 400 !important;
          }
        }
      }
      &:not(.subheader){
        background-color: transparent;
        border-bottom: 15px solid #fff;
        border-top: 15px solid #fff;
      }
      td {
        a {
          border-bottom: 1px dotted #be3131;
          font-weight: 400;
          text-decoration: none;

        }
      }
      td:nth-child(1){
        background-color: transparent;
        border-right: 1px dotted rgba(0,0,0,.1);
        font-weight: 400;
        line-height: 1.0;
        margin-bottom: .3rem;
        margin-top: .3rem;
        padding-right: 1rem;
        width: 50%;
        text-align: right;

        strong {
          font-weight: 500;
        }
      }
      td:nth-child(2){
        background-color: transparent;
        font-size: 1rem;
        line-height: 1.2;
        padding-left: 1rem;
        padding-bottom: .5rem;
        padding-top: .5rem;

        strong {
          font-weight: 500;
        }
      }
      &.fullrow {
        td {
          background-color: transparent;
          border-right: none;
          display: table-cell;
          font-size: 1.3rem;
          padding: 1rem 0 !important;
          text-align: center !important;

          &:after {
            content: '\00a0';
            background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, rgba(0,0,0,.2)));
            border-style: none;
            height: 1px !important;
            margin: 2.2rem auto 0 auto;
            left: 0;
            right: 0;
            position: absolute;
            width: 100%;
            left: 0;
          }
          &:before {
            background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, rgba(0,0,0,.2)));
            content: '\00a0';
            border-style: none;
            height: 1px;
            margin: -.9rem auto 0 auto;
            left: 0;
            right: 0;
            position: absolute;
            width: 100%;
            left: 0;
          }
        }
      }      
    }
  }
}
/* ~~~~~~~~~~~~~~~~~~~~ [ End Make Table ] ~~~~~~~~~~~~~~~~~~~~ */