HTML Tables
Master this topic with zero to advance depth.
Expert Answer & Key Takeaways
Mastering HTML Tables is essential for high-fidelity technical architecture and senior engineering roles in 2026.
HTML Tables Overview
HTML tables allow web developers to arrange data into rows and columns. They are ideal for displaying structured data like schedules, price lists, or financial reports.
<table>
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Google</td>
<td>USA</td>
</tr>
<tr>
<td>Samsung</td>
<td>South Korea</td>
</tr>
</table>Example Explained
- The
<table>tag defines an HTML table. - The
<tr>tag defines a table row. - The
<th>tag defines a table header. By default, header cells are bold and centered. - The
<td>tag defines a table cell (table data).
Spanning Rows & Columns
Sometimes a cell should span more than one column or row. This is achieved using the
colspan and rowspan attributes.Colspan (Column Span)
To make a cell span more than one column, use the
colspan attribute:<table>
<tr>
<th colspan="2">Full Name</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
</table>Rowspan (Row Span)
To make a cell span more than one row, use the
rowspan attribute:<table>
<tr>
<th rowspan="2">Phone</th>
<td>555-0101</td>
</tr>
<tr>
<td>555-0102</td>
</tr>
</table>Semantic Table Elements
For better accessibility and SEO, HTML provides semantic tags to group table content.
<thead>: Groups the header content.<tbody>: Groups the body content.<tfoot>: Groups the footer content.<caption>: Adds a title/caption to the table.
<table>
<caption>Monthly Savings</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$100</td>
</tr>
</tfoot>
</table>💡 Quick Task
Create a table for a 'Weekly Schedule'. Add a
<caption> named 'My Study Routine'. Use colspan="5" for a row that says 'Work Days' across multiple columns.Interview Corner
❓ Interview Question
Q: What is the primary difference between
<th> and <td>?A:
<th> stands for Table Header and is used for header cells, which are bold and centered by default. <td> stands for Table Data and is used for regular data cells, which are regular font and left-aligned by default.❓ Interview Question
Q: How do you add a title to an HTML table?
A: You can use the
<caption> tag immediately after the opening <table> tag. This provides a clear title for the table content, which is also beneficial for screen readers.❓ Interview Question
Q: Why should we use
<thead>, <tbody>, and <tfoot>?A: These semantic tags help in organizing large tables, improve accessibility, and allow browsers to scroll the table body independently of the header and footer when printed.
Course4All Engineering Team
Verified ExpertFrontend Architects
Focused on accessibility, semantic structure, and modern SEO, our frontend team ensures the HTML/CSS curriculum meets 2026 professional standards.
Pattern: 2026 Ready
Updated: Weekly
Found an issue or have a suggestion?
Help us improve! Report bugs or suggest new features on our Telegram group.