<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>
</table>| Item | Qty. |
|---|---|
| Apple | 10 |
| Mango | 20 |
| Orange | 30 |
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>
</table>
| Item | Qty. |
|---|---|
| Apple | 10 |
| Mango | 20 |
| Orange | 30 |
| Total = 60 | |
Nothing yet..be the first to share wisdom.