HTML Table Tag

HTML Tutorial - HTML Table Tag

The <table> Tag is used to arrange the HTML elements in the way desired. Usually all the web developers use this to arrange HTML elements.

The Example shown below uses the <table> Tag, to show data in Rows and columns.

HTML Example for <table> Tag

Source:	Result:
<!DOCTYPE html> <html> <body> <table border="1"> <tr> <th>Product</th> <th>Price</th> </tr> <tr> <td>Watch</td> <td>35.00</td> </tr> <tr> <td>Laptop</td> <td>250.00</td> </tr> </table> </body> </html>

The <table> Tag uses many other Tags as shown in the example above to put the data into Rows and columns.

Tags Usage Explained:

<tr> Tag - denotes table row, used for creating new row
border attribute - used for create border and cells of the table
<th> Tag - denotes table header, used for creating table header alone
<td> Tag - denotes table data, used for creating the table cells

HTML <table> Tag Colspan attribute

The Example shown below uses the Colspan attribute to merge together two or more columns.

HTML Example for Colspan attribute:
In the tables third Row columns "Product" and "Price" are merged using the colspan attribute.

Source:	Result:
<!DOCTYPE html> <html> <body> <table border="1"> <tr> <th>Product</th> <th>Price</th> </tr> <tr> <td>Watch</td> <td>35.00</td> </tr> <tr> <td>Laptop</td> <td>250.00</td> </tr> <tr> <td colspan="2">Total Amount: 285.00</td> </tr> </table> </body> </html>

HTML <table> Tag Rowspan attribute

The Example shown below uses the Rowspan attribute to merge together two or more rows.

HTML Example for Rowspan attribute:
The tables first column is merged using the Rowspan attribute.

Source:	Result:
<!DOCTYPE html> <html> <body> <table border="1"> <tr> <td rowspan="3">Computer Utilities</td><td>Product</td> <td>Price</td> </tr> <tr> <td>DVD Player</td> <td>20.00</td> </tr> <tr> <td>Mouse</td> <td>10.00</td> </tr> </table> </body> </html>

HTML <table> Tag with commonly used attributes

The Example shown below uses the attributes that is used by web developers commonly.

HTML Example for <table> Tag attributes

Source:	Result:
<!DOCTYPE html> <html> <body> <table width="60%" border="1" align="center"> <tr> <th width="70%" align="left">Product</th> <th width="30%" align="center">Price</th> </tr> <tr> <td>Watch</td> <td align="center">35.00</td> </tr> <tr> <td>Laptop</td> <td align="center">250.00</td> </tr> </table> </body> </html>

Tags Usage Explained:

width attribute - this is used in the table tag to increase the width. The same when used in the table cell, it increases the width of the cell
align attribute - this is used in the table tag to align the table in the internet browser. The same when used in the cell aligns the text in the cell

« Previous Chapter

Next Chapter »