Unit 7. Setting up Tables (I)

In this theme 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 defect. But thanks to the tables it's possible to distribute the text by way of columns, put the images next to a text block, and many more things we could not do without the existence of the tables.

At the moment most web sites are based in tables, and this is because they are very useful at the time of improving 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:


Insert a table

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

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

The Width can be defiend 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 percent of the browser window that will be occuped by the table and is adjusted by the size of the browser window. This allows users that have a large size of screen and taking advantage of the width of their screens.

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

Cell Padding indicates the space between the content of the cells 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 users to follow the table information.

If we want to inlcude a title, we indicate this 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 Conclusion: we indicate a description for the table which screen readers read in the concluding text, remember that this text isn't in the users browser.


Cell Padding


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



Text and image






Text inside a cell










To insert any element into a cell such as text or images, you just have to put the pointer in the cell that you want to put the element into.

To practice you can perform the Step by step exercise in Creating a table

  Go to the previous page page Content  Go to the nex page  

Page 7.1

Legal warning: Authorised on-line use only. It is not allowed the use of these courses in companies or private teaching centres.
aulaClic. All rights reserved. Reproduction in any form whatsoever is prohibited.