Don Southwell - Delta College Faculty Web

Introduction to Tables in HTML

A table consists of two things: rows and columns

As far as HTML goes, tables can be an extremely useful and powerful tool for organizing web pages.

The Basics

To create a table, it's probably easier if you know how many rows and columns you want beforehand.

The first tag you need to define a table is <TABLE>. Conversely, the last table tag will be </TABLE>.

In HTML, tables are built by rows. Each row is defined by <TR></TR>. If a table is supposed to have two rows, then it needs two sets of <TR></TR> tags. If a table has 10 rows, it will need 10 sets of <TR></TR> tags. All other table tags will need to be between the <TR></TR> tags.

To define the number of cells (or columns) in your table, you need to use <TD></TD> tags. The contents of each cell must be contained within the <TD></TD> tags.

The number of <TD></TD> tags within a set of <TR></TR> tags defines how many cells the row will have. It is possible to have a different number of cells in different rows of the same table.

The ending tags are optional for most table tags with the exception of the <TABLE> tag.

Examples

A table with one row and two cells:

<TABLE BORDER>
<TR>
<TD>First cell</TD>
<TD>Second cell</TD>
</TR>
</TABLE>

First cell

Second cell

A table with two rows and three cells:

1st cell, 1st row 2nd cell, 1st row 3rd cell, 1st row

1st cell, 2nd row 2nd cell, 2nd row 3rd cell, 2nd row

A table with two cells in the first row and three cells in the second row:

1st cell, 1st row	2nd cell, 1st row
1st cell, 2nd row	2nd cell, 2nd row	3rd cell, 2nd row

Border Attribute

HTML tables, by default, have no border. Whether you have a border or not is personal preference. For a table without a border, simply leave out the border attribute. However, sometimes it helps to have a border when creating a complex table, to see where everything laid out. Then you can remove the border when finished, if you desire.

Example:

A borderless table with two rows and three cells:

1st cell, 1st row 2nd cell, 1st row 3rd cell, 1st row

1st cell, 2nd row 2nd cell, 2nd row 3rd cell, 2nd row

Table Headers

Table headers can be defined with the <TH></TH> tags. These work the same way as the <TD></TD> tags, but they are automatically bolded and centered.

Example:

<TABLE BORDER>
<TR>
<TH>Heading 1</TH>
<TH>Heading 2</TH>
<TH>Heading 3</TH>
</TR>

Heading 1 Heading 2 Heading 3

1st cell, 2nd row 2nd cell, 2nd row 3rd cell, 2nd row

Table Alignment and Width Attributes