A table is a great way to present tabular information organized in rows and columns.

1. Table basics

The below html code defines a basic table structure.

<TABLE BORDER="1"> <TR>     <TD>Cell 1</TD>     <TD>Cell 2</TD>     <TD>Cell 3</TD> </TR> <TR>     <TD>Cell 4</TD>     <TD>Cell 5</TD>     <TD>Cell 6</TD> </TR> </TABLE>

The TABLE html tag is used to start/stop tables. By setting the BORDER attribute to "1", we add a border to a table. Set the BORDER attribute to "0" for no border.

The TR html tag is used to add a row to tables. Create data (cells) by using TD tags.

The above html would produce this table structure :

Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

This table contains two rows with three cells each.

2. Combining cells

Two (or more) cells can be combined to make a larger cell. The html code combines two cells on the first row.

<TABLE BORDER="1"> <TR>     <TD COLSPAN=2>Cell 1</TD>     <TD>Cell 2</TD> </TR> <TR>     <TD>Cell 3</TD>     <TD>Cell 4</TD>     <TD>Cell 5</TD> </TR> </TABLE>

The COLSPAN attribute defines the number of cells to combine in this column. The html produces this table.

Cell 1		Cell 2
Cell 3	Cell 4	Cell 5

The first cell now takes up two spaces on the first column. Cells on the same row can also be combined.

<TABLE BORDER="1"> <TR>     <TD ROWSPAN=2>Cell 1</TD>     <TD>Cell 2</TD>     <TD>Cell 3</TD> </TR> <TR>     <TD>Cell 4</TD>     <TD>Cell 5</TD> </TR> </TABLE>

The ROWSPAN attribute defines the number of cells to combine in this row. The html produces this table.

Cell 1	Cell 2	Cell 3
	Cell 4	Cell 5

Multiple cells can be combined across multiple rows and columns to create more complex html tables.

3. Advanced usage

Tables can be combined with html forms to create well organized, easy to use, feedback forms.

Only the basics are covered in this guide. More tags and attributes are available, backgrounds and colors can be added. This page exists to help beginners.