How to HTML Table

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

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 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

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.