Web tasks list required features, and you earn marks by proving each one is present. This skill combines two habits: using tables only for data, and moving appearance out of old presentation tags into CSS. It closes the website authoring module because it is mostly about checking.
How do you build a table?
A table is made of rows (tr), header cells (th) and data cells (td).
<table>
<caption>Club timetable</caption>
<tr>
<th>Day</th>
<th>Activity</th>
</tr>
<tr>
<td>Monday</td>
<td>Portraits</td>
</tr>
<tr>
<td>Thursday</td>
<td>Editing</td>
</tr>
</table>The caption names the table. Borders, padding and colour are added with CSS, as in the stylesheet lesson.
How do you check a brief step by step?
- List every requirement from the brief as a separate line.
- Find the line of code in your file that satisfies each one.
- Decide whether the content is data in rows and columns; if so use a table, if not use other elements.
- Move any appearance out of the tags: colour, alignment and fonts go in the stylesheet.
- Open the page and look at the result, not only the code.
- Tick each line only when you can point to its evidence.
Worked example
An invented brief says: show the timetable as a table with a header row, give header cells a light grey background, and centre the page title.
Step 1: the timetable has rows and columns of data, so use table, with th cells in the first row.
Step 2: in the stylesheet, add:
th {
background-color: lightgrey;
}
h1 {
text-align: center;
}Step 3: check against the list: header row present, header background set, title centred. Each has a line of evidence, so each can be ticked.
The mistake to watch for
A common slip is relying on an old habit from an out-of-date guide.
<center><font color="red">Sale</font></center>The center and font tags are obsolete, and they mix appearance into the content. A second version is using an invisible table to place a menu on the left of the page, which misuses the table. The correction is a plain paragraph with a class, and the look in the stylesheet:
<p class="sale">Sale</p>.sale {
text-align: center;
color: red;
}Check yourself
1. Which content should go in a table: a price list of four items with prices, or a paragraph describing the club?
Show answer
The price list. It has rows and columns of related data. The paragraph is ordinary text, so it stays in p.
2. In the table above, which cells are th?
Show answer
Day and Activity, the labels in the first row. The other cells are data cells, td.
3. A student wants a blue heading and writes <h2><font color="blue">Events</font></h2>. Give the better version.
Show answer
Use <h2>Events</h2> with a stylesheet rule h2 { color: blue; }.
Where this leads next
Finish the module with the website authoring practice set, which mixes all five skills. Return to the module guide if a skill feels weak, and use the practical task and evidence checker for your own briefs.
Students can build the table correctly and still miss one line of the brief. Our teachers help you check each line in online one-to-one ICT tuition.