Be able to use appropriate table attributes to meet the needs of the audience including to adjust cells to span more than one row or column, to set table and cell sizes in terms of pixels or % values, to apply styles to tables

21. Website Authoring – Using Table Attributes (Syllabus 21.2)

Learning outcomes (Cambridge IGCSE 0417 / A‑Level)

  • Identify the core HTML table elements: <table>, <tr>, <th>, <td>.

  • Select appropriate table attributes to suit a specific audience (e.g. mobile learners, younger pupils).

  • Make cells span multiple rows or columns using rowspan and colspan.

  • Set table and cell dimensions with width and height (pixels or percentages).

  • Apply presentational attributes (border, bgcolor, align, valign) and understand their HTML5 deprecation and CSS equivalents.

  • Use the scope attribute on <th> for improved accessibility.

  • Wrap tables in <div> elements and use CSS classes for a clean separation of content and presentation.

  • Explain why tables remain the best choice for genuine tabular data despite modern layout tools.

Why use tables?

  • Semantic structure: Rows and columns convey relationships that assistive technologies can interpret.

  • Audience‑centred design (syllabus 9.1): Tables can be tuned for readability on low‑resolution devices or printed hand‑outs.

  • Predictable layout: Unlike CSS Grid or Flexbox, a table’s grid does not collapse unexpectedly when printed.

Complete HTML page skeleton (including required meta‑tags)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Weekly school timetable">
<title>Weekly Timetable</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Weekly Timetable</h1>
<!-- Table is placed inside a wrapper div for CSS styling -->
<div class="table-wrapper">
<!-- table goes here -->
</div>
</body>
</html>

Key table attributes (HTML 5 status & CSS equivalents)

