How and when to create HTML Tables in your page design

This article constitutes section 1, part B, chapter 5 of the CIW Website design manager course and briefly covers: Creating HTML Tables.

Introduction to creating HTML Tables

The use of tables for layout purposes is discouraged in HTML 4.01 for reasons of accessibility. It is recommended that stylesheets are used for all layout and appearance related items, and that tables are only used for the presentation of tabular data. However, tables are widely used for layout, the original to this page was no exception, and can be useful. The key is to keep the tables simple. Too many tables, or tables nested within tables will, significantly, slow the rendering of the page.

Basic HTML Table Elements

HTML Table Elements

Tables can be simple, or they can be very complex. Complex tables can appear wonderfully on screen but, they can take quite some time to render in your browser.

The code for a simple table, such as the one shown above would look like this:

Raw HTML Table Code

You may note that the header cells use the <TH> element and the data cells use the <TD> element. The difference between the two is the default formatting. The header cells by default, use bold, centred text while the data cells use normal, left-aligned text.

Caption Element

Including the <caption> element within the <table> </table> tags allows a title to be given to the table. It has an align property which may be set to top, bottom, left or right. This is seldom used and is not well supported across different browsers.

Column and Row Spanning

Sometimes you will want a heading across several cells, or you may wish a cell to span more than one row. This is achieved by using the ROWSPAN and COLSPAN attributes. The table below is an example:

Table created in HTML
Example Table

This page uses a mixture of tables and CSS for it’s layout. At the top of the page the graphic is split into 3 and a table is used to reconstitute the original image and to hold the banner advert above the background image. The rest of the page uses CSS, except the small table above which is there as an example.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close