Lists and Tables
Organise information with ordered lists, unordered lists, nested items, and data tables.
What You'll Learn
- Unordered lists with -, *, and +
- Ordered lists and auto-numbering
- Nested and mixed list structures
- Tables with column alignment
Unordered Lists
Create bullet lists using -, *, or + followed by a space. All three produce the same result:
- Apples - Bananas - Cherries * Also works * With asterisks + And plus signs + Work too
📝 Real-World Analogy: Think of - as drawing a small bullet point by hand. Each dash is a bullet, and indentation creates sub-bullets — just like a handwritten outline.
💡 Pro Tip
Pick one symbol and stick with it throughout your document. Most style guides recommend - (dashes) for consistency.
Ordered Lists
Use numbers followed by a period. Here's the trick: the actual numbers don't matter — Markdown auto-numbers them!
1. First step 2. Second step 3. Third step This also works (all 1s): 1. First step 1. Second step 1. Third step
⚠️ Common Mistake
Using 1) instead of 1. — most Markdown parsers only recognise the period format. Also, make sure there's a space after the period.
Nested & Mixed Lists
1. Setup your project - Install Node.js - Install VS Code 2. Write your code 1. Create index.html 2. Add styles.css 3. Write app.js 3. Deploy - Push to GitHub - Enable GitHub Pages
Lists
Practice unordered, ordered, and nested lists.
// Markdown Lists — rendered as text
console.log("=== Unordered Lists ===");
console.log("Use -, *, or + followed by a space:");
console.log();
console.log("- Item one");
console.log("- Item two");
console.log("- Item three");
console.log();
console.log("* Also works with asterisks");
console.log("+ And plus signs");
console.log();
console.log("=== Ordered Lists ===");
console.log("Use numbers followed by a period:");
console.log();
console.log("1. First step");
console.log("2. Second step");
c
...Tables
Tables use pipes (|) and hyphens (-) to create rows and columns. The second row (separator) is required:
| Feature | Free Plan | Pro Plan | |------------|-----------|-----------| | Storage | 5 GB | 100 GB | | Users | 1 | Unlimited | | Support | Email | 24/7 Chat |
Column Alignment
Add colons to the separator row to control alignment:
| Left | Center | Right | |:-----------|:---------:|----------:| | left-align | centered | right-align|
Alignment Rules
:---— Left aligned (default):---:— Center aligned---:— Right aligned
⚠️ Common Mistake
Tables in standard Markdown cannot have merged cells or complex layouts. If you need complex tables, consider using HTML within your Markdown file.
Tables
Create tables with alignment and formatting.
// Markdown Tables
console.log("=== Basic Table ===");
console.log();
console.log("| Name | Language | Stars |");
console.log("|---------|------------|-------|");
console.log("| React | JavaScript | 220k |");
console.log("| Vue | JavaScript | 207k |");
console.log("| Svelte | JavaScript | 78k |");
console.log("| Angular | TypeScript | 95k |");
console.log();
console.log("=== Column Alignment ===");
console.log("Use colons in the separator row:");
console.log();
console.log("|
...📋 Quick Reference
| Element | Syntax |
|---|---|
| Unordered list | - item |
| Ordered list | 1. item |
| Nested list | - sub-item (2 spaces) |
| Table row | | col1 | col2 | |
| Table separator | |------|------| |
| Right-align col | | ---: | |
🎉 Lesson Complete!
You can now create well-organised lists and clean data tables! Next up: links and images — the building blocks of any web-ready document.
Sign up for free to track which lessons you've completed and get learning reminders.