Lists and Tables

Reviewed & published by Brayan K

By the end of this lesson you'll turn loose notes into tidy bullet lists, numbered steps, nested outlines, tick-box checklists, and clean aligned data tables — using nothing but a few keyboard characters.

Part of the free Markdown course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

What You'll Learn

• Write unordered (bullet) lists with -, *, or +
• Write ordered (numbered) lists with 1. and let Markdown auto-number them
• Nest lists by indenting children two spaces
• Build task / checklist lists with - [ ] and - [x]
• Build tables with pipes | and the required --- separator row
• Align table columns left, centre, or right with colons (:)

💡 Real-World Analogy

Think of Markdown lists and tables like a handwritten outline on paper. A dash is you drawing a bullet point. Indenting a line is you sliding your pen to the right to show "this belongs under that". A checklist is a to-do note with little boxes you tick off. And a table is you drawing vertical lines (the pipes |) to make columns, with one ruled line under the headers to separate them. Markdown just turns those everyday paper habits into characters you type — and the viewer redraws them neatly for you.

1. Unordered (Bullet) Lists

An unordered list is a set of bullet points where order doesn't matter. Start each line with a -, *, or + followed by one space. All three characters produce identical bullets, so the choice is purely cosmetic — just pick one and stay consistent.

Markdown source

- Apples
- Bananas
- Cherries

Rendered result

Pro Tip

Most style guides recommend the dash - because it's easy to type and reads cleanly in raw text. The one rule you cannot skip: there must be a space after the bullet character. -Apples (no space) renders as literal text, not a bullet.

2. Ordered (Numbered) Lists

When order does matter — steps in a recipe, a ranking — use a number, a period, and a space: 1. . Here's the surprise that trips everyone up: Markdown ignores the digits you type and numbers the list itself, in order. So you can write all 1. and still get 1, 2, 3. That's a feature — you can reorder steps without renumbering by hand.

1. Wake up
1. Drink coffee
1. Write code

Every line is 1. on purpose.

• Drink coffee

Auto-numbered 1, 2, 3.

Common Mistake

Use a period after the number (1.), not a parenthesis (1)). Many parsers only recognise the period form. And keep the space: 1.Wake up won't become a list.

3. Nested Lists (Indentation)

To put a list inside a list item, indent the child line. The reliable rule: indent each level by two spaces (some tools accept four). The indentation is what creates the hierarchy — get it wrong and the child either jumps to the top level or breaks the list entirely. You can mix types freely: bullets under a numbered step, numbers under a bullet, etc.

- Fruit
  - Apples
    - Granny Smith
  - Bananas
- Vegetables
  - Carrots

2 spaces = one level deeper.

• Fruit Apples Granny Smith
• Vegetables Carrots

🎯 Your Turn #1: Build a Nested List

Replace each ___ with two spaces to indent the children correctly. Run it, then picture the bullets nesting under their parents.

// 🎯 YOUR TURN #1 — build a nested shopping list.
// Replace every ___ then press "Run". This prints Markdown SOURCE;
// the comment shows how it RENDERS in a real Markdown viewer.

console.log("- Drinks");                 // top-level item (no indent)

// 1) Add a child of "Drinks". Children are indented 2 spaces.
console.log("___- Coffee");              // 👉 put TWO spaces where ___ is

// 2) Add a second child "Tea", also 2 spaces in.
console.log("___- Tea");                 // 👉 two spaces again

console.log("- Snacks");                 // another top-level item

// 3) Add a child of "Snacks" called "Crisps" (2 spaces).
console.log("___- Crisps");              // 👉 two spaces

// ✅ Renders as:
//   • Drinks
//       ◦ Coffee
//       ◦ Tea
//   • Snacks
//       ◦ Crisps

4. Task / Checklist Lists

Task lists are bullet items with a clickable checkbox. Write a bullet, then [ ] for an empty box or [x] for a ticked one (a space inside the brackets means unchecked). They're hugely popular for to-do lists, pull-request checklists, and READMEs on GitHub, GitLab, and most modern viewers.

- [x] Buy ingredients
- [ ] Cook dinner
- [ ] Wash up

[x] = done, [ ] = to do.

• Buy ingredients

5. Tables

A table is three ingredients stacked as lines: a header row, a separator row of dashes, then one or more data rows. Columns are divided by the pipe character |. The separator row — at least three dashes --- per column — is what tells Markdown "this is a table". Leave it out and you just get a row of text with pipes in it.

| Name   | Language   | Stars |
|--------|------------|-------|
| React  | JavaScript | 220k  |
| Vue    | JavaScript | 207k  |

Row 2 (the dashes) is required.

Good news: the cells don't need to line up in your raw text. The viewer ignores extra spaces, so | React | JavaScript | and a perfectly-padded version render identically. Aligning them by hand just makes the source nicer to read.

6. Column Alignment

Add a colon : to the dashes in the separator row to control how each column lines up. The colon shows which side the text "sticks" to: left colon = left, both = centre, right colon = right. Numbers usually look best right-aligned.

| Left  | Center | Right |
|:------|:------:|------:|
| a     |   b    |     c |
| dog   |  cat   |  mouse|

Alignment cheat sheet

• :--- — Left aligned (the default)
• :---: — Center aligned
• ---: — Right aligned

You can also use inline formatting inside cells: | **bold** | *italic* | | all work.

