Cambridge Syllabus Notes

📚 21 Website Authoring – Inserting Tables

What is a Table?

A table is like a spreadsheet or a classroom seating chart. It organizes information into rows (horizontal lines) and columns (vertical lines). Each cell can hold text, numbers, or even images.

Key Elements of an HTML Table

<table> – the container for the whole table.
<thead> – holds the table header row(s).
<tbody> – contains the main data rows.
<tr> – a table row.
<th> – a header cell (bold & centered by default).
<td> – a standard data cell.

Step‑by‑Step Example

Let’s create a simple table that lists the top 3 programming languages:

Open a new HTML file and add the following code inside the <body> section.
Use <table> with <thead> and <tbody> tags.
Style the table with border-collapse: collapse; so borders look neat.

<table style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th style="border: 1px solid #000; padding: 8px;">Rank</th>
      <th style="border: 1px solid #000; padding: 8px;">Language</th>
      <th style="border: 1px solid #000; padding: 8px;">Year Released</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #000; padding: 8px;">1</td>
      <td style="border: 1px solid #000; padding: 8px;">Python</td>
      <td style="border: 1px solid #000; padding: 8px;">1991</td>
    </tr>
    <tr>
      2
      JavaScript
      1995
    
    
      3
      Java
      1995
    
  
</table>

?? Tip: Use border="1" for quick styling, but inline CSS gives more control.

Exam Tips for Tables

Always include a <thead> if your table has a header row.
Use <th> for header cells – they are bold and centered automatically.
Remember to close every tag: <tr>, <th>, <td>.
Check that your table is responsive – set width: 100%; so it fits the screen.
For multi‑row headers, use rowspan or colspan attributes.

💡 Practice: Create a table that lists your favourite books with columns for Title, Author, and Year.

Quick Quiz

Fill in the missing tags to complete the table skeleton:

<table>
  <?thead?>
    <?tr?>
      <?th?>Name</?th?>
      <?th?>Score</?th?>
    <?/tr?>
  <?/thead?>
  <?tbody?>
    <?tr?>
      <?td?>Alice</?td?>
      <?td?>95</?td?>
    <?/tr?>
  <?/tbody?>
</table>

?? Answer: Replace ?thead? with thead, ?tr? with tr, ?th? with th, ?tbody? with tbody, ?td? with td, and close tags with / where needed.

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