Table Basics
Overview
The HTML <table> element is incredibly powerful for displaying two-dimensional, multi-axis data (like financial reports, sports standings, or user directories). In the early 2000s, developers severely abused tables to build entire website layouts (Sidebar in column 1, content in column 2). Today, this is considered a massive anti-pattern. CSS Flexbox and Grid handle layouts. Tables must be used strictly and exclusively for rendering tabular data.
Syntax
<!-- The outer table wrapper -->
<table>
<!-- A single Table Row -->
<tr>
<!-- Table Headers (Bolded and centered by default) -->
<th>Employee ID</th>
<th>Name</th>
<th>Department</th>
</tr>
<!-- A data row -->
<tr>
<!-- Table Data cells -->
<td>1045</td>
<td>Alice Smith</td>
<td>Engineering</td>
</tr>
<!-- Another data row -->
<tr>
<td>1046</td>
<td>Bob Jones</td>
<td>Marketing</td>
</tr>
</table>Common Pitfalls
- Using
<table>for layout purposes (e.g., trying to align a login form label next to its input). This destroys accessibility because screen readers will announce 'Table with 2 columns' when attempting to read the form, completely confusing visually impaired users. - Omitting table headers (
<th>). Without headers, columns are just floating data points with zero context.
Interview Questions
<th> and <td>?<th> (Table Header) represents a descriptive header cell, signaling to assistive technologies what the column or row represents. <td> (Table Data) represents the actual data values contained within.
Real-World Example
A minimal, CSS-styled data table representation.
<!--
While HTML defines the structure,
you will rely heavily on CSS to make it readable.
-->
<style>
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
tr:nth-child(even) { background-color: #f2f2f2; }
</style>
<table>
<!-- table structure here -->
</table>Check Your Knowledge
Test your understanding of Table Basics with these quick questions.