Advanced Tables - classic Google Sites

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.

Another approach to adding useful tables to your site is to use our Awesome Tables gadget that uses a Google Drive Spreadsheet for the content of the table and a gadget to format the table and provide filters and sorting. For more information see Google Sites - Awesome Table - Gadget.

For new Google Sites see these instructions: Insert HTML Tables - new Google Sites

Instructions

Go to the page you want to have the table on and use the Edit Page button.
Use the Table menu and then the Insert Table sub-menu and then choose the size of the table you want.
Fill the table with the content you want so it will be easier for you to spot in the HTML editor.
Use the HTML button to open the HTML editor and look for the code:
1. - <table style="border-color: rgb(136, 136, 136); border-width: 1px; border-collapse: collapse;" border="1" bordercolor="#888888" cellspacing="0">
If you just want to remove the border delete
1. - style="border-color: rgb(136, 136, 136); border-width: 1px; border-collapse: collapse;" border="1" bordercolor="#888888"

1. from the code found in step 4, so it looks like
  - <table cellspacing="0">

If you want to centre the table then add
1. - style="margin: 0pt auto;"

1. so it looks like
  - <table style="margin: 0pt auto;" cellspacing="0">

If you want to make the table and column widths proportional add
1. - width: 90%;

1. to the style attribute in the table tag, so it looks like
  - <table style="margin: 0pt auto; width: 90%;" cellspacing="0">
2. and for the columns change the
  - width: 60px;
3. to
  - width: 50%;
4. on all of the table cell tags (<td></td>) - obviously use the percentages you want. (You can make this easier by adding XHTML <col></col> tags and XHTML <colgroup></colgroup> tags)

If you wan to merge two table cells in a row then add
1. - colspan="2"

1. 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>

If you wan to merge two table cells in a column then add
1. - rowspan="2"

1. to the table cell in the first row and remove the table cell in the second row.

If you want to add a background colour (or background color/fill/shading if you prefer) then add
1. - background-color: rgb(255, 204, 204);

1. to the style attribute in the table cell tags, so it looks like
  - <td style="width: 50%;background-color: rgb(255, 204, 204);">
2. 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.

If you want to remove some of the borders add
1. - border-bottom: 0px solid rgb(136, 136, 136);

1. to the style attribute in the table cell tags, so it looks like
  - <td style="border: 0px solid rgb(136, 136, 136); width: 50%;">

If you want to vertically align the content of your cells add

- vertical-align: middle;

1. to the style attribute in the table cell tags, so it looks like
  - <td style="border: 0px solid rgb(136, 136, 136); width: 50%; vertical-align: middle;">
2. More CSS vertical alignment options

I hopes this helps make better tables in Google Sites.

Examples

Unformatted Table with Content

Table with Content and Border Removed

Table with Content, Border Removed and Centred

Table with Content, Centred and Proportional Widths

Table with Content and Cells Merged in a Row

Table with Content and Cells Merged in a Column

Table with Content and Background (Fill) Colours

Table with Content and Partial Borders

Table with Content with Vertical Alignment

UK Sales: +44 (207) 871 5021

US Sales: +1 (302) 672 3007

W: steegle.com/contact

@: Start an email conversation

Steegle.com Privacy Policy

Steegle.com provides independent consultation and advice on: design and use of the cloud-based Google Sites platform for public websites, private intranets and secure dashboards; Google Workspace deployment, migration and training; Apps Script development, automation and workflows. Google experts since 2008.