AttributePurpose (Why use it?)Typical valuesHTML5 statusCSS equivalent
borderDraws a line around the table or cell.0, 1, 2, … (pixels)Deprecated – presentational.border: 2px solid #000;
cellspacingSpace between adjacent cells.0, 2, 5, … (pixels)Deprecated.border-spacing: 4px;
cellpaddingSpace between cell content and its border.0, 2, 5, … (pixels)Deprecated.padding: 6px; on td, th
widthOverall table width.Pixel (e.g. 600) or % (e.g. 80%).Allowed but discouraged.width: 80%;
heightOverall table height.Pixel or %.Allowed but discouraged.height: auto;
colspanMake a cell span several columns.Integer ≥ 1Valid.Handled by the same attribute.
rowspanMake a cell span several rows.Integer ≥ 1Valid.Handled by the same attribute.
bgcolorBackground colour of a table or cell.Colour name or hex (e.g. #e0e0e0).Deprecated.background-color: #e0e0e0;
alignHorizontal alignment of the table on the page.left, center, rightDeprecated.margin: 0 auto; (centre) or text-align for cell content.
valignVertical alignment of content inside a cell.top, middle, bottomDeprecated.vertical-align: middle;
scopeIndicates whether a <th> is a column, row or group header – improves screen‑reader navigation.col, row, colgroup, rowgroupValid (HTML5).No CSS equivalent – semantic only.

Using colspan and rowspan

These attributes let a single cell occupy the space of several columns or rows. They are essential for timetables, price lists, and any layout where an item spans multiple periods.

<table border="1" width="100%" cellpadding="5" cellspacing="0">
<thead>
<tr bgcolor="#d9edf7">
<th scope="col">Time</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
</thead>
<tbody>
<tr>
<td width="15%">08:00‑09:00</td>
<td bgcolor="#f2dede" colspan="2" align="center">Mathematics</td>
<td bgcolor="#dff0d8" align="center">English</td>
<td bgcolor="#fcf8e3" align="center">History</td>
<td bgcolor="#d9edf7" align="center">Geography</td>
</tr>
<tr>
<td>09:00‑10:00</td>
<td bgcolor="#dff0d8" align="center">Science</td>
<td bgcolor="#d9edf7" align="center">Art</td>
<td bgcolor="#f2dede" rowspan="2" align="center">Physical Education</td>
<td bgcolor="#fcf8e3" align="center">Music</td>
<td bgcolor="#dff0d8" align="center">Computer Science</td>
</tr>
<tr>
<td>10:00‑11:00</td>
<td bgcolor="#fcf8e3" align="center">Biology</td>
<td bgcolor="#d9edf7" align="center">Chemistry</td>
<!-- PE cell continues here because of rowspan="2" -->
<td bgcolor="#f2dede" align="center">French</td>
<td bgcolor="#dff0d8" align="center">Spanish</td>
</tr>
<tr>
<td>11:00‑12:00</td>
<td bgcolor="#d9edf7" colspan="3" align="center">Lunch Break</td>
<td bgcolor="#fcf8e3" align="center">Drama</td>
<td bgcolor="#f2dede" align="center">Economics</td>
</tr>
</tbody>
</table>

Setting table size – pixels vs. percentages

  • Pixel values give exact control (e.g. <table width="800" height="400">). Use when the audience is limited to a known device size (e.g. a school computer lab).

  • Percentage values make the table fluid (e.g. <table width="90%">). Ideal for mixed‑device audiences because the table scales with its container.

Justify your choice in the design rationale – the exam expects a short explanation.

Responsive‑design snippet (media query)

/* styles.css */
.table-wrapper {
overflow-x: auto;               /* allows horizontal scroll on very small screens */
}
@media (max-width: 600px) {
table {
width: 100% !important;    /* force full‑width on phones */
font-size: 0.9rem;         /* slightly smaller text */
}
}

Presentational attributes vs. CSS (quick‑reference cheat‑sheet)

HTML attribute (deprecated?)CSS propertyExample
border="2" (deprecated)border: 2px solid #000;table { border: 2px solid #000; }
cellspacing="4" (deprecated)border-spacing: 4px;table { border-spacing: 4px; }
cellpadding="6" (deprecated)padding: 6px;td, th { padding: 6px; }
bgcolor="#e0e0e0" (deprecated)background-color: #e0e0e0;td { background-color: #e0e0e0; }
align="center" (deprecated)margin: 0 auto; (table) or text-align: center; (cell)table { margin: 0 auto; }
valign="middle" (deprecated)vertical-align: middle;td, th { vertical-align: middle; }

Accessibility and readability (syllabus 9.1 & 8.2)

  • Cell padding & spacing – creates white‑space that aids users with visual impairments.

  • Header semantics – always use <th> for column/row headings and add scope="col" or scope="row" so screen‑readers can announce the correct context.

  • Colour contrast – ensure background and text colours meet WCAG AA contrast ratios (important for e‑safety and inclusive design).

  • Title / summary – optional title attribute on <table> provides a brief description for assistive tech.

  • Responsive overflow – wrapping the table in a <div class="table-wrapper"> with overflow-x:auto prevents horizontal scrolling from breaking the page layout on small screens.

Wrapping a table in a <div> and using CSS classes

Separating structure (HTML) from presentation (CSS) makes maintenance easier and satisfies the “presentation layer” requirement of the syllabus.

<div class="timetable">
<table class="styled">
… table rows …
</table>
</div>

Corresponding CSS (in styles.css)

.timetable { max-width: 100%; margin: 0 auto; }
.styled { border-collapse: collapse; width: 100%; }
.styled th, .styled td { padding: 8px; border: 1px solid #ccc; }

Common pitfalls – checklist (with syllabus remedies)

  1. Forgetting to close a colspan or rowspan cell. Result: later rows shift. Remedy: Count the total columns after each merged cell and verify it matches the header row.

  2. Mixing pixel and percentage values for the same dimension. Result: unpredictable rendering. Remedy: Decide early – pixel for fixed‑size lab computers, percentage for mixed‑device audiences.

  3. Using both HTML presentational attributes and CSS for the same property. Result: conflicts. Remedy: In exam practice stick to the HTML attributes; in real projects move all styling to an external stylesheet.

  4. Omitting scope on <th>. Result: poorer accessibility. Remedy: Always add scope="col" for column headers and scope="row" for row headers.

  5. Neglecting device considerations. Result: table unreadable on phones. Remedy: Justify the choice of width units and, where appropriate, add a simple media query.

Quick‑check exercise (identify & rewrite)

Below is a table that uses several deprecated attributes. Your tasks:

  1. List every deprecated attribute (border, cellspacing, cellpadding, bgcolor, align, valign).

  2. Rewrite the table so that all presentation is handled with CSS only (keep the HTML5‑valid attributes such as colspan, rowspan, scope).

<table border="1" cellspacing="2" cellpadding="4" align="center">
<tr bgcolor="#d9edf7">
<th>Item</th>
<th>Price</th>
</tr>
<tr valign="top">
<td>Notebook</td>
<td>$2.50</td>
</tr>
</table>

Practice activity – design a product‑price table

Build a table that meets all of the following specifications. Write the HTML code (you may add a linked CSS file) and include a short comment (≤ 30 words) explaining any audience‑related design decisions.

  1. Three columns: Product, Description, Price.

  2. Header row uses <th> with scope="col".

  3. First product description spans two rows using rowspan.

  4. Table width is 90 % of the viewport (fluid layout).

  5. Use a class="price-table" on the <table> and style it entirely with CSS (no presentational attributes).

  6. Include a title="Product price list" attribute on the table for accessibility.

  7. Wrap the table in a <div class="table-wrapper"> to allow horizontal scrolling on very narrow screens.

Example starter code (HTML only):

<div class="table-wrapper">
<table class="price-table" title="Product price list">
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Description</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td rowspan="2">High‑performance notebook with 16 GB RAM</td>
<td>$999</td>
</tr>
<tr>
<td>Mouse</td>
<td>$25</td>
</tr>
<!-- more rows – add as needed -->
</tbody>
</table>
</div>

Now add the CSS (in styles.css) to achieve the required presentation.

Summary – what you must remember for the exam

  • Core elements: <table>, <tr>, <th>, <td>.

  • Key attributes: rowspan, colspan, width, height, border, cellspacing, cellpadding, bgcolor, align, valign, scope.

  • Deprecated attributes → replace with CSS (refer to the cheat‑sheet).

  • Use scope on <th> for accessibility.

  • Justify pixel vs. % widths based on audience devices.

  • Wrap tables in a <div> and use classes for clean styling.

  • Include meta‑tags (charset, viewport, description) in the <head> of any page you create.

  • Be able to spot deprecated attributes and rewrite a table using pure CSS.