table tr td and th
Create basic tables with rows, data cells, and header cells.
table tr td and th is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
HTML Tables
Tables display data in rows and columns. Use them for tabular data — not for page layout.
<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Alice</td>
<td>95</td>
</tr>
<tr>
<td>Bob</td>
<td>87</td>
</tr>
</table>The table, tr, td Elements
Core table elements:
<table>— the table container<tr>— a table row<td>— a table data cell<th>— a table header cell (bold, centered by default)
th vs td
Use <th> for header cells — they have semantic meaning:
<table>
<tr>
<th>Language</th> <!-- header: bold + centered by default -->
<th>Year Created</th>
<th>Type</th>
</tr>
<tr>
<td>HTML</td> <!-- data cell -->
<td>1991</td>
<td>Markup</td>
</tr>
</table>Basic Table Structure
A minimal but complete table:
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Widget Pro</td>
<td>$49.99</td>
<td>In Stock</td>
</tr>
<tr>
<td>Widget Lite</td>
<td>$19.99</td>
<td>Out of Stock</td>
</tr>
</table>Table Borders with CSS
Browsers render tables without borders by default. Add them with CSS:
table {
border-collapse: collapse; /* merge double borders into one */
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 0.75rem 1rem;
text-align: left;
}
th {
background-color: #f5f5f5;
font-weight: 600;
}Tables Are Not for Layout
In the 1990s, tables were used for page layout. This is outdated and harmful:
- Screen readers interpret tables as data — layout tables confuse users
- Tables are inflexible on small screens
- CSS Grid and Flexbox replaced all layout needs
- Use
<table>only for actual tabular data
Responsive Tables
Tables overflow on small screens. Wrap them for horizontal scroll:
<div class="table-wrapper" style="overflow-x: auto;">
<table>
<!-- table content -->
</table>
</div>
/* Or use CSS: */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}Empty Cells
Handle empty cells deliberately:
<tr>
<td>Alice</td>
<td>95</td>
<td></td> <!-- Empty: renders blank -->
</tr>
/* CSS to style empty cells */
td:empty::before {
content: '—';
color: #999;
}thead and tbody Preview
Tables should use <thead> and <tbody> to separate header rows from data rows — covered in the next lesson:
<table>
<thead>
<tr><th>Name</th><th>Score</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>95</td></tr>
</tbody>
</table>col and colgroup for Column Styling
Apply styles to entire columns with <colgroup> and <col>:
<table>
<colgroup>
<col style="width: 200px; background: #f9f9f9;">
<col style="width: 100px;">
<col style="width: 100px;">
</colgroup>
<tr>
<th>Name</th>
<th>Score</th>
<th>Grade</th>
</tr>
</table>Zebra Striping with CSS
Alternate row colors for readability:
tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #e3f2fd;
}
/* nth-child(even) for even rows instead */Quick Check
What is the difference between td and th in a table?
Recap: table tr td th
Table basics:
<table>— table container<tr>— table row<td>— data cell<th>— header cell (semantic, bold by default)- Use
border-collapse: collapsefor clean borders - Tables are for data only — not page layout
Frequently asked questions
Is the “table tr td and th” lesson free?
Yes — the full text of “table tr td and th” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “table tr td and th”?
Create basic tables with rows, data cells, and header cells. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “table tr td and th” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.