|| 5. HTML Tables
Lesson Introduction - HTML Tables
Tables were originally created for displaying tabular data and for this
they are ideal. Web page designers also use them create Web page layout.
In this lesson you will learn how to write the HTML code for a very useful
HTML element - The table.
You will learn: How to
- create a simple table, followed by more complex ones.
- display borders to the table.
- Colouring table cells.
- After you have done the graphics lesson, how to place a graphic into
a table cell.
- Create nested tables
- And more
A table example
This table consists of
- 2 rows
- 3 columns, thus providing 6 cells.
- A border, making the table visible. If the border is set to 0 then
the border is invisible,
- The table itself is center aligned within another cell of an outer
table, part of the page layout structure.
A table cannot overlap another table. Your page layout follows a
grid with columns and rows, so a table can span several rows and/or
several columns, but they can never actually overlap on the page.
Advanced techniques can give the illusion of overlapping by the use
A table can be placed within a cell of another table, this creates
a nested table. You can insert a table within another table thus nesting
them. A nested table cannot be larger than the cell that contains
Elements Required for a simple table
Table 1: Elements Required for a simple table
||Description / Comments
||The table is a rectangular container for
|| align, background, bgcolor,
border, bordercolor, bordercolordark, bordercolorlight, cellpadding,
cellspacing, cols, datapagesize, datascr, dir, frame, height, rules,
||The TR element (Table Row) is a container
for only one row, and the cells of that row, denoted by the TD element,
or to a lesser degree by the THEAD TFOOT or TBODY elements
||align, bgcolor, border, bordercolor,
bordercolordark, bordercolorlight, char, charoff, valign
||The TD element is a container
for a single cell
abbr, align, axis, background,
background, bgcolor, border, bordercolor, bordercolordark, bordercolorlight,
datafld, char, charoff, columspan, headers, height, nowrap, rowspan,
scope, valign, width
||Add a caption to a table (Optional)