posted 29 Aug 2008 11:25 by Stephen Hind
[
updated 9 May 2013 02:13 by Stephen Hind
]
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:
<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
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">
- If you want to centre the table then add
style="margin: 0pt auto;"
so it looks like
<table style="margin: 0pt auto;" cellspacing="0">
- 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. (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
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>
- 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.
- 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.
- 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%;">
-
If you want to vertically align the content of your cells add
vertical-align: middle;
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;">
More CSS vertical alignment options
I hopes this helps make better tables in Google Sites. | 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 |
Table with Content with Vertical Alignment
cell 1
|
cell 2
|
cell 3
|
cell 4 |
|
|