HTML Tables

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>
<th> H1 </th> <th> H2 </th> <th> H3 </th>
<td> A1 </td> <td> B1 </td> <td> C1 </td>
<td> A2 </td> <td> B2 </td> <td> C2 </td>
<td> A3 </td> <td> B3 </td> <td> C3 </td>
</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:

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:

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:

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:

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:

Output:

cell one cell one
cell four

In this tutorial we have learn about the HTML Tables and its application with practical example. I hope you will like this tutorial.