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.
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:
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.
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:
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.