Cambridge Syllabus Notes

Inserting Tables – ICT 0417 (Website Authoring)

1. Quick Syllabus Overview (Cambridge IGCSE ICT 0417)

This section reminds you of the broader topics you must be familiar with for the exam. Use the checklist at the end of the notes to verify coverage.

Syllabus Area	Key Points to Know
1‑5 Computer Systems, I/O, Storage, Networks, Effects of IT	Hardware vs. software, CPU, RAM/ROM, input & output devices. Primary & secondary storage, cloud storage. Types of networks (LAN, WAN, Internet) and basic protocols. Positive & negative effects of IT on individuals, society & the environment.
6 ICT Applications	Communication (email, messaging, video‑conferencing). Modelling (CAD, simulation). School‑/booking‑/banking‑systems. Expert systems, retail systems, recognition (biometrics) & satellite systems (GPS, GIS).
7 Systems Life‑Cycle	Analysis → Design → Testing → Implementation → Documentation → Evaluation. Implementation methods: direct change‑over, parallel, pilot, phased.
8‑10 Safety, e‑Safety, Audience & Communication	Physical safety, data protection, common threats (malware, phishing). Copyright, licensing, netiquette, responsible internet use.
11‑16 File Management → Proofing	File formats: .docx, .pdf, .csv, .png, .jpg, .gif, .mp4, .mp3. Compression, image editing basics, layout & style concepts. Proofing tools: spell‑check, grammar check, validation.
17‑21 Document Production, Databases, Presentations, Spreadsheets, Web Authoring	HTML5 skeleton, CSS linking, table markup (thead/tbody, th, td). Database design basics, queries, forms. Presentation slide design, multimedia use. Spreadsheet functions (SUM, AVERAGE, IF, VLOOKUP, nested functions).

2. Full HTML Page Skeleton (Required for Every Web‑Authoring Task)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Example page showing how to insert and style a table">
    <title>Inserting Tables – ICT 0417</title>
    <link rel="stylesheet" href="styles.css">   <!-- external CSS file – presentation layer -->
</head>
<body>
    
</body>
</html>

Key Points

Doctype – tells the browser to use HTML5.
<html lang="en"> – declares language (helps assistive technologies).
<meta charset="UTF-8"> – ensures correct character encoding.
<meta name="viewport"> – makes the page responsive on mobile devices.
<meta name="description"> – short summary for search engines.
<link rel="stylesheet"> – links an external CSS file (required for styling tables).

3. Common HTML Elements Used Alongside Tables

<h1> … <h6> – headings for logical hierarchy.
<p> – paragraph of text.
<ul> / <ol> – unordered / ordered lists.
<img src="images/photo.jpg" alt="Description"> – images (always use relative paths for local files).
<a href="page2.html">Link</a> – hyperlink; #section creates a bookmark.
<audio> / <video> – multimedia (again, relative paths).
<form> – basic form elements (input, textarea, button) – not needed for the table task but part of the syllabus.
<div> – generic container; useful for grouping elements and applying CSS classes.

Relative vs. Absolute Paths

Type of Path	Example	When to Use
Relative	`src="images/logo.png"`	Files stored in the same site folder – preferred for IGCSE projects.
Absolute	`src="https://example.com/logo.png"`	External resources on the web; never use for local images or CSS files.

4. Building a Table – Structure, Markup & Accessibility

4.1 Essential Table Elements

<table> – container for the whole table.
<thead> – groups header rows (improves accessibility).
<tbody> – groups the body rows (the data).
<tr> – a table row.
<th> – header cell (bold, centred by default).
<td> – normal data cell.

4.2 Step‑by‑step Insertion

Place the <table> element where the table should appear inside the <body>.
Add a <thead> section and create a row (<tr>) containing one <th> for each column.
Insert a <tbody> section.
For every data row, add a <tr> and fill it with <td> cells.
Close all tags in the reverse order they were opened.

4.3 Full Example (HTML + CSS)

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Stock Table</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>Product Stock Overview</h1>

    <table class="data-table">
        <thead>
            <tr>
                <th>Product</th>
                <th>Price (£)</th>
                <th>Stock</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="Product">Notebook</td>
                <td data-label="Price (£)">2.50</td>
                <td data-label="Stock">120</td>
            </tr>
            <tr>
                <td data-label="Product">Pen</td>
                <td data-label="Price (£)">0.80</td>
                <td data-label="Stock">350</td>
            </tr>
            <tr>
                <td data-label="Product">Eraser</td>
                <td data-label="Price (£)">0.30</td>
                <td data-label="Stock">200</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

