Introduction
In this chapter, you will learn about HTML tables, which are used to display data in a tabular format. Tables are an essential part of web design, allowing you to organize information into rows and columns. Understanding how to create and style tables is crucial for presenting data clearly and effectively. We will cover a real-world use case of displaying student information.
Basic Table Structure
An HTML table is defined with the <table>
tag. Each table is divided into rows (<tr>
), and each row is divided into cells. There are two types of table cells: header cells (<th>
) and standard cells (<td>
).
Syntax
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
Example of a Simple Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Table</title>
</head>
<body>
<h1>Simple HTML Table</h1>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>
Table Attributes
Border
The border
attribute specifies the width of the table border.
Example
<table border="1">
...
</table>
Cell Padding
The cellpadding
attribute specifies the space between the cell content and its borders.
Example
<table border="1" cellpadding="10">
...
</table>
Cell Spacing
The cellspacing
attribute specifies the space between the cells.
Example
<table border="1" cellspacing="5">
...
</table>
Table Caption
The <caption>
tag defines a title or caption for the table.
Example
<table border="1">
<caption>Table Caption</caption>
...
</table>
Advanced Table Features
Colspan
The colspan
attribute allows a cell to span multiple columns.
Example
<tr>
<td colspan="2">This cell spans two columns</td>
</tr>
Rowspan
The rowspan
attribute allows a cell to span multiple rows.
Example
<tr>
<td rowspan="2">This cell spans two rows</td>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
</tr>
Styling Tables with CSS
You can use CSS to style tables and make them more visually appealing.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled HTML Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Styled HTML Table</h1>
<table>
<caption>Table with CSS Styling</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>
Real-World Use Case: Student Information Table
A common use case for HTML tables is displaying student information in a tabular format. The table can include student ID, first name, last name, age, and roll number.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Information</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f4f4f4;
text-align: left;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h1>Student Information</h1>
<table>
<caption>Student Information Table</caption>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Roll No</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>20</td>
<td>101</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Smith</td>
<td>21</td>
<td>102</td>
</tr>
<tr>
<td>3</td>
<td>Emily</td>
<td>Johnson</td>
<td>22</td>
<td>103</td>
</tr>
</table>
</body>
</html>
Conclusion
HTML tables are used for organizing and presenting data in a structured format. By using the <table>
, <tr>
, <th>
, and <td>
tags along with various attributes and CSS, you can create complex and visually appealing tables. Understanding how to use and style tables effectively is essential for web development. The real-world example of a student information table demonstrates how tables can be used to display useful information in an organized manner.