HTML Menu

Table Tags in HTML

  • A table is a matrix of rows and columns. The HTML table provides a highly readable way of presenting many kinds of information.i.e by using table we can present information in structuring format.
  • HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. but it is recommended to use div tag over table to manage the layout of the page.

The basic table tags:

  • <table>------</table>

    It indicates the starting of the table.The most common attribute for <table> tag is border,And it has different attributes like height,width....,

  • <th>------</th>

    It is used to give table heading(column header).

  • <tr>-------</tr>

    It is used to start a table row.

  • <td>------</td>

    It indicates a table data or a cell.

  • <caption>------</caption>

    It is used to insert caption into table.

format : 
<table [ align="center"|"left"|"right" ] [ border=n px ] [ height=n% ] [ width=n% ] [ cellpadding=n px] [ cellspacing= n px ] >
<caption> ----- </caption>
<tr>
<th> ---- </th>
</tr>
<tr>
<td> ---- </td>
</tr>
</table>

Commonly used arguments in table

  • align: It specifies alignment of table.i.e, left or center or right.
  • border: It specifies border of table in pixels.
  • height: It sets amount of screen that table will use in the factor of height.
  • width: It sets amount of screen that table will use in the factor of width.
  • cellpadding: It specifies the space between content of cell and its border.
  • cellspacing: It specifies the space between content of cells.
  • colspan: It is used combine two or more columns.
  • rowspan: It is used to combine two or more rows.
Example : "table.html"
<html>
<head>
<title>Table</title>
</head>
<body>
<table align="center" border=1 width="30%" cellpadding=10px>
<caption> Employee Details</caption>
<tr>
<th>EID</th>
<th>ENAME</th>
<th>AGE</th>
</tr>
<tr>
<td>101</td>
<td>Madhu</td>
<td>32</td>
</tr>
<tr>
<td>102</td>
<td>Naveen</td>
<td>33</td>
</tr>
</table>
</body>
</html>

Output:
table

☑ HTML Table with colspan :


If you want to combine more than one column, you can use the colspan attribute.
Let's see the example that span or combine two columns


Example : "tablecols.html"
<html>
<head>
<title>Table-Colspan</title>
</head>
<body>
<table width="50%" border=1>
<tr>
<th>Name</th>
<th colspan="2">Mobile No.</th>
</tr>
<tr>
<td>B.Tech-CSE</td>
<td>1234567890</td>
<td>9876543210</td>
</tr>
</table>
</body>
</html>

Output:
table

☑ HTML Table with rowspan :


If you want to combine more than one row, you can use the rowspan attribute.
Let's see the example that span or combine two rows.


Example : "tablerows.html"
<html>
<head>
<title>Table-Rowspan</title>
</head>
<body>
<table width="50%" border=1>
<tr>
<th>Name</th>
<td>B.Tech-CSE</td>
</tr>
<tr>
<th rowspan="2">Mobile No.</th>
<td>1234567890</td>
</tr>
<tr>
<td>9876543210</td>
</tr>
</table>
</body>
</html>

Output:
table
Next Topic :Image Tag in HTML