Google Setup

Steegle.com now offers two new services:
Hassle free setup with minimum of effort.
Powered by Google Apps

RSS Feed

If you wish to receive updates from steegle.com please subscribe to the
RSS Feed

Recent site activity

Websites‎ > ‎Google Sites How-tos‎ > ‎

Google Sites - Advanced Tables

posted 29 Aug 2008 11:25 by Stephen Hind   [ updated 20 Aug 2009 01:41 ]

I thought I would write an article of how to insert a table into a Google Site and then remove the borders.  This will require you to edit the HTML so if you don't feel you want to do that you will still have the borders.


Instructions

  1. Go to the page you want to have the table on and use the Edit Page button.
  2. Use the Table menu and then the Insert Table sub-menu and then choose the size of the table you want.
  3. Fill the table with the content you want so it will be easier for you to spot in the HTML editor.
  4. Use the HTML button to open the HTML editor and look for the code:
    <table style="border-color: rgb(136, 136, 136); border-width: 1px; border-collapse: collapse;" border="1" bordercolor="#888888" cellspacing="0">
  5. If you just want to remove the border delete
    style="border-color: rgb(136, 136, 136); border-width: 1px; border-collapse: collapse;" border="1" bordercolor="#888888"
    from the code found in step 4, so it looks like
    <table cellspacing="0">
  6. If you want to centre the table then add
    style="margin: 0pt auto;"
    so it looks like
    <table style="margin: 0pt auto;" cellspacing="0">
  7. If you want to make the table and column widths proportional add
    width: 90%;
    to the style attribute in the table tag, so it looks like
    <table style="margin: 0pt auto; width: 90%;" cellspacing="0">
    and for the columns change the
    width: 60px;
    to
    width: 50%;
    on all of the table cell tags (<td></td>) - obviously use the percentages you want.
  8. If you wan to merge two table cells in a row then add
    colspan="2"
    to the first table cell and opening tag (<td>) and remove the closing tag and next table cell opening tag, so it looks like
    <td colspan="2">cell 1 and cell 2</td>
  9. If you wan to merge two table cells in a column then add
    rowspan="2"
    to the table cell in the first row and remove the table cell in the second row.
  10. If you want to add a background colour (or background color/fill/shading if you prefer) then add
    background-color: rgb(255, 204, 204);
    to the style attribute in the table cell tags, so it looks like
    <td style="width: 50%;background-color: rgb(255, 204, 204);">
    pick colour codes you want, obviously: you can use hex codes if you like; Google Sites will automatically change them into RGB values.  you can add this to rows or tables if you prefer.
  11. If you want to remove some of the borders add
    border-bottom: 0px solid rgb(136, 136, 136);
    to the style attribute in the table cell tags, so it looks like
    <td style="border: 0px solid rgb(136, 136, 136); width: 50%;">
I hopes this helps make better tables in Google Sites.
 RSS Feed of my Google Sites How-Tos


Examples

Unformatted Table with Content

 cell 1
 cell 2
 cell 3
 cell 4

Table with Content and Border Removed

 cell 1
 cell 2
 cell 3
 cell 4

Table with Content, Border Removed and Centred

 cell 1
 cell 2
 cell 3
 cell 4

Table with Content, Centred and Proportional Widths

I've put the borders back on for clarity.

 cell 1
 cell 2
 cell 3
 cell 4

Table with Content and Cells Merged in a Row

 cell 1 and cell 2
 cell 3
 cell 4

Table with Content and Cells Merged in a Column

 cell 1 and cell 3  cell 2
 cell 4

Table with Content and Background (Fill) Colours

 cell 1
 cell 2
 cell 3
 cell 4

Table with Content and Partial Borders

 cell 1
 cell 2
 cell 3
 cell 4

  Sign in   Recent Site Activity   Terms   Report Abuse   Print page  |  Powered by Google Sites