HTML Basics
HTML Tables
Tables display data in rows and columns, like a spreadsheet. HTML builds them from a small set of tags that define the table, its rows, and each cell.
What is an HTML Table?
An HTML table presents tabular data — information that belongs in a grid of rows and columns. You build it with <table> as the container, <tr> for each row, <th> for header cells, and <td> for data cells.
Tables are for data, not for page layout. Modern layouts use CSS flexbox or grid instead. Reserve tables for genuine tabular content like schedules, prices, or statistics.
Basic Usage
<table>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
<tr>
<td>Asha</td>
<td>Developer</td>
</tr>
</table>Example: A Styled Table With Borders
<!DOCTYPE html>
<html>
<body>
<table border="1" style="border-collapse:collapse; text-align:left;">
<caption>Internship Openings</caption>
<tr style="background:#0d6efd; color:white;">
<th style="padding:8px;">Role</th>
<th style="padding:8px;">City</th>
<th style="padding:8px;">Stipend</th>
</tr>
<tr>
<td style="padding:8px;">Frontend Intern</td>
<td style="padding:8px;">Bengaluru</td>
<td style="padding:8px;">₹15,000</td>
</tr>
<tr>
<td style="padding:8px;">Data Analyst Intern</td>
<td style="padding:8px;">Mumbai</td>
<td style="padding:8px;">₹20,000</td>
</tr>
</table>
</body>
</html>More Examples
<table border="1" style="border-collapse:collapse;">
<tr>
<th colspan="2">Contact</th>
</tr>
<tr>
<td>Email</td>
<td>hello@example.com</td>
</tr>
<tr>
<td rowspan="2">Phone</td>
<td>Work: 111</td>
</tr>
<tr>
<td>Home: 222</td>
</tr>
</table>Table Tags Reference
| Tag | Meaning |
|---|---|
| <table> | The table container. |
| <tr> | A table row. |
| <th> | A header cell (bold, centred). |
| <td> | A standard data cell. |
| <caption> | A title for the whole table. |
| colspan / rowspan | Make a cell span multiple columns / rows. |
Use border-collapse:collapse in CSS to merge double borders into clean single lines. Add <th> header cells so screen readers can associate data with its column.
Do not use tables to lay out a whole page. It is inaccessible and hard to make responsive. Use CSS grid or flexbox for layout instead.
Key Takeaways
- Build tables with <table>, <tr>, <th>, and <td>.
- Use <th> for headers and <caption> for a table title.
- colspan and rowspan let cells span multiple columns or rows.
- Use tables only for data, never for page layout.