/* styles.css – presentation layer for the table */
.data-table {
    width: 100%;
    border-collapse: collapse;          /* removes double borders */
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 1rem;
}

/* cells */
.data-table th,
.data-table td {
    border: 1px solid #999;
    padding: 0.5rem;
    text-align: left;
}

/* header styling */
.data-table thead th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* zebra striping */
.data-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* responsive behaviour – stacks cells on narrow screens */
@media (max-width: 600px) {
    .data-table,
    .data-table thead,
    .data-table tbody,
    .data-table th,
    .data-table td,
    .data-table tr {
        display: block;
    }

    .data-table thead {
        /* hide visual header but keep it accessible */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .data-table td {
        border: none;
        border-bottom: 1px solid #ddd;
        position: relative;
        padding-left: 50%;
    }

    .data-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 0.5rem;
        font-weight: bold;
        white-space: nowrap;
    }
}

4.4 How the Responsive CSS Works

On screens wider than 600px the table appears in the classic grid layout.
Below 600px each <td> becomes a block that displays a data-label attribute (added in the HTML). This technique satisfies the “presentation layer” requirement without any JavaScript.

5. What You Don’t Need for the IGCSE Exam

The exam never requires JavaScript for table tasks. All required behaviours (displaying data, basic styling, simple responsiveness) are achieved with HTML + CSS alone. Mention this explicitly in your revision notes to avoid unnecessary scripting.

6. Common Pitfalls & How to Avoid Them

Missing <thead> or placing <th> inside <tbody> – reduces accessibility. Keep header cells only inside <thead>.
Unclosed tags – HTML5 can tolerate some errors, but well‑formed markup prevents layout surprises.
Using absolute paths for local resources – e.g., src="C:/Users/me/pic.jpg". Always use relative paths like src="images/pic.jpg".
Forgetting to link the stylesheet – the table will appear unstyled if <link rel="stylesheet"> is omitted.
Incorrect table width – set width: 100% (or a specific pixel value) in CSS to control layout.
Not adding data-label attributes for responsive tables – the mobile view will be unreadable without them.

7. Practice Exercises

Exercise 1 – Build a Simple Table

Create a table that lists the subjects, weekly hours, and teacher’s name. Use the .data-table class from the CSS example.

Subject	Weekly Hours	Teacher
Mathematics	4	Mr. Lee
English	3	Ms. Patel
Science	5	Dr. Ahmed

Exercise 2 – Add Styling

Open styles.css (or create a new one).

Give the table a border of 2px solid #333, change the header background to #ddeeff, and increase the font size to 1.1rem. Example snippet:

.data-table {
    border: 2px solid #333;
}
.data-table thead th {
    background-color: #ddeeff;
}
.data-table th,
.data-table td {
    font-size: 1.1rem;
}

Refresh the page to see the changes.

Exercise 3 – Use Relative Paths for an Image

1. Create an images folder next to your HTML file and place logo.png inside it.

2. Insert the image above the table:

<img src="images/logo.png" alt="School logo" width="150">

