Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Design a table using table tag and its attributes
The HTML <table> tag is used to create structured data displays in rows and columns. Combined with various table attributes like border, cellpadding, cellspacing, and background styling, you can design professional-looking tables for presenting data on web pages.
Tables are essential for displaying comparative data, financial reports, schedules, and any information that benefits from a structured grid layout. The table structure uses several nested tags to organize content effectively.
Syntax
Following is the basic syntax for the HTML <table> tag
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Table Structure Elements
The following elements work together to create a complete table
<table> The container element that defines the table
<tr> Table row element that creates horizontal rows
<th> Table header element for column headings (bold and centered by default)
<td> Table data element for regular cell content
<caption> Optional element that provides a title for the table
Basic Table with Border
Following example shows how to create a simple table using the <table> tag with the border attribute
<!DOCTYPE html>
<html>
<head>
<title>Basic Table Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<table border="2" style="border-collapse: collapse;">
<tr>
<th>Name</th>
<th>IPL Team</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>CSK</td>
<td>India</td>
</tr>
<tr>
<td>Butler</td>
<td>RR</td>
<td>England</td>
</tr>
<tr>
<td>Williamson</td>
<td>GT</td>
<td>New Zealand</td>
</tr>
<tr>
<td>Pooran</td>
<td>LSG</td>
<td>West Indies</td>
</tr>
</table>
</body>
</html>
The output displays a structured table with borders around each cell
| Name | IPL Team | Country | |------------|----------|-------------| | Dhoni | CSK | India | | Butler | RR | England | | Williamson | GT | New Zealand | | Pooran | LSG | West Indies |
Table with Colspan Attribute
The colspan attribute allows a cell to span across multiple columns. Following example demonstrates its usage
<!DOCTYPE html>
<html>
<head>
<title>Table with Colspan</title>
<style>
table, th, td {
border: 2px solid #D2B4DE;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<table style="width: 100%;">
<tr>
<th>Employee</th>
<th colspan="2">Address</th>
</tr>
<tr>
<td>Rahul</td>
<td>Current: Hyderabad</td>
<td>Permanent: Delhi</td>
</tr>
<tr>
<td>Maya</td>
<td>Current: Vizag</td>
<td>Permanent: Hyderabad</td>
</tr>
<tr>
<td>Raj</td>
<td>Current: Nellore</td>
<td>Permanent: Vijayawada</td>
</tr>
</table>
</body>
</html>
The "Address" header spans across two columns, creating a grouped header effect
| Employee | Address | | | Current | Permanent | |----------|---------|-------------| | Rahul | Current: Hyderabad | Permanent: Delhi | | Maya | Current: Vizag | Permanent: Hyderabad | | Raj | Current: Nellore | Permanent: Vijayawada |
Table with Caption
The <caption> element provides a title or description for the table. Following example shows its implementation
<!DOCTYPE html>
<html>
<head>
<title>Table with Caption</title>
<style>
table, th, td {
border: 2px solid #DFFF00;
border-collapse: collapse;
}
th, td {
padding: 12px;
}
caption {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<table>
<caption>Employee Details</caption>
<tr>
<th>Name</th>
<th>Department</th>
<th>Age</th>
</tr>
<tr>
<td>Kamal</td>
<td>IT</td>
<td>24</td>
</tr>
<tr>
<td>Raj</td>
<td>BPO</td>
<td>22</td>
</tr>
<tr>
<td>Maya</td>
<td>Development</td>
<td>26</td>
</tr>
<tr>
<td>Sana</td>
<td>Associate</td>
<td>27</td>
</tr>
</table>
</body>
</html>
The caption appears above the table as a descriptive title
Employee Details
| Name | Department | Age |
|-------|-------------|-----|
| Kamal | IT | 24 |
| Raj | BPO | 22 |
| Maya | Development | 26 |
| Sana | Associate | 27 |
Table with Background Color
Background colors can be applied to tables for visual enhancement. Following example demonstrates styling with background colors
<!DOCTYPE html>
<html>
<head>
<title>Styled Table with Background</title>
<style>
table {
border-collapse: collapse;
background-color: #ABEBC6;
width: 100%;
}
th, td {
border: 2px solid #7D3C98;
padding: 10px;
text-align: left;
}
th {
background-color: #D5A6BD;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<table>
<tr>
<th>Name</th>
<th>Country</th>
<th>Hobby</th>
</tr>
<tr>
<td>Mani< 
516 Views
