← VCE Spreadsheets, SQL & Visualisation

Visualisation component: tables

A visualisation component that shows exact values in rows and columns, used when the audience needs the precise numbers. Clear headers and only the rows that matter keep it readable.

Part of: VCE Applied Computing - U1O1 - Data analysis — Module 80, VCE Data Analytics - U3O1 - Data Analytics — Module 118, VCE Data Analytics - U3O2 - Analysis and Design — Module 133, VCE Data Analytics - U4O1 - Development and Evaluation — Module 66

Understanding Visualisation component: tables in VCE Spreadsheets, SQL & Visualisation

What it does: A table shows the exact value ($4,215), whereas a chart would only let the audience estimate it. Ordering the data and limiting it to 5 rows keeps the table short, so only the rows that matter are shown. When the goal is quick comparison, a chart is usually better. Tables are for when exact values matter. Each column header says what the values mean and gives units where needed, so the audience can read the table without guessing. The table tag is the container for a table component, which displays precise values in a grid.

Common mistakes: The tag is misspelled. A table starts with <table> so the browser knows to show exact values in rows and columns. Header cells need <th>, not <td>. Using <th> marks the clear column headers that make a table readable. It should be <tr><th>Day</th>.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Visualisation component: tables to a class →

This module's key terms are also in a printable crossword (Modules 71–86) and word search (Modules 55–86).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

A school canteen manager needs to show the exact price of each lunch item. Which component suits this best?

A pie chart, because it shows exact pricesA table, because it shows exact values

Matches

<tr><td>Name</td><td>Score</td></tr> with no clear header row, only values below

↓

The columns are not labelled with clear headers, so the audience cannot tell what the values mean. Use header cells (th) for the column labels.

Applying

Meanings

Term

table

Meaning

A visualisation component that shows exact values in rows and columns, used when the audience needs the precise numbers. Clear headers and only the rows that matter keep it readable.

Practice

<table>

Testing

Gaps

Check Answer

Spots

1<tabel>

2<tr><th>Team</th>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. A school canteen manager needs to show the exact price of each lunch item. Which component suits this best?

A. A pie chart, because it shows exact prices

B. A table, because it shows exact values ✓

A table lists precise numbers in rows and columns. A pie chart shows proportions, not exact prices.

2. Which situation is the better use of a table in a visualisation?

A. Showing how a score rose and fell over twelve months at a glance

B. Showing each student's exact test score so teachers can look them up ✓

Use a table when the audience needs precise numbers. A line chart is better for showing a trend over time.

3. Which table header is clearer for a column of temperatures?

A. Max temp (°C) ✓

B. Col 2

Clear headers tell the audience what each column shows, including the units. Vague labels like 'Col 2' make the table hard to read.

4. True or false: A table should always include every row from the full data set.

A. False: include only the rows that matter ✓

B. True: always include every row so nothing is missing

Limiting rows to what matters keeps the table readable. Long tables bury the key information.

5. Your audience wants to compare how five sports teams scored overall and spot the highest quickly. What is the best choice?

A. A column chart, because patterns are easier to see ✓

B. A table, because patterns are easier to see in a grid of numbers

When the goal is quick comparison, a chart is usually better. Tables are for when exact values matter.

Match the Pairs

<table> → The HTML tag that creates a table so exact values can be shown in rows and columns

<th>Month</th> → A clear header cell that labels the column so the audience knows what the values below it mean

Use a table instead of a chart when the audience needs the precise numbers, such as exact sales figures → <table><tr><td>Sales</td><td>$4,215</td></tr></table>

Limit the table to the rows that matter by showing only the top 5 results → SELECT * FROM Sales ORDER BY Total DESC LIMIT 5;

<tr><td>Name</td><td>Score</td></tr> with no clear header row, only values below → The columns are not labelled with clear headers, so the audience cannot tell what the values mean. Use header cells (th) for the column labels.

A table listing all 500 students, when the audience only needs the 5 lowest scores → The table has too many rows, so the important values are buried. Limit the rows to those that matter, such as the 5 lowest scores.

Key Term

table

A visualisation component that shows exact values in rows and columns, used when the audience needs the precise numbers. Clear headers and only the rows that matter keep it readable.

Fill in the Blanks

1. <table> <tr><th>Month</th><th>Sales</th></tr> </table>

Hint: Type the tag name that starts a table showing exact values in rows and columns.

2. <table> <tr><th>Month</th><th>Sales</th></tr> </table>

Hint: Type the tag name for a header cell, so the audience can read what each column means.

3. <table> <tr><td>Jan</td><td>120</td></tr> </table>

Hint: Type the tag name that starts one row of the table.

4. <table> <tr><td>Jan</td><td>120</td></tr> </table>

Hint: Type the tag name for a normal data cell holding an exact value.

5. <table> <tr><td>Jan</td><td>120</td></tr> </table>

Hint: Type the tag name that closes a row, so only the rows that matter are neatly kept.

Spot the Error

Question 1

A <tabel>

B <tr><th>Team</th>

C <th>Wins</th></tr>

D </table>

Line A — The tag is misspelled. A table starts with <table> so the browser knows to show exact values in rows and columns.

Question 2

A <table>

B <tr><td>Day</td>

C <th>Sales</th></tr>

D <tr><td>Mon</td>

E <td>40</td></tr>

F </table>

Line B — Header cells need <th>, not <td>. Using <th> marks the clear column headers that make a table readable. It should be <tr><th>Day</th>.

Question 3

A <table>

B <tr><th>Item</th>

C <th>Price</tr>

D <tr><td>Pen</td>

E <td>$2</td></tr>

F </table>

Line C — The header cell is closed with the wrong tag. It should be <th>Price</th></tr> so the header is properly closed.

Question 4

A <table>

B <caption>Top 5 Wins</caption>

C <tr><th>Team</td>

D <th>Wins</th></tr>

E </table>

Line C — The opening <th> must be closed with </th>, not </td>. It should be <tr><th>Team</th>.

Question 5

A SELECT name, score

B FROM Results

C ORDER BY score DESC

D -- table shows top 5 only

Line C — Without LIMIT 5 the table would list every row. A good table limits rows to the ones that matter. It should be ORDER BY score DESC LIMIT 5.

Student with a class code? Join your class →