How to make Tables in HTML
How to make Tables in HTML
Complete guide to using HTML table elements for data organization
Introduction to HTML Tables
HTML tables are used to display tabular data in rows and columns. Tables consist of cells organized into rows and columns, and can include headers, footers, and captions for better structure and accessibility.
Table Examples:
Basic Table
| Name | Age | City |
|---|---|---|
| John Doe | 25 | New York |
| Jane Smith | 30 | London |
Table with Header, Body and Footer
| Product | Price | Quantity |
|---|---|---|
| Laptop | $999 | 5 |
| Mouse | $25 | 12 |
| Total Items | 17 | |
HTML Table Structure
Basic Table 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>
Table Elements and Attributes
| Element | Description | Attributes |
|---|---|---|
| <table> | Defines the table container | border, width, cellpadding, cellspacing |
| <tr> | Defines a table row | - |
| <th> | Defines a table header cell | colspan, rowspan, scope |
| <td> | Defines a table data cell | colspan, rowspan |
| <thead> | Groups header content | - |
| <tbody> | Groups body content | - |
| <tfoot> | Groups footer content | - |
| <caption> | Defines a table caption | - |
Advanced Table Features
Complex Table with Colspan and Rowspan
<table border="1">
<caption>Employee Schedule</caption>
<thead>
<tr>
<th rowspan="2">Employee</th>
<th colspan="3">Working Hours</th>
</tr>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>9:00-17:00</td>
<td>10:00-18:00</td>
<td>9:00-17:00</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>8:00-16:00</td>
<td>8:00-16:00</td>
<td>Off</td>
</tr>
</tbody>
</table>
Best Practices for Using HTML Tables
Key Guidelines
- Use tables for tabular data only, not for page layout
- Always include <th> elements for column headers
- Use <thead>, <tbody>, and <tfoot> for better structure
- Provide a <caption> for table description
- Use scope attribute in <th> for accessibility
- Use colspan and rowspan sparingly and correctly
- Ensure tables are responsive on mobile devices
- Test table accessibility with screen readers
Complete HTML Document Example
Advanced Table Structure
<!DOCTYPE html>
<html>
<head>
<title>Student Grades Table</title>
</head>
<body>
<h1>Student Grade Report</h1>
<table border="1">
<caption>Spring 2023 Student Grades</caption>
<thead>
<tr>
<th scope="col">Student ID</th>
<th scope="col">Name</th>
<th scope="col">Major</th>
<th colspan="3">Grades</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th>Math</th>
<th>Science</th>
<th>English</th>
</tr>
</thead>
<tbody>
<tr>
<td>S001</td>
<td>Alice Johnson</td>
<td>Computer Science</td>
<td>A</td>
<td>B+</td>
<td>A-</td>
</tr>
<tr>
<td>S002</td>
<td>Bob Williams</td>
<td>Engineering</td>
<td>B</td>
<td>A</td>
<td>B+</td>
</tr>
<tr>
<td>S003</td>
<td>Carol Davis</td>
<td>Mathematics</td>
<td>A+</td>
<td>A</td>
<td>A-</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total Students</td>
<td colspan="3">3</td>
</tr>
</tfoot>
</table>
</body>
</html>
HTML Tables Compiler
Practice creating HTML tables in the editor below. The live preview will update as you type. Try different table structures and features!
