20. Table


Table HTML


 Prev:
19. Code		 Menu: 
WYSIWYG HTML		  Next:
21. Other WYSIWYG menus

Embed Table HTML

Embed a table in google sites using the WYSIWYG Insert html menu.

Table WYSIWYG Menu





Table Html Example

Basic 2 Cell Table:

 Table Cell 01 Table Cell 02



<Table><tbody><tr><td>Table Cell 01</td><td>Table Cell 02</td>
</tr></tbody></Table>


Standard Table HTML Code


<Table><tbody><tr><td>Table Cell 01</td><td>Table Cell 02</td></tr></tbody></Table>

The standard Table HTML has visible borders by Default.

Google Sites Table HTML Code


<table style="border-collapse: collapse; border-top-color: rgb(136, 136, 136); border-right-color: rgb(136, 136, 136); border-bottom-color: rgb(136, 136, 136); border-left-color: rgb(136, 136, 136); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; " border="1" bordercolor="#888" cellspacing="0"><tbody><tr><td style="width: 60px; ">&nbsp;Table Cell 01</td><td style="width: 60px; ">&nbsp;Table Cell 02</td></tr></tbody></table>

Google Sites Creates an Additional  style attribute for the Table tag.

The Inline CSS style attribute can also be used, by clicking the <HTML> button in the Menu Bar .

For Example : The default border can be set to 0px to hide it.

<table style="... </table>

You can also modify the table using colspan and rowspan to merge particular Table Headers, Cells and Rows.

<table border=2 cellpadding=4> <tr> <th colspan=2>Header 01</th> </tr> <tr> <td>01</td> <td>1.1</td> </tr>
<th colspan=2>Header 02</th> </tr> <tr> <td>02</td> <td>2.1</td> </tr> </table>

Inline CSS





Google Sites - WYSIWYG HTML Menus


WYSIWYG Menu - Menu bar

WYSIWYG Menu Bar

WYSIWYG Menu - Insert HTML

WYSIWYG Insert Menus

WYSIWYG Menu - Format HTML

WYSIWYG Format Menus

WYSIWYG Menu - Insert Table HTML

WYSIWYG Insert Table Menu


WYSIWYG Menu - Adjust Layout HTML

The Layout HTML Menu is not adjustable manually through the HTML editor.

WYSIWYG LAYOUT Menu