info@tutsfinder.in



HTML Tables



This feature of HTML allows the user to arrange the data in rows and columns of cells which is in image, text, links etc.

The HTML tables are created using <table> tag in which the <tr> tag is used tto create rows and <td> tag is used to create data cells. The elements under <td> are regular and left align by default.



Example:
<!DOCTYPE html>
<html>
<head>
<title> HTML tables </title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1 </td>
<td> Row1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td> Row2, Column 2 </td>
</tr>
</table>
</body>
</html>


Outout:

table

Border attribute is used to set the border of table, if you do not want to put the border you can enter the value as 0.

Table Header, Body and Footer


Three elements of table which separates the table:


• <thead> - to create separate table header.

• <tbody> - to show the main body of table.

• <tfoot> - to create separate table footer.

NOTE: In a table there will be always one header and one footer, but the body can element may be differ depending upon the content to show the different pages or group of data.



Example:
<!DOCTYPE html>
<html>

<head>
<title> HTML table </title>
</head>
	
<body>
<table border="1" width="100%" style="text-align:center">
<thead>
<tr>
<td colspan="4"> This is the head of the table</td>
</tr>
</thead>

<tfoot>
<tr>
<td colspan="4"> This is the foot of the table</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>

</table>
</body>
</html>


Output:

table

Attributes of Table:

1. Table Heading

This attribute is used to define the heading of table.



Example:
<!DOCTYPE html>
<html>

<head>
<title> HTML Table Header</title>
</head>
<body>
<table border = "2">
<tr>
<th> Student Name </th>
<th> Class </th>
</tr>
<tr>
<td>TrishantShishodia</td>
<td> 10th</td>
</tr>
<tr>
<td>Rashika Garg</td>
<td> 12th</td>
</tr>
</table>
</body>
</html>


Output:

table

2. Cellspacing and Cellpadding

Cellpadding- specifies the space between the cell content and its borders.

Cellspacing- specifies the space between the cells.

Example for Cellpadding:
th, td {
padding: 15px;
}
Example for Cellspacing:

Table {
Border-spacing: 5px;
}

3. Colspan and Rowspan

Colspan- it is used for making a cell span more than one column.

Example:
<table style=“width: 100%”>
<tr>
<th> Name </th>
<th colspan = "2"> Salary </th>
</tr>
<tr>
<td>Aayush </td>
<td> 100000 </td>
<td> 200000 </td>
</tr>
</table>

Rowspan- It is used for making a cell span more than one row.

Example:
<table style=“width: 100%”>
<tr>
<th> Name </th>
<td>Aayush</td>
</tr>
<tr>
<th rowspan = "2"> Salary: </th>
<td> 12344 </td>
</tr>
<tr>
<td> 12233444 </td>
</tr>
</table>

4. Table height and Width

It is used to set a table height and width specifying in a terms of pixels or percentage of available screen area.

Example:
<table border = “1” width = “400” height = “150”>

Nested Tables

In HTML you can use one table inside other table, also all the tags inside table data tag <td>.



Example:
<!DOCTYPE html>
<html>

<head>
<title>HTML Table</title>
</head>
	
<body>
<table border="2">

<tr>
<td>Nested Table</td>
<td>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Rahul</td>
<td>500</td>
</tr>
<tr>
<td>Sanket</td>
<td>700</td>
</tr>
</table>
</td>
</tr>

</table>
</body>
</html>


Output:

table