Follow

Using HTML tables

Tables can be one of the most useful, yet underused tools available when creating page content – they enable you to set backgrounds on your pages, order and justify text and images, and make your pages look professional. Once understood, they are quick and easy to use.  This Quicksheet will demonstrate the basic elements of creating tables and will help you create visually appealing and professional looking content.

Getting started

The ability to add a table is part of the editor in the module: Page HTML. Make sure this module is on your page and open the Page Editor by choosing “Edit Page Content” from the Page Tools menu.

Tip: When planning what you want to display on your page, it often helps to draw it on paper. This will help you to see the content is structured and understand what kind of table is necessary to create and the dimensions it will need.

Creating the table

In the Page Editor and click on the [Inset Table] button and click on the [Table Wizard] option.

html1.png

Use the Table Wizard to add rows and columns until you have the desired table structure. The [Row Span] and [Column Span] functionality allows for cells to be merged together.

html2.png

The [Table Properties] tab allows you to specify characteristics of the table, such as height, width, spacing, content alignment, background colour and borders (found under the Style Builder). Similar settings can be made on a cell by cell basis by using the [Cell Properties] tab. Click [OK] to insert this table. The table is now ready for content to be added into the cells. Click in the desired cell and add content as normal – text, images, links, etc.

Tip: Depending on the content to be entered into the table, it sometimes helps to specify the height and width of the table and/or cells. Please refer to the page widths here to maximise use of the space. Alternatively, percentages can be used to specify width, for example a 100% width table might have 4 cells, each with a width of 25%.

Click [Update Page Content] to submit the changes to the page.

html3.png

Adding borders and other styling

If a table is used for positioning only, it is preferred that the table have no borders. However, if borders are desired, they can be added. Borders (and other styling can be applied to the table as a whole or individual cells. To apply the styling, right-click on the table in the Page Editor window and select Table Properties or Cell Properties (if the styling is for an individual cell, make sure the cursor is in the correct cell first). Open the Style Builder functionality by clicking the adjacent icon.

html4.png

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk