How to Create Table in HTML?
Last Updated :
24 Apr, 2024
HTML tables are essential for organizing and displaying data in a structured format on web pages. Creating a table in HTML is a fundamental skill for web developers. It is used for product information, presenting data analytics, or designing a pricing comparison chart, etc. This article provides a step-by-step guide on how to create tables in HTML.
Elements of HTML Table
Table Elements
| Description
|
|---|
<table>
| The <table> element defines the start and end of the table. It acts as a container for all the table-related elements.
|
<tr>
| The <tr> (table row) element defines a row within the table. Each <tr> tag represents a horizontal row of cells or data entries.
|
<th>
| The <th> (table header) element defines header cells within a table row (<tr>). Header cells are typically used to label columns or rows in the table. They are usually bold and centered by default, providing emphasis on the content they represent.
|
<td>
| The <td> (table data) element defines regular data cells within a table row (<tr>). Data cells contain actual data or information that is displayed in the table. Unlike <th> cells, <td> cells are not bold and are aligned to the left by default.
|
<thead>
| The <thead> element defines the header section of a table, containing header rows (<tr> with <th>).
|
<tbody>
| The <tbody> element groups the main content of the table, containing rows (<tr>) with data cells (<td>).
|
<tfoot>
| The <tfoot> element defines the footer section of a table, usually containing summary rows or totals.
|
<colgroup> and <col>
| The <colgroup> element allows you to group together and style columns in a table. Inside <colgroup>, you can use <col> elements to define specific column properties such as width, alignment, and styling. This provides more control over the appearance of columns across the table.
|
<caption>
| The <caption> element provides a title or description for the entire table. It is placed immediately after the opening <table> tag and before any <tr> elements.
|
Note: The <thead>, <tbody>, <tfoot> elements help to organize the table structure logically and are optional but recommended for clarity.
Table Structure
Within the <table> element, the table structure is organized as rows (<tr>) and columns defined by header cells (<th>) or data cells (<td>). Rows (<tr>) contain one or more cells (<th> or <td>), depending on the structure of the table.
Basic Syntax of HTML Table
<table>
<tr>
<th></th>
<th></th>
...
</tr>
<tr>
<td></td>
<td></td>
...
</tr>
...
</table>Example: Here is an example of HTML table with two rows and three columns.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic HTML Table</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
</tr>
</table>
</body>
</html>
Note: The border attribute is not supported by HTML5. CSS border property is used to set the table border in HTML5.
Output:
Adding Table Heading to Rows
To add a table heading to rows in an HTML table, you can use the <th> element within the <tr> element. This is useful when you have data that represents headings for each row.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic HTML Table</title>
</head>
<body>
<table border="1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
</tr>
</table>
</body>
</html>
Output:
HTML Table with thead, tbody, and tfoot Elements
The <thead> section is used for headers that describe the columns of the table. The <tbody> section contains the main data rows. The <tfoot> section provides a footer row typically used for summary information or totals.
This structure follows best practices for organizing data in HTML tables and provides clear separation between the table header, body, and footer sections.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
HTML Table with thead, tbody, and tfoot
</title>
</head>
<body>
<h2>Sales Report</h2>
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Product Category</th>
<th>Units Sold</th>
<th>Revenue ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>Furniture</td>
<td>150</td>
<td>$15,000</td>
</tr>
<tr>
<td>February</td>
<td>Furniture</td>
<td>120</td>
<td>$12,000</td>
</tr>
<tr>
<td>January</td>
<td>Electronics</td>
<td>200</td>
<td>$25,000</td>
</tr>
<tr>
<td>February</td>
<td>Electronics</td>
<td>180</td>
<td>$20,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>650</td>
<td>$72,000</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...