HTML Basics

HTML Tables

Posted on 30th April 2013

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:

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

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

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


Nothing the first to share wisdom.