skip navigation

Simple coding gives tables custom look

By Loren Nelson, 03/26/15, 3:45PM CDT


Images and hyperlinks code can be added in a spreadsheet and then imported into Table Builder page element

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.

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.

Add headers at the top of your columns

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.  

Images and flyover descriptions

These 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. 

Import your file by selecting the Table Builder page element.

Give your table a name

  • You can do this 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.

Loren Nelson Headshot

About Loren Nelson

Loren Nelson is Community Manager at SportsEngine. He is also the National Media Editor and has served in a variety of other customer facing and media roles since 2009.

Loren's Social Media Contacts