Visualisation component: tables

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

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

A Max temp (°C)

B Col 2

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

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

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1<table>		AThe table has too many rows, so the important values are buried. Limit the rows to those that matter, such as the 5 lowest scores.
2<th>Month</th>		BA clear header cell that labels the column so the audience knows what the values below it mean
3Use a table instead of a chart when the audience needs the precise numbers, such as exact sales figures		CThe HTML tag that creates a table so exact values can be shown in rows and columns
4Limit the table to the rows that matter by showing only the top 5 results		D<table><tr><td>Sales</td><td>$4,215</td></tr></table>
5<tr><td>Name</td><td>Score</td></tr> with no clear header row, only values below		ESELECT * FROM Sales ORDER BY Total DESC LIMIT 5;
6A table listing all 500 students, when the audience only needs the 5 lowest scores		FThe columns are not labelled with clear headers, so the audience cannot tell what the values mean. Use header cells (th) for the column labels.

Definitions

table

Fill in the Blanks

Complete each line of code by filling in the missing parts.

<_____> <tr><th>Month</th><th>Sales</th></tr> </table>

<table> <tr><__>Month</th><th>Sales</th></tr> </table>

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A <tabel>

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

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

D </table>

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>

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>

Question 4

A <table>

B <caption>Top 5 Wins</caption>

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

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

E </table>

Question 5

A SELECT name, score

B FROM Results

C ORDER BY score DESC

D -- table shows top 5 only

Answer Key

Visualisation component: tables

Section A: Quick Questions

B — A table, because it shows exact values

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

A — Max temp (°C)

A — False: include only the rows that matter

A — A column chart, because patterns are easier to see

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

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

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

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

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

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

Section E: Spot the Error

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

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>.

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

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

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.