🎯 Your Turn #2: Build a Table

Fill in the ___ cells. Keep the same number of pipes on every line, and don't delete the separator row — it's what makes it a table.

// 🎯 YOUR TURN #2 — build a 2-column table.
// A table is: header row, then a SEPARATOR row of dashes, then data.
// Replace every ___ then press "Run".

// 1) The header row. Wrap each title in pipes.
console.log("| Language | Year |");

// 2) The separator row makes it a table. It MUST be there,
//    and it needs one dashes-cell PER column.
console.log("|----------|------|");        // 👉 this line is required

// 3) Fill the data cells. Keep the SAME number of pipes (3 here).
console.log("| Python   | ___ |");          // 👉 a year, e.g. 1991
console.log("| ___      | 1995 |");         // 👉 a language name

// ✅ Renders as a real 2-column table:
//   Language | Year
//   -------- | ----
//   Python   | 1991
//   Java     | 1995

Run-it-yourself: every syntax in one place

This prints the raw Markdown for bullets, numbers, nesting, and checkboxes. Read each line, then paste a block into a Markdown viewer to watch it render.

## Unordered list (- / * / + all work)
- Apples
- Bananas
- Cherries

## Ordered list (number + a period)
1. Wake up
2. Drink coffee
3. Write code

## Auto-numbering: the DIGITS are ignored
1. First   -> renders as 1.
1. Second  -> renders as 2.
1. Third   -> renders as 3.

## Nested list (indent the child 2 spaces)
- Fruit
  - Apples
    - Granny Smith
  - Bananas
- Vegetables

## Task list (checkbox: [ ] empty, [x] done)
- [x] Learn lists
- [ ] Learn tables

<!-- ✅ Expected result, rendered:
     h2                     -> text: Unordered list (- / * / + all work)
     h2                     -> count: 5
     ul                     -> count: 5
     ol                     -> count: 2
     li                     -> count: 16
     input[type="checkbox"] -> count: 2
-->

Common Errors (and the fix)

• Inconsistent nesting indentation: indenting one child 2 spaces and the next 3 confuses the parser — the list breaks or items jump to the wrong level. Pick 2 spaces per level and use it everywhere.
• Missing the separator row in a table: without the |---|---| dashes row directly under the header, the whole thing renders as plain text with visible pipes. The separator is mandatory.
• Mismatched pipe counts: if your header has 3 columns but a data row has only 2 sets of cells, the row misaligns or columns vanish. Every row must have the same number of | dividers.
• Expecting your typed numbers to show: writing 1., 5., 9. still renders as 1, 2, 3 — ordered lists always renumber sequentially regardless of the digits you type. To control display you'd need a different format, not raw Markdown.
• No space after the marker: -Item or 1.Item renders as literal text. Always put one space: - Item, 1. Item.

📋 Quick Reference

Frequently Asked Questions

Q: Do I have to make the table cells line up in my source?

No. The viewer ignores extra spaces, so a ragged table renders the same as a perfectly-padded one. Aligning by hand only makes the raw text easier for you to read.

Q: I typed 1, 2, 5, 9 for my list but it shows 1, 2, 3, 4. Why?

Ordered lists always renumber from the first value, sequentially. Markdown only reads the first number to know where to start; the rest of the digits are ignored. This lets you reorder steps without renumbering.

Q: My checkboxes show as [ ] text instead of boxes — what's wrong?

Task lists are a GitHub-flavoured extension, not core Markdown. They work on GitHub, GitLab, Obsidian, VS Code and most modern viewers, but a few plain parsers don't support them. Try it on GitHub or Dillinger to confirm.

Q: Can a table cell hold a bullet list or multiple lines?

Not in standard Markdown — cells are single-line and can only hold inline formatting like **bold** or . For multi-line or merged cells, drop down to raw HTML <table> inside your Markdown.

Mini-Challenge: A README Snippet

No blanks now — just a brief and an outline. Write the console.log lines yourself to print a task list and a right-aligned table, then paste the output into a Markdown viewer to check it renders correctly.

// 🎯 MINI-CHALLENGE: a "Project README" snippet.
// No blanks this time — write the console.log lines yourself.
//
// 1. A task list (checkboxes) with 3 items, one ticked:
//      - [x] Set up repo
//      - [ ] Write tests
//      - [ ] Deploy
// 2. A right-aligned table of 2 files and their line counts:
//      header row: | File | Lines |
//      separator:  |:-----|------:|   (note the colon = alignment)
//      two data rows of your choice
//
// ✅ When pasted into a Markdown viewer you should see ticked/unticked
//    boxes and a table whose "Lines" column is right-aligned.

// your console.log lines here

🎉 Lesson Complete!

• ✅ Bullet lists start each line with -, *, or + and a space
• ✅ Numbered lists use 1. and auto-number regardless of the digits you type
• ✅ Nest a list by indenting children two spaces per level
• ✅ Checklists use - [ ] (empty) and - [x] (ticked)
• ✅ Tables need a header row, a required --- separator row, and matching pipe counts
• ✅ Colons in the separator (:---, :--:, ---:) set left / centre / right alignment

Practice quiz

Continue this course

• Previous: Basic Formatting
• Next: Links and Images — Insert hyperlinks, embed images, and link to page sections
• Quick reference: Markdown cheat sheet › Lists & Links