Introducing Tables

Last update on: 05-08-2008
In order to work with tables, you need to start thinking in grids. Tables, just like spreadsheets, are made up of rows and columns. Here you can see a grid of rectangles. Each rectangle is known as a coll. A row is made up of a set of cells on the same line from left to right, while a column is made up of a line of cells going from top to bottom.

To create a table we use the <table> element.
Inside the <table> element the table is written out row by row. A row is contained inside a <tr> element�which stands for table row. And each cell is then written inside the row element using a <td> element�which stands for table data.
Here is an example of a very basic table:

This is the basic structure that all tables will follow, although there are additional elements and attributes that allow you to control the presentation of tables.
Table headings have their own element, <th>, which is used in place of the table data or <td> element. The <th> element can be used for either column or row headers.

Each cell must, however, have either a <td> or a <th> element in order for the table to display correctly even if that element is empty.

Here you can see a slightly more complex example of a table, which includes headings

As you can see, tables can take up a lot of space and make a document longer, but clear formatting of tables makes it much easier to see what is going on in your code, and no matter how familiar the code looks when you write it, you will be glad that you made good use of structure when you come back to it a year later.

In this example, the table shows a financial summary for a small company. Along the top in the first row you can see that there are headings for incomings, outgoings, and profit. The first cell is actually empty, but you must still add either a <td> or <th> element for it in the code; otherwise the first row would have less cells than all the others and the alignment of the columns would not match up as intended.

In each row, the first table cell is also a table heading cell (<th>) that indicates which quarter the results are for. Then the remaining three cells of each row contain table data, and are therefore contained inside the <td> elements. By default, most browsers render the content of a <th> element in bold text.

the profit are also contained within a <b> element to display the profit figures in a bold typeface. This shows how any cell can, in fact, contain all manner of markup. The only constraint on placing markup inside a table is that it must nest within the table cell element (be that a <td> or a <th> element). You cannot have an opening tag for an element inside a table cell and a closing tag outside that cell�or vice versa.

Here what the table should looks in the browser:

	Outgoings ($)	Receipts ($)	Profit ($)
Quarter 1 (Jan-Mar)	11200.00	21800.00	10600.00
Quarter 2 (Apr-Jun)	11700.00	22500.00	10800.00
Quarter 3 (Jul - Sep)	11650.00	22100.00	10450.00
Quarter 4 (Oct - Dec)	11850.00	22900.00	11050.00

It is worth noting that a lot of people, when creating tables, do not actually bother with the <th> element, and instead use the <td> element for every cell�including headers. However, it can help accessibility, and given that the element is there for a purpose, it is a good idea to use it. It can also help you present those cells differently when you style the table using CSS.

Creating Tables's lessons:

Introducing Tables
Basic Table Elements And Attributes
Splitting Up Tables Using A Head Body And Foot
Spanning Columns Using The Colspan Attribute
Spanning Rows Using The Rowspan Attribute