HTML – TABLES
HTML Tables Overview
HTML tables allow web authors to organize and display data in a structured format, using rows and columns of cells. This makes it easy to present various types of content, including text, images, links, and even other tables.
Key Elements of HTML Tables
1.'<table>': This tag is the container for the entire table. It defines the table structure.
2.'<tr>': (Table Row): This tag is used to create a new row within the table. Each row can contain one or more cells.
3.'<td>': (Table Data): This tag is used to create a standard data cell within a row. It can contain text, images, links, or other HTML elements.
4.'<th>':(Table Header): This tag is used to create header cells, which are typically bold and cantered. Header cells help to define the content of the columns.
5.'<thead>': This optional tag groups the header content in the table, making it easier to style and manage.
6.'<tbody>': This optional tag groups the main body content of the table.
7.'<tfoot>': This optional tag groups the footer content, which can be used for summaries or additional information.
HTML tables help web authors arrange data in a tabular format consisting of rows and columns. Tables can include:
- Text
- Images
- Links
- Other Tables
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabel</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" rel="stylesheet"></link>
<style>
.highlight {
color: red;
}
</style>
</head>
<body>
<body>
<h1>Basic 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 A</td>
<td>Data B</td>
<td>Data C</td>
</tr>
</table>
</body>
</html>
This will produce the following result:
Additional Features
Merging Cells: You can use the colspan attribute in or to merge multiple columns, and the rowspan attribute to merge multiple rows.
Styling: CSS can be applied to tables to enhance their appearance, including borders, padding, background colors, and text alignment.
Accessibility: Using the tag provides a title for the table, improving accessibility for screen readers.
Explanation of Tags
- <table>: Defines the table.
- <tr>: Table row.
- <th>: Table header cell (bold and centered by default)
- <td>: Table data cell.
Example of an HTML Table
<table border="1" style="border-collapse: collapse; width: 100%;">
<tr style="background-color: #f2f2f2;">
<th style="padding: 10px; text-align: left;">Header 1</th>
<th style="padding: 10px; text-align: left;">Header 2</th>
<th style="padding: 10px; text-align: left;">Header 3</th>
</tr>
<tr>
<td style="padding: 10px;">Data 1</td>
<td style="padding: 10px;">Data 2</td>
<td style="padding: 10px;">Data 3</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;">Data A</td>
<td style="padding: 10px;">Data B</td>
<td style="padding: 10px;">Data C</td>
</tr>
</table>
This will produce the following result:
Merging Cells
- colspan: Merges cells horizontally.
- rowspan: Merges cells vertically.
Example of an HTML Table
<table border="1">
<tr>
<th colspan="2">Merged Header</th>
</tr>
<tr>
<td rowspan="2">Merged Row</td>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
</tr>
</table>
This will produce the following result:
Advanced Table Features
- Caption: Adds a title to the table.
Example of an HTML Table
<table border="1">
<caption>Student Grades</caption>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
<tr>
<td>John</td>
<td>Math</td>
<td>A</td>
</tr>
</table>
This will produce the following result:
- Responsive Tables: Use CSS to make tables responsive on smaller screens. Example of an HTML Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabel</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" rel="stylesheet"></link>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto;
}
}
</style>
</head>
<body>
<table border="1">
<caption>Student Grades</caption>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
<tr>
<td>John</td>
<td>Math</td>
<td>A</td>
</tr>
</table>
</body>
</html>
This will produce the following result:
In HTML, tables can be divided into three main sections: header, body, and footer. These sections are defined using <thead>, <tbody>, and <tfoot> tags. This structure improves readability, accessibility, and styling flexibility. Structure of Table with Header, Body, and Footer
Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table with Header, Body, and Footer</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
thead {
background-color: #f2f2f2;
}
tfoot {
background-color: #f9f9f9;
font-weight: bold;
}
</style>
</head>
<body>
<h1 style="text-align: center;">HTML Table Example</h1>
<table>
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>10</td>
<td>$5.00</td>
</tr>
<tr>
<td>Oranges</td>
<td>8</td>
<td>$4.00</td>
</tr>
<tr>
<td>Bananas</td>
<td>12</td>
<td>$6.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>$15.00</td>
</tr>
</tfoot>
</table>
</body>
</html>
This will produce the following result:
HTML Table FAQ
Q 1. What are HTML tables used for?
Ans. HTML tables are used to organize and display data in a structured format with rows and columns. Examples include schedules, pricing lists, reports, or comparisons
Q 2. What are the main tags for creating tables?
Ans:
- <table>: Defines the table.
- <tr>: Defines a row.
- <th>: Defines a header cell (bold and centered by default).
- <td>: Defines a data cell (normal content).
Q 3. Can I add images or links inside table cells?
Ans. Yes, you can insert any HTML content inside a <td> or <th> tag, including:
Images: <td><img src="image.jpg" alt="Description"></td>
Links: <td><a href="https://example.com">Click Here</a></td>
Q 4. How do I merge cells in a table?
Ans: Horizontally: Use colspan
<td colspan="2">Merged Cell</td>
<td rowspan="2">Merged Cell</td>
Q 5. How can I style a table?
Ans:You can use inline styles or CSS:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
Q 6. What is the difference between <thead>, <tbody>, and <tfoot>?
Ans :
- <thead>: Contains the table's header rows.
- <tbody>: Contains the main data rows.
- <tfoot>: Contains the footer rows (like totals or summary).
<table>
<thead>
<tr><th>Header</th></tr>
</thead>
<tbody>
<tr><td>Data</td></tr>
</tbody>
<tfoot>
<tr><td>Footer</td></tr>
</tfoot>
</table>
7. Can I make a table responsive?
Ans :Yes, you can use CSS:
<style>
table {
width: 100%;
border-collapse: collapse;
}
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto;
}
}
</style>
Q 8. How can I add a caption to a table?
Ans :Use the <caption> tag:
<table>
<caption>Monthly Sales Report</caption>
<tr><th>Month</th><th>Sales</th></tr>
<tr><td>January</td><td>$10,000</td></tr>
</table>
Q 9. Can tables be nested?
Ans :Yes, you can nest one table inside another:
<table border="1">
<tr>
<td>
<table border="1">
<tr><td>Nested Table</td></tr>
</table>
</td>
</tr>
</table>
Q 10. What are common accessibility tips for tables?
Ans:
- Add a summary: <table summary="Describes the table's content.">
- Use <caption> to describe the table.
- Add scope to headers:
<th scope="col">Column Header</th>
<th scope="row">Row Header</th>