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.
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.
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 NHL.com (as seen below). To customize your table, just replace the URL within the quote marks and then add the description of the link.
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.
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.