HTML Tables — Complete Guide
A table displays information in rows and columns — timetables, price lists, marksheets, comparisons. Today you'll learn
every tag and attribute used to build one, from the basic structure to merging cells. Go slowly: read a section, complete its
mini practice, then move to the next.
1. The Basic Structure — <table>, <tr>, <td>, <th>
Every table starts with a <table> tag — the container for the whole grid. Inside it, you build the grid one row at a time.
• <table> — the outer container for the entire table.
• <tr> (table row) — one horizontal row. You add one <tr> for every row you want.
• <td> (table data) — one regular cell, placed inside a <tr>. The number of <td> tags in a row is how many columns that
row has.
• <th> (table header) — same as <td>, but for header cells. Browsers automatically show its text bold and centered, and it
carries extra meaning for screen readers ("this labels a column/row").
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Aisha</td>
<td>21</td>
</tr>
<tr>
<td>Raj</td>
<td>23</td>
</tr>
</table>
Read this the way the browser does: <table> opens the grid, the first <tr> becomes the header row (built from <th>), and
every <tr> after it is a data row (built from <td>). Every row must have the same number of cells for the table to line up
correctly.
Teacher's tip:
A very common beginner mistake is putting text directly inside <tr>, skipping <td>. Text only goes inside <td> or <th> —
never directly inside <tr> or <table>.
✎ Mini Practice 1
1. Create a table with 3 columns: Name, Subject, Marks.
2. Add a header row using <th>, then 4 data rows using <td> with any student details you like.
2. <caption> — Giving Your Table a Title
<caption> adds a title for the whole table. It must be placed immediately after the opening <table> tag, and the browser
automatically displays it centered above the table.
<table>
<caption>Weekly Class Timetable</caption>
<tr>
<th>Day</th>
<th>Subject</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
</tr>
</table>
3. Common Table Attributes
These attributes control how the table looks. Some are old-style HTML attributes you'll still see everywhere and should
recognize; a couple are technically CSS but are taught alongside tables because they're used so often together.
Attribute What it does
border Sets a visible border thickness in pixels around the table and every cell. border="1"
is the classic way beginners give a table visible grid lines; border="0" (or leaving it
out) shows no lines at all.
cellpadding Space, in pixels, between a cell's border and its content (the text inside doesn't touch
the cell wall).
cellspacing Space, in pixels, between one cell and the next — i.e. gaps between cells
themselves.
width / height Sets the table's (or a single cell's) size, in pixels or as a percentage, e.g.
width="100%".
align Horizontal alignment of the table on the page (left/center/right) or of a cell's content.
valign Vertical alignment of a cell's content (top/middle/bottom) — useful when one cell in
a row has much more text than others.
bgcolor Background color of the whole table or a single cell, using a color name or hex code
like #f2f2f2.
<table border="1" cellpadding="8" cellspacing="0" width="100%">
<tr bgcolor="#dddddd">
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td valign="top">Notebook</td>
<td>$2</td>
</tr>
</table>
Teacher's tip:
border, cellpadding, cellspacing, align, and bgcolor are all old HTML attributes. They still work in every browser and are
worth knowing because you'll see them in a lot of existing code, but in modern, professional projects these are usually done
with CSS instead. Learn them here so you can read and quickly build simple tables — we'll revisit proper styling once we
reach CSS.
✎ Mini Practice 2
1. Take your Mini Practice 1 table and add border="1", cellpadding="10", and cellspacing="0".
2. Give your header row a bgcolor.
3. Set the table's width to 80%.
4. border-collapse — Fixing Double Borders
When you use border="1", you may notice each cell seems to have a thick, doubled-up line — that's because every cell is
drawing its own separate border right next to its neighbor's. border-collapse is a CSS property (written inside a style attribute
or a <style> block, not as a plain HTML attribute) that merges all those borders into a single clean line.
<table border="1" style="border-collapse: collapse;">
<tr>
<th>Day</th>
<th>Subject</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
</tr>
</table>
style="border-collapse: collapse;" is the version you'll use almost every time you add a border to a table — it's what makes a
table look like one clean grid instead of a stack of separately-boxed cells.
5. rowspan and colspan — Merging Cells
Sometimes one cell needs to stretch across more than one row or column — a “Total” cell spanning several columns, or a
category name spanning several rows. Two attributes handle this, and both go inside a <td> or <th>.
a) colspan — merge cells across columns (sideways)
colspan="2" makes one cell take up the space of 2 columns. When you use it, remember to add one fewer <td> in that row,
since this one cell is now doing the job of two.
<table border="1">
<tr>
<th colspan="2">Student Details</th>
</tr>
<tr>
<td>Name</td>
<td>Aisha</td>
</tr>
</table>
b) rowspan — merge cells across rows (downwards)
rowspan="2" makes one cell take up the space of 2 rows. The row(s) below it need one fewer <td>, since this cell already
fills that column for them.
<table border="1">
<tr>
<td rowspan="2">Monday</td>
<td>Math</td>
</tr>
<tr>
<td>Science</td>
</tr>
</table>
Teacher's tip:
rowspan/colspan are the single most common place beginners miscount cells and break their table's alignment. After using
either, always count: total columns in every row (accounting for spans) should still match.
✎ Mini Practice 3
1. Build a small table where a header cell says “Contact Info” and uses colspan="2" to span the Phone and
Email columns below it.
2. Build a small timetable where one subject (e.g. “Lunch Break”) uses rowspan="2" because it repeats
across two time slots.
6. <thead>, <tbody>, and <tfoot> — Structuring Larger Tables
For longer, more “real” tables, HTML lets you group rows into three semantic sections instead of just a flat list of <tr>. This
doesn't change how the table looks by default, but it organizes your code clearly and lets you style each section differently
later with CSS.
• <thead> — wraps the header row(s), placed first.
• <tbody> — wraps the main data rows — the actual content of the table.
• <tfoot> — wraps a footer row, often used for totals or summaries.
<table border="1">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pen</td>
<td>$1</td>
</tr>
<tr>
<td>Notebook</td>
<td>$2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$3</td>
</tr>
</tfoot>
</table>
Note that thead/tbody/tfoot can appear in the code in any order (tfoot is even allowed before tbody), but the browser always
displays header first, body in the middle, footer last.
✎ Mini Practice 4
1. Rebuild your Mini Practice 1 table using <thead> for the header row and <tbody> for the student rows.
2. Add a <tfoot> row showing the total number of students.
7. <colgroup> and <col> — Styling Whole Columns (Good to Know)
<colgroup> and <col> let you target an entire column at once — for example, to give one specific column a background
color — without adding an attribute to every single <td> in it. Placed right after <caption> (if any), before <thead>.
<table border="1">
<colgroup>
<col style="background-color:#f2f2f2;">
<col>
</colgroup>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Aisha</td>
<td>21</td>
</tr>
</table>
You won't need this often as a beginner, but recognizing it when you see it in other people's code is useful.
Quick Reference — Every Tag & Attribute Covered Today
Tag/Attribute What it does Example
table The outer container for a table <table>...</table>
tr One row <tr>...</tr>
td One regular data cell <td>...</td>
th One header cell (bold, centered) <th>...</th>
caption Title of the table <caption>Title</caption>
thead / tbody / tfoot Header / body / footer row groups <thead>...</thead>
colgroup / col Targets a whole column at once <colgroup><col></colgroup>
border Border thickness (px) border="1"
cellpadding Space inside each cell cellpadding="8"
cellspacing Space between cells cellspacing="0"
width / height Size of table or cell width="100%"
align / valign Horizontal / vertical alignment valign="top"
bgcolor Background color bgcolor="#f2f2f2"
colspan Merge cells across columns colspan="2"
rowspan Merge cells across rows rowspan="2"
style="border- Merges doubled borders into one clean line style="border-collapse: collapse;"
collapse:collapse;"
Final Task 1 (In Class) — Class Marksheet Table
Build one complete table, in class, using everything from today:
1. Add a <caption> that says “Class Marksheet”.
2. Use <thead> for the header row with columns: Roll No, Name, Subject, Marks, Grade.
3. Use <tbody> for at least 5 student rows.
4. Merge cells with colspan somewhere sensible — e.g. a header cell spanning “Subject” and “Marks” together as
“Performance”.
5. Merge cells with rowspan somewhere sensible — e.g. two rows for the same student appearing under one merged Roll
No/Name.
6. Add a <tfoot> row showing the class average marks.
7. Apply border="1", cellpadding="8", cellspacing="0", and style="border-collapse: collapse;" so it looks like a clean
single-line grid.
8. Give the header row a bgcolor of your choice.
Save this as [Link], open it in your browser, and check every merged cell lines up correctly (no missing or extra
columns in any row) before submitting.
Final Task 2 (Homework) — Weekly Timetable, With Changes
Same skills, but a different table — build your own Weekly Class Timetable. Don't just copy Task 1. Make these specific
changes:
1. Use <caption> with a different title: “My Weekly Timetable”.
2. Columns this time: Time Slot, Monday, Tuesday, Wednesday, Thursday, Friday.
3. Use rowspan for a subject or break that repeats across two consecutive time slots on the same day.
4. Use colspan for one row that spans the full width — e.g. a “Lunch Break” row spanning all 5 day columns in one cell.
5. This time, instead of bgcolor, set the background color using style="background-color: ..." on the header row, so you
practice both approaches.
6. Use <colgroup>/<col> to give the “Time Slot” column its own light background color, separate from the rest of the
table.
7. Keep border-collapse, but this time set cellpadding to a different value than Task 1 and explain in one sentence (as a
comment in your HTML) why you chose it.
Save this as [Link]. Submit both the file and a screenshot, same as always.
After This: Two Self-Practice Tasks, Then a Test
Once you're comfortable with tables, I will give you two more tasks as images only — just a picture of a finished table, no
code and no written instructions. Your job is to figure out the structure and rebuild that exact table yourself using everything
you've learned. I'll help if you get stuck on a specific point, but the goal is for you to work through most of it independently.
After those two tasks, there will be a test on tables that you must complete completely on your own.