3. Verify the image loads locally. Then replace the path with an absolute URL (e.g., https://example.com/logo.png) and note the difference.

8. Quick Reference – HTML & CSS for a Table

Task	HTML Snippet	Typical CSS (optional)
Declare table	`<table class="data-table"> … </table>`	See `.data-table` rules above.
Add header row	`<thead><tr><th>Header 1</th> … </tr></thead>`	`.data-table thead th { background:#f2f2f2; }`
Insert data rows	`<tbody><tr><td>Data 1</td> … </tr></tbody>`	`.data-table td { padding:0.5rem; }`
Make responsive	No extra HTML required (optional `data-label` attributes for mobile).	Media query shown in the CSS example.

9. Summary Checklist for the Exam (AO1‑AO3)

HTML page starts with !DOCTYPE html and contains a complete <head> (title, meta‑charset, viewport, description, CSS link).
Table markup follows the hierarchy: table → thead / tbody → tr → th / td.
Header cells (th) are placed only inside thead for accessibility.
All local resources (images, CSS, scripts) use relative paths.
External stylesheet is linked; basic table styling includes borders, padding, background colour, and optional responsive rules.
No JavaScript is required for the table task (exam AO2 – practical solution production).
Remember the broader ICT syllabus topics (hardware, software, safety, life‑cycle, etc.) – they may appear in integrated questions.

10. Action‑able Review Checklist – Align Your Lecture Notes with the Cambridge IGCSE 0417 Syllabus

Syllabus Section	Key Points to Include in Your Notes	Action Required
1‑5 Computer Systems, I/O, Storage, Networks, Effects of IT	Hardware‑software diagram, CPU, RAM/ROM, input/output devices, primary & secondary storage, basic network types, positive/negative effects of IT.	Add a concise diagram and a 1‑paragraph “Emerging tech” box (AI, XR).
6 ICT Applications	Communication, modelling, school/booking/banking systems, expert systems, retail systems, recognition (biometrics) & satellite (GPS/GIS).	Insert a short real‑world example for each sub‑topic that is currently missing (e.g., expert system = medical diagnosis).
7 Systems Life‑Cycle	Analysis → Design → Testing → Implementation → Documentation → Evaluation; implementation methods (direct, parallel, pilot, phased).	Provide a flow‑chart template that students can copy.
8‑10 Safety, e‑Safety, Audience & Communication	Physical safety, data protection, common threats, copyright, licensing, netiquette, responsible internet use.	Add a “e‑Safety checklist” (strong password, 2‑FA, phishing signs) and a short case‑study on copyright infringement.
11‑16 File Management → Proofing	File formats (.docx, .pdf, .csv, .png, .jpg, .mp4), compression, basic image editing, layout & style concepts, spell‑check vs. validation.	Insert a quick “spell‑check vs. validation” comparison table.
17‑21 Document Production, Databases, Presentations, Spreadsheets, Web Authoring	HTML5 skeleton, CSS linking, table markup (thead/tbody), database design basics, query examples, presentation slide design, spreadsheet functions (SUM, IF, VLOOKUP, nested).	Ensure HTML + CSS table example is present (it is). Add a short “function cheat‑sheet” for spreadsheets if not already covered.
Assessment Objectives (AO1‑AO3)	Recall of knowledge (AO1), practical solution production (AO2), analysis/evaluation (AO3).	Map each lecture activity to an AO (e.g., “Design a table – AO2”). Add a “self‑check” column for students.

Run through this checklist before each revision session – any unchecked item signals a coverage gap that needs to be filled.

Be able to insert a table including table header, table rows, table data

Inserting Tables – ICT 0417 (Website Authoring)

1. Quick Syllabus Overview (Cambridge IGCSE ICT 0417)

2. Full HTML Page Skeleton (Required for Every Web‑Authoring Task)

Key Points

3. Common HTML Elements Used Alongside Tables

Relative vs. Absolute Paths

4. Building a Table – Structure, Markup & Accessibility

4.1 Essential Table Elements

4.2 Step‑by‑step Insertion

4.3 Full Example (HTML + CSS)

4.4 How the Responsive CSS Works

5. What You Don’t Need for the IGCSE Exam

6. Common Pitfalls & How to Avoid Them

7. Practice Exercises

Exercise 1 – Build a Simple Table

Exercise 2 – Add Styling

Exercise 3 – Use Relative Paths for an Image

8. Quick Reference – HTML & CSS for a Table

9. Summary Checklist for the Exam (AO1‑AO3)

10. Action‑able Review Checklist – Align Your Lecture Notes with the Cambridge IGCSE 0417 Syllabus

Support e-Consult Kenya

Be able to insert a table including table header, table rows, table data

Inserting Tables – ICT 0417 (Website Authoring)

1. Quick Syllabus Overview (Cambridge IGCSE ICT 0417)

2. Full HTML Page Skeleton (Required for Every Web‑Authoring Task)

Key Points

3. Common HTML Elements Used Alongside Tables

Relative vs. Absolute Paths

4. Building a Table – Structure, Markup & Accessibility

4.1 Essential Table Elements

4.2 Step‑by‑step Insertion

4.3 Full Example (HTML + CSS)

4.4 How the Responsive CSS Works

5. What You Don’t Need for the IGCSE Exam

6. Common Pitfalls & How to Avoid Them

7. Practice Exercises

Exercise 1 – Build a Simple Table

Exercise 2 – Add Styling

Exercise 3 – Use Relative Paths for an Image

8. Quick Reference – HTML & CSS for a Table

9. Summary Checklist for the Exam (AO1‑AO3)

10. Action‑able Review Checklist – Align Your Lecture Notes with the Cambridge IGCSE 0417 Syllabus

Support e-Consult Kenya

Inserting Tables – ICT 0417 (Website Authoring)

1. Quick Syllabus Overview (Cambridge IGCSE ICT 0417)

4.3 Full Example (HTML + CSS)

Exercise 1 – Build a Simple Table

Exercise 2 – Add Styling

Exercise 3 – Use Relative Paths for an Image

10. Action‑able Review Checklist – Align Your Lecture Notes with the Cambridge IGCSE 0417 Syllabus