|
Instructions
- Go to the page you want a 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 center 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.
- 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 color (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, b204, 204);">
pick
color 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%;">
|
Examples
4. Unformatted Table
cell 1
|
cell 2
|
cell 3
|
cell 4
|
5. Table with Border Removed
cell 1
|
cell 2
|
cell 3
|
cell 4
|
6. Table with Border Removed and Centered
cell 1
|
cell 2
|
cell 3
|
cell 4
|
7. Centered and Proportional Widths
I've put the borders back on for
clarity.
cell 1
|
cell 2
|
cell 3
|
cell 4
|
8. Cells Merged in a Row
cell 1 and cell 2
|
cell 3
|
cell 4
|
9. Cells Merged in a Column
| cell 1 and cell 3
|
cell 2
|
cell 4
|
10. Background (Fill) Colors
cell 1
|
cell 2
|
cell 3
|
cell 4 |
11. Partial Borders
cell 1
|
cell 2
|
cell 3
|
cell 4 |
|
|
|
