HTML – TABLES
Tables are used to represent the data in the form of columns and rows.
The table tag contains thead as table head, tbody as table body, tr as a table row, th as table heading, and td as data cell.
Table tag is a paired tag and it required starting and closing tag. Tables can be used in Html document:
- for representing data in tabular form,
- making cell frames for different sections
- structuring content
Table tag mostly used with scripting languages in order to represent data results, print documents in a table format, making sheets, etc.
Example fetching employees data from the server and display that data as a result in the form of a table which contains employee’s name, salary, address, mobile numbers, country, department, and designation. Table format displays the data in the form of a row and column where the horizontal cells represent a single row and vertical cells represent a single column.
Below is the Html Code for Employees data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorials</title>
</head>
<body>
<h1>Table Tag</h1>
<table>
<thead>
<tr>
<th>So.</th>
<th>Name</th>
<th>Department</th>
<th>Designation</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Abc</td>
<td>Software Development</td>
<td>Project Manager</td>
<td>50,000</td>
</tr>
<tr>
<td>2</td>
<td>Def</td>
<td>Software Development</td>
<td>Team Member</td>
<td>20,000</td>
</tr>
</tbody>
</table>
</body>
</html>
Table Colspan
The colspan is used for merging two or more column’s cells. It is used as an attribute inside table tag.
Below is an example of a colspan attribute inside the table tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorials</title>
<style>
table,th,tr,td
{border:1px solid purple;
padding:2px";
}
</style>
</head>
<body>
<h1>Table Tag</h1>
<table>
<thead>
<tr>
<th>So.</th>
<th>Name</th>
<th>Department</th>
<th>Designation</th>
<th>Salary</th>
<th colspan="2">State and Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Abc</td>
<td>Software Development</td>
<td>Project Manager</td>
<td>50,000</td>
<td>Delhi</td>
<td>India</td>
</tr>
<tr>
<td>2</td>
<td>Def</td>
<td>Software Development</td>
<td>Team Member</td>
<td>20,000</td>
<td>Mumbai</td>
<td>India</td>
</tr>
</tbody>
</table>
</body>
</html>
Here the colspan used for merging two cells under a single column, and the column name is “state and country”. Also, the internal CSS is used for making the table more clean and readable. The internal CSS is used with the help of style tags and it is placed inside the head section. For styling the table, some of the table attributes are used as the styling property like border makes outer lines, cell spacing provides space between cells, cell padding provides inner space between content and boundaries of the cell, height, width, background color, etc.
Table Rowspan
Like colspan is used for columns similarly the rowspan is used for merging cells of a row.
Below is an example of a rowspan inside the table tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorials</title>
<style>
table,th,tr,td
{border:1px solid purple;
padding:2px";
}
</style>
</head>
<body>
<h1>Table Tag</h1>
<table>
<thead>
<tr>
<th>Name</th>
<td>Abcd</td>
<td>Defg</td>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="4">Hobbies</th>
<td>Reading Books</td>
<td>Video Gameing</td>
</tr>
<tr>
<td>Coding</td>
<td>Listniing to Music</td>
</tr>
<tr>
<td>Dancing</td>
<td>Cooking</td>
</tr>
<tr>
<td>Painting</td>
<td>Singing</td>
</tr>
</tbody>
</table>
</body>
</html>
Here the heading section is used inside the tbody tag for rowspan to merge hobbies data cells.
Caption Tag
A caption tag is used for providing a caption to a table. It is used inside the table tag.
Below is an example of a caption tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorials</title>
<style>
table,th,tr,td
{border:1px solid purple;
padding:2px";
}
</style>
</head>
<body>
<h1>Table Tag</h1>
<table>
<caption>Name and Hobby Table</caption>
<thead>
<tr>
<th>Name</th>
<td>Abcd</td>
<td>Defg</td>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="4">Hobbies</th>
<td>Reading Books</td>
<td>Video Gameing</td>
</tr>
<tr>
<td>Coding</td>
<td>Listniing to Music</td>
</tr>
<tr>
<td>Dancing</td>
<td>Cooking</td>
</tr>
<tr>
<td>Painting</td>
<td>Singing</td>
</tr>
</tbody>
</table>
</body>
</html>