In this tutorial you will learn about the HTML Tables and its application with practical example.
HTML Table Element used to represent the information in tabular format on the web page that enhance the readability of the information. HTML Tables Elements can also be used to create layouts or structure of the webpages.
Like any other table HTML Tables are composed of one or many rows and rows in turns composed of one or many cells. Table cells can contain the actual information it can be text,image, HTML Element or could be HTML Table itself.
Standard HTML Table Structure –
| Column A | Column B | Column C | |||||||||||||||
| Begin | <table> | ||||||||||||||||
| Caption | <caption> | Table Caption | </caption> | ||||||||||||||
| Headers | <tr> |
|
</tr> | ||||||||||||||
| Row 1 | <tr> | </tr> | |||||||||||||||
| Row 2 | <tr> | </tr> | |||||||||||||||
| Row 3 | <tr> | </tr> | |||||||||||||||
| End | </table> | ||||||||||||||||
HTML Tables can be easily created using <table>..</table> tag.
Basic tags required to create a HTML Table –
| Tag | Description |
| <table> | Represent the begining of table element. |
| <th>…</th> | This tag is used to specify the table column heading. |
| <tr>…</tr> | This tag is used to represent starts and ends of a table row |
| <td>…</td> | This tag is used to represent starts and ends of a table cell |
| </table> | Represent the end a table element. |
Example:
|
1 2 3 4 |
<table> <tr > <td>cell one </td> <td>cell two </td> </tr> <tr> <td>cell three</td> <td>cell four </td> </tr> </table> |
Output:
| cell one | cell two |
| cell three | cell four |
Table Border
Grids/Borders can be set for outside boundaries of the table and table cells using table “Border” attribute, we can pass a numerical value for the this attribute and specifies the thickness of the border, value "0" specifies no borders to be drawn.
Example:
|
1 2 3 4 |
<table border="2"> <tr > <td>cell one </td> <td>cell two </td> </tr> <tr> <td>cell three</td> <td>cell four </td> </tr> </table> |
Output:
| cell one | cell two |
| cell three | cell four |
Table Heading
Table Heading allows us to set heading for the columns in the table,using <th>…</th> tag we can define heading cells for column. The Heading cell is same as other cells in table and can be manipulated in the same way. The text between heading tags will displayed in bold and will be aligned centered within the table cell.
Example:
|
1 2 3 4 5 |
<table> <tr > <th>Column One</th> <th>Column two </th> </tr> <tr > <td>cell one </td> <td>cell two </td> </tr> <tr> <td>cell three</td> <td>cell four </td> </tr> </table> |
Output:
| Column One | Column two |
|---|---|
| cell one | cell two |
| cell three | cell four |
Table Colspan
This attribute enable us to specify the span of the cell across the number of columns. We can assign numerical value to the attribute, which means how many columns width will this cell occupy, it depends on how many columns we wish to cell span across.
Example:
|
1 2 3 4 5 |
<table border="1"> <tr > <th>Column One</th> <th>Column two </th> </tr> <tr > <td colspan="2">cell one </td></tr> <tr> <td>cell three</td> <td>cell four </td> </tr> </table> |
Output:
| Column One | Column two |
|---|---|
| cell one | |
| cell three | cell four |
Table Rowspan
This attribute enable us to specify the span of the cell across the number of rows. We can assign numerical value to the attribute, which means how many rows height will this cell occupy, it depends on how many rows we wish to cell span across.
Example:
|
1 2 3 4 5 |
<table border="1"> <tr > <td rowspan="2">cell one </td><td>cell one </td></tr> <tr> <td>cell four </td> </tr> </table> |
Output:
| cell one | cell one |
| cell four |
