Labels

Saturday, January 8, 2011

HTML Table Tag

The table tag <table>  is used to create tables with rows and columns. A table is divided into rows and columns. The <tr> tag represents table rows and the <td> tag represents table data columns.

A simple example of a table with 2 rows and 3 columns:

<table border="1">
   <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
   </tr>
   <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
   </tr>
</table>

The output will look like below:

Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

You will notice I added border="1" to the table tag.  If you do not specify any table attributes, the border by default will be 0 and in the table above, you would not see any border around the cells.

One other simple thing you should be aware about tables, is that you can have table headers.  See example below:

<table border="1">
   <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
   </tr>
   <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
   </tr>
   <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
   </tr>
</table>

The above code will generate this outcome:
Header 1 Header 2 Header 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3