Wednesday, 16 September 2015

5 tips for great looking tables in Google Sites

If you’ve ever inserted a table into a Google Site, you’ve probably noticed there are very few styling and formatting options available. This means many tables in Google Sites get left looking pretty dull. Don’t let your tables suffer the same fate! In this post, you’ll learn five ways to format and style Google Site tables by tweaking the HTML code of your page.

Note: This article relates to the Classic Google Sites only.

A little bit about the HTML for tables

If you’ve never worked with HTML before, don’t be daunted! Here are a few basics to help get you started. If you’re already familiar with HTML, skip ahead to the next section.

A simple HTML table is created using the HTML tags below. In this example, the table being created would have two rows and three columns:

<table>        Creates the table.
<tbody>       Signals the beginning of the body of the table.
<tr>             Creates the first row in the table.
<td></td>    Creates the first column. The text between the two tags will be put in a cell in the first                         column in the first row.
<td></td>    Creates the second column. The text between the two tags will be put in a cell in the                              second column in the first row.
<td></td>    Creates the third column. The text between the two tags will be put in a cell in the third                        column in the first row.
</tr>             Ends the first row.
<tr>              Creates the second row in the table.
<td></td>     The text between the two tags will be put in a cell in the first column in the second row.
<td></td>     The text between the two tags will be put in a cell in the second column in the second                           row.
<td></td>     The text between the two tags will be put in a cell in the third column in the second row.
</tr>             Ends the second row.
</tbody>      Signals the end of the body of the table.
</table>       Signals the end of the table.

You’ll notice that all opening tags are surrounded by < > and all closing tags are surrounded by < />.
Most of the tweaks in this post will require you to add extra code to the <table>, <tr> or <td> tags.

Accessing the HTML

Every Google Site page has HTML behind it. To access it:
1. Open the page you want to edit and click the Edit page (pencil) button.
2. Click the <HTML> button.


A window with the HTML will open. Look for the <table> tag to find the start of your table.


Tweak 1: Remove a table’s border

By default, a table will be created with a border. To remove the border, simply change the values in the border =”1” and border-width:1px to 0


You could also just delete these tags, however I find it easier to leave them in place in case I want to turn the borders back on. To do this, simply change the 0 to 1 again!

Tweak 2: Add a background colour

You can add a background colour to a row, the whole table or an individual cell. To do so, add the style=”background-color: #colour code” to either the <table>, <tr> or <td> tags.  You can find a list of colour codes here.

Here are a few examples of the adjusted code:


Tweak 3: Centre your table on the page

To put your table in the centre of the page, add style="margin: 0pt auto;" to the <table> tag. Here is what it should look like:


Tweak 4: Add some room (padding) between table cells

The default spacing in a Google Sites table often results in the text in different cells being very close together. You can add some breathing room between cell contents by adding  cellpadding=”XX” to <table> tag. Insert a number where the XX is. Try starting at 10 and adjust from there to find a setting that meets your needs. Here is what it will look like:


Tweak 5: Change the width of your table 

To change the width of the table (for example, to 90% of the total width of the page), add style=”width:90%” to the <table> tag. Here is what it should look like:



There are also heaps of other ways to format and style your table using HTML tags. After you’ve mastered the five tweaks above, check out this site for some more ideas.






3 comments:

  1. I found this incredibly helpful! Thank you!

    ReplyDelete
  2. Can I insert a background image in a table (TD tag) of Google Site? Thank you!

    ReplyDelete
    Replies
    1. Apologies for the delay in this reply. This article may help you insert a background image. I am not certain that Google Sites supports this, but give it a go and see what happens!

      http://html.com/attributes/table-background/

      Delete

Popular Posts