Unit 7. Setting up Tables (I)

In this unit we’re going to see how to work with tables. We’ll learn how to insert tables, combine cells, insert rows or columns, and how to change the border size.

All objects are aligned on the left side of the web site by default. But thanks to the tables it’s possible to distribute the text in columns, place the images next to a text block, and many more things we could not do without the tables.

At the moment most web sites are based in tables, and this is because they are very useful to improve the design options.

Tables are composed of a set of cells and are distributed in rows and columns. Below we have an example of a table:

To insert a table go to the Insert menu, and then select the Table option.

In the new window you will need to set the number of Rows and Columns, and the width of the table.

The Width can be defined in Pixels or as a Percent. The difference between these is that the width in Pixels is always the same, independent of the size of the browser window in which you are viewing the page, whilst the width in Percent shows the percentage of the browser window that will be occuped by the table and there fore it wil be adjusted relative to the size of the browser window. This allows users with a large screen to take advantage of the width of it.

Border thickness indicates the border thickness of the table in pixels. It is assigned a one (1) by default.

Cell Padding indicates the space between the cells content and the their borders.

Cell Spacing indicates the space between the table’s cells.

A heading for the table can also be established, and it is recommendable to use headings in the case of users that use screen readers. Screen readers read headings and help the users to follow the table information.

If you want to include a title, set it in the Caption option – the title will show up outside the table.

In align caption we indicate where we want to align the title in respect to the table.

In Summary: we indicate a description for the table which screen readers will read, remember that this text will not be visible in the user’s browser.

Cells are the squares that compose a table and are the intersection of the rows and the columns.

To insert any element into a cell such as text or images, you just have to place the cursor in there.