Table Tricks

[jjdouvier]

I have a table of board members with names, position, email, and phone numbers.  I would like to be able to allow the email to be clicked on so the user can email versus copying the email address.  If there a way to do it in the table format?

[Rob Bedeaux]

The table page element in Sitebuilder is dead simple to use. however, lurking beneath the surface are tons of hidden flexibility. What do you mean by this, you ask?

Well one of its hidden features is that you can include HTML into the cells to affect the data that is presented. Attached is an example of a table that includes the following modifications in the cells. In addition to the screenshot is a CSV file that you can upload right into the table element and see all of the changes below.

1. Images
   • You can insert an image from the web into a cell by using the following code:
     <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/Indiana_Hoosiers_logo.svg">
   • Want to limit the size of the image? Simply add on a height or width like this:
      width="50px" height="50px"
     That results in the following line
     <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/Indiana_Hoosiers_logo.svg" width="50px">
2. Hyperlinks
   • You can hyperlink text or the image example above. You just need to use:
     <a href="https://www.myurl.com">Your linked text here</a>
   • Need it to also open in a new window? Add this:
     target="_blank"
     The completed line looks like this
     <a href="https://www.myurl.com" targe="_blank">Your linked text here</a>
3. Text formatting
   • You can add basic text formatting like bold or italics by wrapping the text in the appropriate commands like this:
     <strong>make this bold</strong>
     <em>makes this italics</em>
     <u>underline this text</u>
     ^{superscript this}
     _{subscript this}
4. Column alignment (bonus via CSS)
   • You can also adjust the column alignment in the head code of your page. Depending on your site theme, it may default to center justified or left justified (my theme below is center by default). To change this add the following bit of code to the head of the page:

     <style>.dataTable tr td:nth-child(2) {
         text-align: left;
     }

     .dataTable tr td:nth-child(3) {
         text-align: left;
     }

     </style>

     This tells the browser to left justify columns two and three in my example below.

With some basic HTML skills you can take your tables to the next level. 

Big 10 Schools.csv