Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML tags to display the data in the tabular form?
There can be scenarios, where we have to include complex or large amounts of data to be on the webpage understandably and more conveniently. In such cases, we can use the HTML tables to organize the data, so that it will be more convenient for the user to go through and understand it.
An HTML table is a structure that can be used to display data in a tabular form (i.e. in rows and columns) on a webpage.
We can display the data in a tabular form using the following HTML tags −
<table> - It defines a table.
<th> - It defines a header cell (headings) in the table.
<tr> - It defines a row in a table.
<td> - It defines a cell in a table.
<caption> - This defines the caption for the table
<colgroup> - This specifies a group of one or more columns in a table for formatting.
<col> - It specifies the column properties for each column within a <colgroup> element.
<thead> - It groups the header content in the table.
<tbody> - It groups the body content in the table.
<tfoot> - It groups the footer content in the table.
Following is the basic layout of an HTML table −
<table>
<!--Header part begins-->
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<!--Header part ends-->
<!--Body part begins-->
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<!--Body part ends-->
<!--Footer part begins-->
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
<!--Footer part ends-->
</table>
Now, let us look into a few examples below where we displayed the data in tabular form using the above-discussed HTML tags.
Example
In the following example, we are displaying the data of students and their scores in respective subjects in a tabular form −
<!DOCTYPE html>
<html>
<head>
<title>Tags to display the data in the tabular form</title>
<style>
table,
th,
td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Subjects</th>
<th>Zayn</th>
<th>Arjun</th>
<th>Kabir</th>
<th>Priya</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maths</td>
<td>89</td>
<td>85</td>
<td>93</td>
<td>82</td>
</tr>
<tr>
<td>Social</td>
<td>95</td>
<td>90</td>
<td>91</td>
<td>95</td>
</tr>
<tr>
<td>English</td>
<td>81</td>
<td>85</td>
<td>96</td>
<td>93</td>
</tr>
<tr>
<td>Science</td>
<td>70</td>
<td>86</td>
<td>95</td>
<td>90</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>335</td>
<td>346</td>
<td>377</td>
<td>360</td>
</tr>
</tfoot>
</table>
</body>
</html>
Example
In the example below, we are adding a caption to the table (using <caption> tag) and grouping the first two columns in the table (using <colgroup> tag).
<!DOCTYPE html>
<html>
<head>
<title>Tags to display the data in the tabular form</title>
<style>
table, th, td {
border: 1px solid black;
}
caption {
font-weight: bolder;
color: brown;
}
</style>
</head>
<body>
<table>
<caption>Players List</caption>
<colgroup>
<col span="2" style="background-color:seagreen">
<col style="background-color:grey">
</colgroup>
<thead>
<tr>
<th>Cricket</th>
<th>football</th>
<th>Dart</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arjun</td>
<td>Manish</td>
<td>Kabir</td>
</tr>
<tr>
<td>Nikhil</td>
<td>Dev</td>
<td></td>
</tr>
<tfoot>
<tr>
<td>2</td>
<td>2</td>
<td>1</td>
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>
222 Views
