HTML provides a robust set of tools for structuring content, and one of the most powerful elements for organizing and presenting data is the HTML table. In this article, we will dive deep into the world of HTML table tags, unravelling their functionality, syntax, and various attributes that make them very best tool for presenting tabular data.
HTML Tables
HTML TablesTables are used to arrange the elements in HTML page in tabular format. Tables are like spreadsheets which are made up of rows and columns.
Tables are created using <table> tag
The table is further divided into rows and each row is further divided into data cells.
Table Row
<tr> tag is used to define table row.
Table Data
<td> tag is used to define data cell (table data) which contains the information of data cell. It can contain text, links, image, list and so on.
The content in <td> is regular and left aligned by default
Table Heading
<th> tag is used to define table heading.
Normally top row of table is used as a heading, but it can be placed at any place.
All major browsers will display text as bold and centered.
Table Caption
<caption> tag is used to define a title for a table.
It always shows up at the top of the table; however, the location can be changed.
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML Table Example </title>
</head>
<body>
<table>
<caption> Student Details</caption>
<tr>
<th> RollNo </th>
<th> Name </th>
<th> Department </th>
</tr>
<tr>
<td> Comp-1 </td>
<td> John</td>
<td> Computer </td>
</tr>
<tr>
<td> Comp-2 </td>
<td> George </td>
<td> Computer </td>
</tr>
<tr>
<td> Comp-3 </td>
<td> Rachel </td>
<td> Computer </td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title> HTML Table Example </title>
</head>
<body>
<table>
<caption> Student Details</caption>
<tr>
<th> RollNo </th>
<th> Name </th>
<th> Department </th>
</tr>
<tr>
<td> Comp-1 </td>
<td> John</td>
<td> Computer </td>
</tr>
<tr>
<td> Comp-2 </td>
<td> George </td>
<td> Computer </td>
</tr>
<tr>
<td> Comp-3 </td>
<td> Rachel </td>
<td> Computer </td>
</tr>
</table>
</body>
</html>
Attributes List
Border attribute
It is used to specify the border around the table (4 walls of a table)
If you do not specify the border it will display table without borders.
Remember to define the border for both table and cells, if you want border across all cells.
Example
<table border = ”2”>
Bordercolor attribute
It specifies the color for border around the table including cells border.
Example
<table bordercolor=”blue”>
<table bordercolor=”blue”>
Cellpadding attribute
It specifies the white space (distance) between the cell border and the content in the cell.
It specifies the space from left, up and bottom side of a cell. It does not specify space from the right side of a cell.
Example
<table cellpadding = ”5”>
Cellspacing attribute
It specifies the space between the cells. In other words, it specifies the width of a border between cells.
Example
<table cellspacing = ”5”>
Colspan attribute
It is used to merge two or more columns into a single column
Example
<!DOCTYPE html>
<head>
<title> HTML Table Colspan Example </title>
</head>
<body>
<table cellpadding="5' cellspacing="10" border="2">
<caption> Student Details</caption>
<tr>
<th> Name </th>
<th colspan="2"> Telephone </th>
</tr>
<tr>
<td> John </td>
<td> 99999-99999</td>
<td> 99999-99998 </td>
</tr>
<tr>
<td> George </td>
<td> 88888-88888 </td>
<td> 88888-88889 </td>
</tr>
</table>
</body>
</html>
Rowspan attribute
It used to merge two or more rows into a single row
Example
<!DOCTYPE html>
<head>
<title> HTML Table Rowspan Example </title>
</head>
<body>
<table cellpadding="5' cellspacing="10" border="2">
<caption> Student Details</caption>
<tr>
<th> Name </th>
<td> John </td>
<td> George </td>
</tr>
<tr>
<th rowspan="2"> Telephone </th>
<td> 99999-99999</td>
<td> 88888-88888 </td>
</tr>
<tr>
<td> 99999-99998 </td>
<td> 88888-88889 </td>
</tr>
</table>
</body>
</html>
<head>
<title> HTML Table Rowspan Example </title>
</head>
<body>
<table cellpadding="5' cellspacing="10" border="2">
<caption> Student Details</caption>
<tr>
<th> Name </th>
<td> John </td>
<td> George </td>
</tr>
<tr>
<th rowspan="2"> Telephone </th>
<td> 99999-99999</td>
<td> 88888-88888 </td>
</tr>
<tr>
<td> 99999-99998 </td>
<td> 88888-88889 </td>
</tr>
</table>
</body>
</html>
Table Backgrounds
There are two ways to set the background for a\the table
1) bgcolor attribute – it sets the background color for entire table or entire row or just one cell.
Example
<!DOCTYPE html>
<head>
<title> HTML Table Example </title>
</head>
<body>
<table border="2" bgcolor="lightgray">
<caption> Student Details</caption>
<tr bgcolor="yellow">
<th> RollNo </th>
<th> Name </th>
<th> Department </th>
</tr>
<tr>
<td bgcolor="pink"> Comp-1 </td>
<td> John</td>
<td> Computer </td>
</tr>
<tr>
<td> Comp-2 </td>
<td> George </td>
<td> Computer </td>
</tr>
<tr>
<td> Comp-3 </td>
<td> Rachel </td>
<td> Computer </td>
</tr>
</table>
</body>
</html>
2) background attribute - it sets the background image for the entire table or the entire row or just one cell.
<head>
<title> HTML Table Example </title>
</head>
<body>
<table border="2" bgcolor="lightgray">
<caption> Student Details</caption>
<tr bgcolor="yellow">
<th> RollNo </th>
<th> Name </th>
<th> Department </th>
</tr>
<tr>
<td bgcolor="pink"> Comp-1 </td>
<td> John</td>
<td> Computer </td>
</tr>
<tr>
<td> Comp-2 </td>
<td> George </td>
<td> Computer </td>
</tr>
<tr>
<td> Comp-3 </td>
<td> Rachel </td>
<td> Computer </td>
</tr>
</table>
</body>
</html>
2) background attribute - it sets the background image for the entire table or the entire row or just one cell.
Example
<!DOCTYPE html>
<head>
<title> HTML Table Background Example </title>
</head>
<body>
<table border="2" background="company.png">
<caption> Student Details</caption>
<tr background="banner.png">
<th> RollNo </th>
<th> Name </th>
<th> Department </th>
</tr>
<tr>
<td background="logo.png"> Comp-1 </td>
<td> John</td>
<td> Computer </td>
</tr>
<tr>
<td> Comp-2 </td>
<td> George </td>
<td> Computer </td>
</tr>
<tr>
<td> Comp-3 </td>
<td> Rachel </td>
<td> Computer </td>
</tr>
</table>
</body>
</html>
<head>
<title> HTML Table Background Example </title>
</head>
<body>
<table border="2" background="company.png">
<caption> Student Details</caption>
<tr background="banner.png">
<th> RollNo </th>
<th> Name </th>
<th> Department </th>
</tr>
<tr>
<td background="logo.png"> Comp-1 </td>
<td> John</td>
<td> Computer </td>
</tr>
<tr>
<td> Comp-2 </td>
<td> George </td>
<td> Computer </td>
</tr>
<tr>
<td> Comp-3 </td>
<td> Rachel </td>
<td> Computer </td>
</tr>
</table>
</body>
</html>
Align attribute
It specifies the alignment of the table on the web page.
By default, a table is left aligned on the web page. You can set it to right or center as well.
Example
<table align=”center”>
Full Program Code
<html>
<body>
<table bgcolor="lightgray" border="2": cellspacing="5" cellpadding="2" align="center">
<caption><h1>Table Tag Example</h1></caption>
<tr>
<th>Roll NO</th>
<th>Full Name</th>
<th>Department</th>
<th colspan="2">Contact No.</th>
</tr>
<tr>
<td>1</td>
<td>John Chirstopher</td>
<td>Computer</td>
<td>9876512343</td>
<td>8989722112</td>
</tr>
<tr>
<td>2</td>
<td>Rachel Costner</td>
<td>Mechanical</td>
<td colspan="2"><center><b><i><u>9888888833</center></u></i></b></td>
</tr>
<tr>
<td>3</td>
<td>Maria Fernandes</td>
<td rowspan="2">Electrical</td>
<td>7778888833</td>
<td>7779898982</td>
</tr>
<tr>
<td>4</td>
<td>Tom Cruise</td>
<td>1118888833</td>
<td>1119898982</td>
</tr>
<tr>
<td colspan="2">
<ol>
<li>HTML</li>
<li>JAVA</li>
<li>VB.NET</li>
<li>C++</li>
</ol>
</td>
<td colspan="3"><img src="vegetable.png" height="150px" width="300px"></td>
</tr>
</table>
</body>
</html>
Output:
Conclusion
HTML table tags play very important role in web development, providing a structured and efficient means to present tabular data. Developers can create a simple tables with a few rows and columns to complex structures with merged cells and multi-level headers.
Understanding the basic syntax, attributes, and styling options of HTML tables empowers developers to create visually appealing and accessible tables.
