Today's craft
Tables — tabular data, not layout.
Last week you shipped a real three-page site and pushed it to GitHub. Today your pages learn to hold rows and columns: prices, timetables, marksheets — data whose meaning lives in its grid position. One warning comes with the power, and it's the first thing on the agenda.
Walk out of this room able to…
Last session ended with poshtik-campus/ pushed to your own GitHub repo. Today's practice files are throwaway single-file demos in your sandbox folder — but the habit still runs. Whenever today's homework touches a file worth keeping, close with the full sequence you learned in Lab 1:
fswd-practice\class-05\
Same discipline as Classes 3 and 4: every demo you type today lives in its own class folder inside fswd-practice\. Your poshtik-campus\ project folder from Lab 1 stays untouched until Lab 2 — these files stay on your disk, and Class 6 continues from here.
Idea one
Some data is grid-shaped. HTML has a tag family for exactly that.
Look at the Poshtik Campus counter board: dish on the left, price on the right. Your marksheet: subject, internal, external, total. A train timetable: train, platform, departure. In each one, the meaning lives in the alignment — a price belongs to its dish because they share a row. Paragraphs and lists can't say that. Tables can.
Tabular data — values whose meaning depends on both their row and their column. A menu price list. Attendance against roll numbers. Anything you'd naturally reach for a spreadsheet to hold. If the question "what column is this value in?" makes sense, it's table material.
Page layout. In the 1990s, whole websites were built as one giant invisible table — navigation in one cell, content in another. It worked, badly: unreadable code, broken phones, invisible to screen readers. CSS replaced that job completely. Part 11 shows you those old broken pages so you never repeat the mistake.
Before you type <table>, ask: "if I pasted this into a spreadsheet, would every column have a heading?" Yes? It's tabular data — table away. No? You're about to misuse a table for layout, and CSS (from Class 9 onward) is the tool you actually want.
Layout tables broke three things at once. Accessibility: a screen reader announces a table as data — "row 2, column 3" — which is gibberish when the "cell" is actually your navigation bar. Responsiveness: a fixed grid can't reflow to a phone screen; the 90s web was unreadable on early mobiles largely because of layout tables. Maintenance: changing a layout meant re-nesting tables inside tables inside tables. When CSS arrived with real layout tools, the industry spent a decade digging itself out. The tag family survived because its honest job — actual data — never went away.
Idea two
Four tags, three layers: table · row · cell.
A table is a box of rows; a row is a box of cells. That's the entire mental model. <table> opens the grid, each <tr> (table row) lays down one horizontal strip, and inside it every <td> (table data) or <th> (table heading) is one cell. Columns are never written — the browser infers them from how the cells stack up.
<th> = this cell labels other cells. Browsers render it bold and centred by default — but the real point is meaning: it tells the browser (and a screen reader) "this is a column's name, not a value".
<td> = this cell holds a value. Regular weight, left-aligned. Nearly every cell you'll ever write is a <td> — the <th>s usually live only in the first row.
Type it with me — the counter board becomes a table
- Save as
price-board.htmlinsideclass-05· title text: Poshtik Campus · Price Board <table border="1">so the grid lines are visible while you learn- Row 1:
<th>cells Dish and Price · rows 2–3:<td>cells with a dish and its ₹ price
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Poshtik Campus · Price Board</title> </head> <body> <h1>Today's Prices</h1> <table border="1"> <tr> <th>Dish</th> <th>Price</th> </tr> <tr> <td>Jonna Rotte Wrap</td> <td>₹60</td> </tr> <tr> <td>Ragi Idli Bowl</td> <td>₹50</td> </tr> </table> </body></html>| Dish | Price |
|---|---|
| Jonna Rotte Wrap | ₹60 |
| Ragi Idli Bowl | ₹50 |
C:\Users\student\Desktop\fswd-practice\class-05\price-board.htmlMillet Protein Shake at ₹45 — save, refresh. Three keystroke groups, one new row: that's the rhythm of table work.border="1".
Without it, today's table renders with no visible lines at all — modern tables get their looks from CSS, which starts in Class 9. border="1" is a legacy attribute we use for exactly one honest purpose: seeing our grid while we learn its structure. It's also the perfect bridge to the next part — because it's not the only legacy table attribute exams still ask about.
Idea three
The bgcolor era — old attributes, live exam marks.
Before CSS existed, colour was painted straight into HTML attributes: bgcolor on a table or row set its background, and text colour came from a page-level text attribute or a <font color> wrapper. The modern web deprecated all of it — we'll do this properly with CSS soon — but your exam paper still asks for the old way, so you'll learn to read and write both.
bgcolor — so you can read the old web when your exam (and real legacy code) puts it in front of you.- Save as
old-style-table.htmlinsideclass-05· title text: Old-Style Table <table border="1" bgcolor="lightyellow">- Heading row with its own
bgcolor="orange", then one data row: a dish and its ₹ price
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Old-Style Table</title> </head> <body> <table border="1" bgcolor="lightyellow"> <tr bgcolor="orange"> <th>Dish</th><th>Price</th> </tr> <tr> <td>Pesarattu with Sprouts</td><td>₹55</td> </tr> </table> </body></html>| Dish | Price |
|---|---|
| Pesarattu with Sprouts | ₹55 |
C:\Users\student\Desktop\fswd-practice\class-05\ — same folder as price-board.html; every file today lives there.old-style-table.htmlposhtik-campus\, and that folder doesn't change today.Deprecated does not mean broken. It means the standards body (the W3C/WHATWG) has marked the feature "kept for old pages, do not use in new ones" — browsers must keep rendering it because millions of 1990s pages still exist. So bgcolor will render in 2026 and beyond; it's just professionally embarrassing in new code. When a job interviewer sees it in your markup, they read "learned HTML from a very old book". When an examiner asks for it, they're testing whether you can read the old web — a genuinely useful skill, since real codebases carry old code for decades.
Q. Write HTML code to create a table with Roll No, Name and Dept columns, using bgcolor and text colour attributes. [2M]
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Roll List</title> </head> <body text="navy"> <table border="1" bgcolor="lightblue"> <tr bgcolor="yellow"> <th>Roll No</th><th>Name</th><th>Dept</th> </tr> <tr><td>1602-25-733-001</td><td>P. Ananya</td><td>CSE</td></tr> <tr><td>1602-25-733-014</td><td>B. Rohan</td><td>CSE</td></tr> <tr><td>1602-25-737-027</td><td>K. Sruthi</td><td>IT</td></tr> <tr><td>1602-25-735-032</td><td>M. Arjun</td><td>ECE</td></tr> <tr><td>1602-25-734-046</td><td>S. Fathima</td><td>EEE</td></tr> </table> </body></html>| Roll No | Name | Dept |
|---|---|---|
| 1602-25-733-001 | P. Ananya | CSE |
| 1602-25-733-014 | B. Rohan | CSE |
| 1602-25-737-027 | K. Sruthi | IT |
| 1602-25-735-032 | M. Arjun | ECE |
| 1602-25-734-046 | S. Fathima | EEE |
C:\Users\student\Desktop\fswd-practice\class-05\pyq-roll-table.html — typing the exam answer as a real file is the fastest way to own it.bgcolor on <table> or <tr> sets the background colour; the foreground (text) colour comes from the text attribute on <body> (or a <font color> wrapper). Both are deprecated in HTML5 — the modern method is CSS — but they remain valid to write and are what this question asks for.
Beyond the marks: notice the scope ladder the diagram exposes — text on the body paints the whole page, bgcolor on the table paints one grid, bgcolor on a row overrides it for that row alone. Nearest ancestor wins — the same cascade instinct CSS formalises in Class 9. Understand it here and the CSS specificity lesson becomes a re-run, not a surprise.
working table + both colour attributes named = full 2 marks ✓ — the diagram and scope note are course depth, past the marks on purpose
A table answer must look like a table: one heading row plus a handful of real data rows — five is a safe count — so the examiner sees the row pattern repeating, not a one-row skeleton. Keep every attribute the question names, keep the data plausible (real roll-number format, real departments), and close with a one-line sentence naming the attributes — when a question says "using bgcolor", make the word visibly present in both your code and one sentence, so the marks are impossible to miss.
Complete the Poshtik price table.
Below is the menu table for the Poshtik Campus counter — with four holes where structure should be. Each dashed line names what belongs there. Fill all four, then (in your sandbox) type the whole file and check it renders as a clean 2-column, 4-row grid.
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Poshtik Menu</title> </head> <body> <h1>Poshtik Campus Menu</h1>① open the table — with a visible border <tr>② two HEADING cells: Dish · Price </tr> <tr> <td>Ragi Sangati Bowl</td><td>₹55</td> </tr>③ a full data row: Gongura Sprouts Salad · ₹50 <tr> <td>Millet Protein Shake</td><td>₹45</td> </tr>④ close the table </body></html>| Dish | Price |
|---|---|
| Ragi Sangati Bowl | ₹55 |
| Gongura Sprouts Salad | ₹50 |
| Millet Protein Shake | ₹45 |
The four gaps, filled and explained.
Honesty rule from Class 3 still applies: attempt first, check second.
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Poshtik Menu</title> </head> <body> <h1>Poshtik Campus Menu</h1> <table border="1"> ← ① <tr> <th>Dish</th><th>Price</th> ← ② th, not td </tr> <tr><td>Ragi Sangati Bowl</td><td>₹55</td></tr> <tr><td>Gongura Sprouts Salad</td><td>₹50</td></tr> ← ③ <tr><td>Millet Protein Shake</td><td>₹45</td></tr> </table> ← ④ </body></html>| Dish | Price |
|---|---|
| Ragi Sangati Bowl | ₹55 |
| Gongura Sprouts Salad | ₹50 |
| Millet Protein Shake | ₹45 |
C:\Users\student\Desktop\fswd-practice\class-05\menu-table.html — same folder as every other Class 5 throwaway file.fswd-practice\ is the sandbox; it is not a git repo. Commits only happen inside poshtik-campus\.- ② as
<td>: renders almost right — just not bold. That "almost" is the point: structure said "these are values", and only default styling hid the error. A screen reader would read the table wrong. - ③ missing the
<tr>wrapper: two bare<td>s outside a row get rescued unpredictably by the browser — often gluing themselves onto the previous row, making a 4-column mess. - ④ forgotten entirely: the browser silently auto-closes at
</body>, so it looks fine — until you add a paragraph after the table and it lands inside it. Unclosed containers fail later, not where the bug is.
Idea four
Merged cells: colspan reaches right, rowspan reaches down.
Real tables aren't always perfect grids. A "MILLET DISHES" banner sits above two columns at once; a category name applies to three rows of dishes. HTML handles both with one idea: a cell can claim more than one grid slot — and every cell it swallows must then NOT be typed.
Watch the row arithmetic as it builds
<table border="1"> <tr> <th colspan="2">Millet Dishes</th> ← claims BOTH columns </tr> ← so this row types only ONE cell <tr> <td rowspan="2">Wraps</td> ← claims this row AND the next <td>Jonna Rotte Wrap · ₹60</td> </tr> <tr> <td>Sajja Roti Wrap · ₹60</td> ← NO first cell here — Wraps still owns it </tr> </table>| Millet Dishes | |
|---|---|
| Wraps | Jonna Rotte Wrap · ₹60 |
| Sajja Roti Wrap · ₹60 | |
C:\Users\student\Desktop\fswd-practice\class-05\category-menu.html — the panel shows the body only; wrap it in the full skeleton before saving.fswd-practice\ is the sandbox; it is not a git repo.If you give row 3 its own first <td> while rowspan="2" is still claiming that slot, the browser shoves the extra cell rightward, growing a phantom third column. If a merged table ever renders with cells jutting out the side, count your spans first — someone typed a cell a span already owned.
Draw this table before the browser does.
Read the code. On paper, sketch the exact grid it renders: how many columns, how many rows, and which cells are merged. Only then check against the solution. This is the skill exams test with span questions — running the browser in your head.
<table border="1"> <tr> <th>Dish</th><th>Small</th><th>Large</th> </tr> <tr> <td>Ulava Charu Bowl</td><td>₹70</td><td>₹95</td> </tr> <tr> <td>Paneer Protein Bowl</td><td colspan="2">₹80 · one size only</td> </tr> </table>- How many columns does the grid have — and which line proves it?
- Row 3 types only two cells. Why doesn't it render narrower than the rows above it?
- Sketch the final grid, drawing the merged cell as one wide box. Where exactly does the merge sit?
The grid, revealed.
A prediction you can't get wrong teaches nothing — commit to the sketch first.
| Dish | Small | Large |
|---|---|---|
| Ulava Charu Bowl | ₹70 | ₹95 |
| Paneer Protein Bowl | ₹80 · one size only | |
- Three columns. Line 3 proves it — the heading row types three
<th>cells with no spans, and the widest row defines the grid. - Because of the arithmetic: row 3 types 2 cells, but one carries
colspan="2". Typed cells (2) + extra claimed slots (1) = 3 slots — exactly the grid width. The row is full; nothing is narrow or missing. - The merge sits under Small + Large, second and third columns of the last row, holding "₹80 · one size only" as one centred-content box. If your sketch put the wide cell under "Dish", re-check: the span starts where the cell is typed — after the Paneer cell, so slot 2 onward.
C:\Users\student\Desktop\fswd-practice\class-05\mystery-table.html — body only in the activity's panel; wrap it in the full skeleton, bug-free and exact."Predict the render" span questions test three layers at once with five lines of code: do you know the tags, do you know the span attributes, and can you simulate the browser's cell-placement algorithm mentally? When you meet one in an exam, always write the column count first (from the widest un-spanned row), then place each row's cells left to right, skipping slots that a rowspan from above still owns. Method marks live in that visible working.
Two small additions that make tables readable to everyone.
Neither of these changes how a table looks — they change what it means to software that reads pages aloud. Ten minutes of self-study; both will quietly reappear when Class 8 makes semantics the whole lesson.
<table border="1"> <caption>Poshtik Campus — today's prices</caption> <tr> <th scope="col">Dish</th> <th scope="col">Price</th> </tr> <tr> <th scope="row">Sprouts Moong Chilla</th> <td>₹50</td> </tr> </table>| Dish | Price |
|---|---|
| Sprouts Moong Chilla | ₹50 |
C:\Users\student\Desktop\fswd-practice\class-05\accessible-table.html — the self-study file; body only above, so wrap it in the full skeleton.scope renders as nothing, and that's correct.| ADDITION | WHAT IT DOES | WHO IT'S FOR |
|---|---|---|
<caption> | Names the whole table, as its first child. Unlike a heading typed above the table, the caption is programmatically attached — software knows this title belongs to this grid. | Screen-reader users hear it announced on entering the table; search engines index the table's purpose. |
scope="col" | Declares a <th> as the label for its column. | Lets a screen reader announce "Price: ₹50" instead of just "₹50" when a user navigates into a data cell. |
scope="row" | Declares a <th> as the label for its row — used when the first cell of each row names the row, as dish names do here. | Same announcement benefit, horizontal direction: "Sprouts Moong Chilla — Price: ₹50". |
Because "works for me" isn't "works". A table without scope is a maze read cell by cell to a blind user; with two attributes it becomes navigable data. It costs you seconds, it's what separates professional markup from homework markup — and Class 8's accessibility audit will expect you to already have the habit.
Idea five · the promised warning, kept
The mistake gallery — tables doing jobs they were never meant for.
Every misuse below is real — pulled from the kinds of pages you can still find with view-source today. For each: what someone built, why it feels reasonable, and what the correct tool actually is. Apply the one-sentence test from Part 2 to each and it flags every fake.
One giant borderless table: nav bar in the top cell, sidebar left, content right, footer bottom. Feels reasonable because: it aligns! Why it's wrong: none of it is data — no column has a heading. A screen reader announces your homepage as a spreadsheet. Right tool: CSS layout (Classes 10–12).
A designer's banner cut into six image tiles, reassembled in a 2×3 table so the slices butt together. Feels reasonable because: it pixel-aligns perfectly — in one browser, at one zoom. Why it's wrong: zoom in and the seams split apart. Right tool: one whole image with proper alt text (Class 3 taught you this).
Labels in the left column, input boxes in the right, so the form looks tidy. Feels reasonable because: forms genuinely want that alignment. Why it's wrong: a label and its input are a relationship, not a data row — and Classes 6–7 will give you <label for>, the tag built for exactly that relationship. Alignment comes from CSS.
Date column, subject column, session column. Every column has a heading; every value's meaning depends on its row and column. Paste-into-a-spreadsheet test: passes instantly. Table, with a clear conscience — and with scope="col" if you did the self-study.
Tables describe data, CSS describes appearance. Every misuse above is someone using structure to fake appearance — and every one of them stops being tempting the moment CSS enters your toolkit, four classes from now.
Closing
You can now hold a grid in your head — and in your markup.
Your folders after today — the cumulative map
During class: never. All seven files above live in the sandbox — scratch paper, no repo, no commits. At home: once, and only if you copy your timetable into poshtik-campus\ (the homework's third card) — a real-project change always ends with the Lab-1 ritual:
Before Class 6
Your real class timetable as an HTML table:
- Days as rows, periods as columns.
- At least one lecture block spans two periods — that's a
colspanearning its keep. - Save as
class-05\timetable.html.
Find one real table on any site after class — cricket scorecard, train timetable, marks portal. Ctrl+U and check: did they use <th>? A <caption>? scope? Grade them against today's class.
If your homework timetable file is worth keeping (it is), put a copy in your repo folder and run the ritual: git add ., then git commit -m "docs: class 5 timetable practice", then git push.
A friend shows you a page where the navigation menu is built as a one-row table, "because the links line up perfectly". In two sentences: what test proves this is table misuse, and what will replace it once you both reach Class 9?