Tables

HTML table model allows us to arrange data in tabular structure, using a model of horizontal rows and vertical columns. A table is divided into rows and each row is divided into cells.

A sample Table structure

table

The above table structure consists of 4 rows and 5 columns .

Tables in HTML

An HTML Table start with < table > tag and ends with < /table > tag.

A table can contain an infinite number of table rows.

A table row start with < tr > tag and ends with < /tr > tag.

Each Table Row is divided into cells.

A Table cell start with < td > tag and end with < /td > tag.

HTML Table with rows and columns

The following HTML code create an HTML Table with 2 rows and each rows contain 2 columns and fill the content A,B,C,D in cells respectively.

html-table

HTML Source Code :

<html> <body > <table> <tr> <td> A </td> <td> B </td> </tr> <tr> <td> C </td> <td> D </td> </tr> </table> </body> </html>

** If you want to see the table border looks like in the above picture, you should replace < table border=1 > in the above HTML code, otherwise no border will display.

Table layout structure in picture

html-table-structure

In the above picture you can see the Table starts with < table > and end with < /table > tag and each row start with < tr > and end with < tr/ > tag and each cells start with < td > and end with < /td > tag.

html-table-output