skip navigation

Simple coding gives tables custom look

03/26/2015, 3:45pm CDT
By Loren Nelson

Tables are great tools for listing blocks of information in an easily digestible way. But be warned. The format can lend itself to drab design and lots and lots of static text.

With a bit of extra work, and a little coding knowledge, it’s easy to give tables a custom look without enlisting the aid of an interactive designer.

As an example, we took a look at the Minnesota Hockey Hub's list of former Minnesota high school players now in the NHL (see image below). Logos add some color and variance to the large table, and hyperlinks are built in for the name of the player, the team he plays for and his former high school and college teams.

The key to doing this extra work when setting up a table is building it in a spreadsheet and then importing the Excel or .csv file into Sitebuilder's Table Builder page element.

Keep reading below the image for a step-by-step guide on how to add hyperlinks and images to a table.

How it works

Step 1: Open spreadsheet document.
Note: The Table Builder page option has a Creation Preference drop down that lists the default Use Table Builder option or the preferred (for large tables) Import from Xcel or .csv option.
Step 2: Add headers at the top of your columns, then start filling in the columns with the data you want to display.
Hyperlink coding: Instead of simply listing Tim Jackman, the Anaheim Ducks player is listed with a hyperlink to his player page on (as seen below). To customize your table, just replace the URL within the quote marks and then add the description of the link.  

Step 3: Images and flyover descriptions can also be added to the links placed in each column.
Note: The images below show all the pieces of code that are strung together to form the second column, or Team column, in the Hockey Hub table pictured above. 

Step 4: Import your file by selecting the Table Builder page element.

Step 5: Give your table a name by filling in the Table Subtitle field. Choose the Import from Excel or .csv option in the Creation Preference dropdown. Click the Choose File button, then locate the document you have created and saved that has all your table information. Click the Create This Page Element button at the bottom.

Finished product feature: When the cursor is placed over the logo or the Anaheim Ducks hyperlink, as displayed in the image below, the flyover text appears with more information.


Community Forum


Tag(s): Pro Tips