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

[Tyler Naval]

Is it possible to add photos to the table that exist on your computer? I have the same type of table as the OP and I want to add our board members photos to the table.

[freezinKT]

On 8/28/2023 at 11:46 AM, Tyler Naval said:

Is it possible to add photos to the table that exist on your computer? I have the same type of table as the OP and I want to add our board members photos to the table.

You can upload all the photos on your hidden Assets page (shown in that left bar) and then reference them with the

<img>

tag shown above. That's how I have used images I needed to upload in SiteBuilder.

[Michael Blair]

Rob -

Thanks for these table tricks. Hoping you can help me out with another trick. I'm trying to editing the background color and fonts in the table builder page element. The SE Help pages cover creating or uploading the content, but nothing on editing colors, fonts, etc. Basically, I want the table to align with our web design such that background color in the table cells is black, not white. Below is a link to the page with the table I'm trying to edit. 

https://www.kcfirevolleyball.com/page/show/8291482--center-kc-fire-12-1-select-team

Thanks.