HTML Tables

Table Tags: <table>, <th>, <tr> ,<td>

<table> tag is used to arrange data in a table format in HTML. Each row within the table is defined with the tag <tr> and each cell in a table is defined with <td> tag. You can also define a header row for the table using the <th> tag.
Here is simple example of a HTML table with one header row three data rows and two columns :

<table border="1">
<tr><th>Item</th> <th>Qty.</th></tr>
<tr><td>Apple</td> <td>10</td></tr>
<tr><td>Mango</td> <td>20</td></tr>
<tr><td>Orange</td> <td>30</td></tr>

Displayed as:


As you can see in the above example, the border attribute is used with the <table> tag to define the width of the table border. If you don\'t want a border for your table you can omit this attribute.

Other attributes commonly used with <table> tag are:

  • cellpadding : to set the space between the cell border and the cell content
  • cellspacing : to set the space between two cells
  • width : to set the width of the table

The attributes commonly used with <tr> and <td> tags are:

  • align :To horizontally align the contents left, right, center, justify
  • valign :To vertically align the contents top, middle or bottom
  • bgcolor :to set a background color

You could also have a cell span multiple columns and rows by setting the following attributes

  • rowspan :to set the number of rows to span
  • colspan :to set the number of cells (columns) to span

Here is a modified version of our previous example:

<table border="1" width="200" cellpadding="5" cellspacing="5" >
<tr><th bgcolor="grey">Item</th> <th bgcolor="grey">Qty.</th></tr>
<tr bgcolor="red"><td>Apple</td> <td>10</td></tr>
<tr bgcolor="green"><td>Mango</td> <td>20</td></tr>
<tr bgcolor="orange"><td>Orange</td> <td>30</td></tr>
<tr><td colspan="2" align="center" bgcolor="blue">Total = 60</td></tr>

Displayed as

Item Qty.
Orange 30
Total = 60

Post a comment


Your Comment

Email (We dont publish it)


Nothing the first to share wisdom.