In HTML, a table is used to display data in rows and columns. The <table> element, along with nested elements like <tr> (table row), <th> (table header), and <td> (table data), help structure data for easy viewing and organization.
Tables are useful for:
This is a simple table with three rows and two columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Table Page</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
border: 1px solid #bdc3c7;
padding: 10px 20px;
text-align: left;
}
th {
background-color: #3498db;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th><br>
<th>Last Name</th>
</tr>
<tr>
<td>Laeeque</td>
<td>Deshmukh</td>
</tr>
<tr>
<td>Nabil </td>
<td>Mirza</td>
</tr>
</table>
</body>
</html>
First Name
Last Name
Laeeque
Deshmukh
Nabil
Mirza
In this table, we use colspan and rowspan to span cells across multiple columns and rows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Table Page</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
border: 1px solid #bdc3c7;
padding: 10px 20px;
text-align: left;
}
th {
background-color: #3498db;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Product</th>
<th>Price</th>
</tr>
<tr>
<td rowspan="2">Carrot</td>
<td>Organic</td>
<td>$2</td>
</tr>
<tr>
<td>Non-organic</td>
<td>$1</td>
</tr>
</table>
</body>
</html>
Product
Price
Carrot
Organic
$2
Non-organic
$1
This example shows a table with alternating row colors for better readability.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Table Page</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
border: 1px solid #bdc3c7;
padding: 10px 20px;
text-align: left;
}
th {
background-color: #3498db;
color: white;
}
.highlighted { background-color: #ecf0f1; }
</style>
</head>
<body>
<table>
<tr>
<th>Item</th>s
<th>Quantity</th>
</tr>
<tr class="highlighted">
<td>Bananas</td>
<td>12</td>
</tr>
<tr>
<td>Oranges</td>
<td>20</td>
</tr>
</table>
</body>
</html>
Item
Quantity
Bananas
12
Oranges
20
You can use table headers and footers to organize your data more clearly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Table Page</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
border: 1px solid #bdc3c7;
padding: 10px 20px;
text-align: left;
}
th {
background-color: #3498db;
color: white;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Months</th>
<th>Sales</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>$2500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January to June</td>
<td>$1200</td>
</tr>
<tr>
<td>July to December</td>
<td>$1300</td>
</tr>
</tbody>
</table>
</body>
</html>
Months
Sales
Total
$2500
January to June
$1200
July to December
$1300
Tables are a fundamental part of HTML for displaying organized data. With various features like headers, footers, spanning cells, and styling, tables provide a flexible structure for organizing information clearly.