10. Table of Contents


 Prev:
9. Image
Menu: 
WYSIWYG HTML
 Next:
11. Subpage Listing

Table of Contents Html

Create Table of Contents in Google Sites through the WYSIWYG Insert HTML menu.

Table of Contents WYSIWYG Menu



Table of Contents Html

An Example of the Html code generated by Google Sites for the Table of Content.

Table of Contents - Example


Table of Contents Properties


When editing a Subpage Listing with it's own WYSIWYG submenu.
  • Properties
  • Alignment
  • Size
  • Text Wrapping
  • Link
Under the properties [Gear] button you have the following:
  • Width
  • Levels



Standard Table of Contents


<img src="https://www.google.com/chart?chc=sites&amp;cht=d&amp;chdp=sites&amp;chl=%5B%5BTable+of+contents'%3D20'f%5Cv'a%5C%3D0'10'%3D249'0'dim'%5Cbox1'b%5CF6F6F6'fC%5CF6F6F6'eC%5C0'sk'%5C%5B'%5D'a%5CV%5C%3D12'f%5C%5DV%5Cta%5C%3D10'%3D0'%3D250'%3D297'dim'%5C%3D10'%3D10'%3D250'%3D297'vdim'%5Cbox1'b%5Cva%5CF6F6F6'fC%5CC8C8C8'eC%5C'a%5C%5Do%5CLauto'f%5C&amp;sig=TzxATGSyGo59uvdEcnpk0pMmCmI" style="display: block; margin-right: auto; margin-left: auto; text-align: center; " props="align:center;width:250;maxDepth:6;wrap:false" id="9557458264753222" type="toc" class="sites-placeholder-toc" width="250" height="300">


Standard Table of Contents HTML Code

The 'table of contents' code is specific html for Google Sites only and will only render within Google Sites.

Google Sites Table of Contents HTML Code

Quickly add a Table of Contents while manually HTML editing by using <div class="goog toc">

This HTML code will render as a Table of contents for the active page. The is also useful for Google Apps Script development.

Google Sites filters the Table of Contents HTML code, even when html is edited manually.

<img src="https://www.google.com/chart?chc=sites&amp;cht=d&amp;chdp=sites&amp;chl=%5B%5BTable+of+contents'%3D20'f%5Cv'a%5C%3D0'10'%3D249'0'dim'%5Cbox1'b%5CF6F6F6'fC%5CF6F6F6'eC%5C0'sk'%5C%5B'%5D'a%5CV%5C%3D12'f%5C%5DV%5Cta%5C%3D10'%3D0'%3D250'%3D297'dim'%5C%3D10'%3D10'%3D250'%3D297'vdim'%5Cbox1'b%5Cva%5CF6F6F6'fC%5CC8C8C8'eC%5C'a%5C%5Do%5CLauto'f%5C&amp;sig=TzxxxxxxxxxxxxCmI" style="display: block; margin-right: auto; margin-left: auto; text-align: center; " props="align:center;width:250;maxDepth:6;wrap:false" id="955xxxxxxxxx222" type="toc" class="sites-placeholder-toc" width="250" height="300">

Google Sites Creates an Additional  attribute for the image [chart] tag.

The Inline CSS props , type and style attribute can also be used, by clicking the <HTML> button in the Insert HTML .

<div style="" >Inline CSS </div>



 Prev:
9. Image
Menu: 
WYSIWYG HTML
 Next:
11. Subpage Listing



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.