Chapter 10: Lists & Tables
Lists & Tables in HTML — two of the most frequently used ways to organize and present text content on the web.
These are not just “decorations” — they are semantic structures that tell browsers, search engines, and screen readers: “This is a group of related items” or “This is tabular data with rows and columns.”
If you use them correctly:
- Your page becomes more accessible
- Easier to style with CSS
- Better for SEO
- Looks professional even without much CSS
1. Lists in HTML – Three Main Types
HTML gives us three semantic list types. Use the right one for the job.
A. Unordered Lists <ul> + <li>
→ Bulleted lists (no specific order/sequence)
Best for:
- Features
- Ingredients
- Benefits
- Menu items
- Things where order doesn’t matter
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<ul> <li>HTML Semantics</li> <li>CSS Box Model</li> <li>Flexbox Layout</li> <li>Responsive Design (coming soon!)</li> </ul> |
Default look: bullets (•) You can change style later with CSS (list-style-type: square;, disc, circle, none, etc.)
B. Ordered Lists <ol> + <li>
→ Numbered lists (order/sequence matters)
Best for:
- Steps in a recipe/tutorial
- Ranking
- Instructions
- Top 10 lists
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ol> <li>Create project folder</li> <li>Open in VS Code</li> <li>Create index.html</li> <li>Write ! + Tab for boilerplate</li> <li>Open with Live Server</li> <li>Smile when it works 😄</li> </ol> |
Default: 1. 2. 3. … You can start from different number: <ol start=”5″> or use letters: <ol type=”A”>
C. Description / Definition Lists <dl> + <dt> + <dd>
→ Term + Description pairs (like a dictionary or FAQ)
Best for:
- Glossary
- FAQ (question → answer)
- Product features (name → explanation)
- Metadata (key → value)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<dl> <dt>HTML</dt> <dd>HyperText Markup Language – structure of web pages</dd> <dt>CSS</dt> <dd>Cascading Style Sheets – makes pages beautiful</dd> <dt>VS Code</dt> <dd>Best free editor for beginners in 2026</dd> <dt>Chai</dt> <dd>The real reason we can code so long ☕</dd> </dl> |
No bullets/numbers — just term (bold-ish by default) + indented description.
2. Nesting Lists (Very Common & Powerful)
You can put lists inside lists — great for sub-items.
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<ul> <li>Frontend Basics <ul> <li>HTML</li> <li>CSS</li> <li>Flexbox</li> </ul> </li> <li>Tools I Use <ol> <li>VS Code</li> <li>Live Server extension</li> <li>Chrome DevTools</li> </ol> </li> </ul> |
3. Tables in HTML – For Tabular Data Only!
Tables are not for page layout anymore (that was 2000s mistake — now we use Flexbox/Grid). Use tables only when you have real rows + columns of data.
Core structure (semantic & modern):
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<table> <thead> <!-- Header row(s) --> <tr> <th>Skill</th> <!-- Table Header – bold & centered by default --> <th>Level (2026)</th> <th>Next Goal</th> </tr> </thead> <tbody> <!-- Main data rows --> <tr> <td>HTML</td> <td>Intermediate</td> <td>Semantic mastery</td> </tr> <tr> <td>CSS</td> <td>Beginner-Intermediate</td> <td>Learn Grid & Animations</td> </tr> <tr> <td>JavaScript</td> <td>Planning stage</td> <td>Start next month!</td> </tr> </tbody> <tfoot> <!-- Footer row(s) – optional --> <tr> <td colspan="3">Total skills being learned: 3</td> </tr> </tfoot> </table> |
Key tags explained:
| Tag | Meaning | Required? | Notes |
|---|---|---|---|
| <table> | The whole table | Yes | Container |
| <thead> | Header section (usually one row) | Recommended | Stays visible when scrolling long tables |
| <tbody> | Main data body | Recommended | Can have multiple |
| <tfoot> | Footer (summary, totals) | Optional | Often at bottom even if written at top |
| <tr> | Table Row | Yes | One per row |
| <th> | Table Header cell | For headers | Bold + centered by default |
| <td> | Table Data cell | For content | Normal cells |
Useful attributes (add to <td> or <th>):
- colspan=”2″ → cell spans 2 columns
- rowspan=”3″ → cell spans 3 rows
- scope=”col” or scope=”row” (on <th>) → improves accessibility
4. Complete Example – Lists + Table Together
index.html
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lists & Tables – Webliance Learning</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>My Learning Progress – Feb 2026</h1> </header> <main class="container"> <section> <h2>Why I Love Learning Web Dev</h2> <ul> <li>See results instantly</li> <li>Creative + logical at same time</li> <li>Can build real things from laptop</li> <li>Future job opportunities 🔥</li> </ul> </section> <section> <h2>Steps to Create This Page</h2> <ol> <li>Open VS Code</li> <li>Create new folder</li> <li>Make index.html & style.css</li> <li>Write lists and table</li> <li>Open with Live Server</li> <li>Feel happy 😄</li> </ol> </section> <section> <h2>Current Skills Overview</h2> <table> <thead> <tr> <th>Topic</th> <th>Status</th> <th>Confidence (1–10)</th> <th>Next Focus</th> </tr> </thead> <tbody> <tr> <td>HTML Semantics</td> <td>Good</td> <td>8</td> <td>ARIA roles</td> </tr> <tr> <td>CSS Box Model</td> <td>Very good</td> <td>9</td> <td>Advanced positioning</td> </tr> <tr> <td>Lists & Tables</td> <td>Learning now</td> <td>6</td> <td>Styling tables nicely</td> </tr> <tr> <td>Flexbox</td> <td>Not started</td> <td>2</td> <td>Start next week</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">Average confidence: 6.25 → Getting better every day!</td> </tr> </tfoot> </table> </section> </main> <footer> <p>Hyderabad • Chai-powered coding • 2026</p> </footer> </body> </html> |
style.css (basic modern look – copy-paste)
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
* { margin:0; padding:0; box-sizing:border-box; } body { font-family: system-ui, sans-serif; line-height: 1.6; background: #f8fafc; color: #1e293b; } .container { max-width: 900px; margin: 0 auto; padding: 0 20px; } header { text-align: center; padding: 3rem 0; background: #1e40af; color: white; } h1 { font-size: 2.8rem; } h2 { color: #1d4ed8; margin: 2.5rem 0 1rem; font-size: 2rem; } ul, ol { margin: 1.2rem 0 1.2rem 2rem; } li { margin-bottom: 0.6rem; } table { width: 100%; border-collapse: collapse; margin: 2rem 0; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-radius: 8px; overflow: hidden; } th, td { padding: 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; } th { background: #3b82f6; color: white; } tr:nth-child(even) { background: #f8fafc; } tfoot td { background: #e0f2fe; font-weight: bold; text-align: center; } footer { text-align: center; padding: 2rem; color: #64748b; } |
Save both files → right-click index.html → Open with Live Server.
You now have a clean page using lists for features/steps and a table for structured data.
Quick Mastery Checklist
- Use <ul> when order doesn’t matter
- Use <ol> when sequence/step-by-step matters
- Use <dl> for key-value / term-description pairs
- Never use tables for layout (only real data)
- Always use <thead>, <tbody>, <th> for accessibility
- Nest lists when needed (very common)
How does the page look on your screen? Feel the difference between plain paragraphs vs properly structured lists & table?
Next possible steps — tell me:
- “now teach me how to style lists & tables beautifully”
- “responsive tables for mobile”
- “flexbox instead of tables for some cases”
- “add a pricing table example”
You’re building strong foundations — keep going champ! 🚀 Chai break ho gaya? 😄
