Organisational Chart & Site Map

A frequently used feature of the table is to create Organization Charts or Site Maps. In this page, we will show you how to create these features using a table and provide you with a template to start.

Organization Chart

Markdown

OCCUPANTS OF STY 143

John Pecking Executive john@chickens.com	Patrick Runner	Ronaldo Occupant ronaldo@chickens.com
Timmy Emotional Support Officer timmyk@chickens.com	Wilson Morning Alarm wilson@chickens.com	Bruno Worm Cleaner

Markdown code

You can copy below code as a template to create your own organization chart:

| | | |
|:-:|:-:|:-:|
|<img src="/images/chicken.jpg" style="width:100px; aspect-ratio:1.6/1" />|<img src="/images/chicken.jpg" style="width:100px; aspect-ratio:1.6/1" />|<img src="/images/chicken.jpg" style="width:100px; aspect-ratio:1.6/1" />|
|John<br> Pecking Executive<br>john@chickens.com|Patrick<br>Runner<br>patrick@chickens.com|Ronaldo<br>Occupant<br>ronaldo@chickens.com|
|<img src="/images/chicken.jpg" style="width:100px; aspect-ratio:1.6/1" />|<img src="/images/chicken.jpg" style="width:100px; aspect-ratio:1.6/1" />|<img src="/images/chicken.jpg" style="width:100px; aspect-ratio:1.6/1" />|
|Timmy<br>Emotional Support Officer<br>timmyk@chickens.com|Wilson<br>Morning Alarm<br>wilson@chickens.com|Bruno<br>Worm Cleaner<br>bruno@chickens.com|

/images/chicken.jpg refers to the file path of your image. In general, all images are uploaded into the /images folder and you’ll only require to change the filename (note the image type .jpg, .gif, .png)

style=”width:100px; aspect-ratio:1.6/1” This portion refers to the adjustment made to the image by the browser. I have fixed the width as 100 pixels and the aspect ratio such that when the screen size changes, your images will not be skewed.

John<br> Pecking Executive<br>john@chickens.com refers to the text that is added below the images. You can adjust these accordingly. <br> is a line break to shift the following text onto the next line.

Site Map

Site maps are created using the table feature of Isomer. We can do so using either Markdown and html. While Markdown is more readable, it does not allow for resizing of the images after the image is uploaded. This would mean that you will need to crop the images to the same size before uploading them or they will appear messy in the site map.

Markdown

An example of a site map using Markdown:

Singapore Flyer	Singapore River	Merlion Park	Sentosa
Gardens by the bay	Lau Pa Sat	Changi Airport	Esplanade

Example code:
You can copy below code as a template to create your own organization chart:

|   |   |   |   |
|:—:|:—:|:—:|:—:|
| [](https://URL1/)|[](https://URL2/)|[](https://URL3/)|[](https://URL4/)|
|Text1|Text2|Text3|Text4|
|[](https://URL5/)|[](https://URL6/)|[](https://URL7/)|[](https://URL8/)|
|Text5|Text6|Text7|Text8|

An example of a Site Map using html:

Common Spaces		Special Rooms & eco-Environment Learning Spaces				Sport Facilities
	Main Driveway		Secret Garden		The Main Mangrove		Indoor Sports Hall
	Foyer		Maths Room		Eco-Garden		Field
	Parade Square		Science Room		Permaculture and Butterfly Garden
	Playground		Art Room		Experimental Pond
	Canteen		Music Room		Koi Pond
			PAL Room		Flow Pond
			Library		Turtle Pond
			Computer Lab
			Learning Lab
			Dental Clinic