Welcome to the Layout Section: Mastering Tables!

Hi there! This chapter is all about tables—a fundamental tool in ICT for organizing data and controlling the layout of your documents and web pages. Whether you are building a professional report or designing a website, tables help you structure content clearly and precisely. Think of a table as a neatly organized filing cabinet for your information!

Don't worry if you sometimes find tables confusing. By breaking down the structure and the simple HTML tags, you’ll be a table master in no time!

1. Understanding Table Structure: The Basics

1.1 What is a Table?

A table is simply a grid structure used to arrange information logically using rows and columns.

  • Row: A horizontal section of the table. (Think of lying down—a row is side-to-side).
  • Column: A vertical section of the table. (Think of a tall pillar—a column is up-and-down).
  • Cell: The smallest unit of a table; the intersection where a row and a column meet. This is where you put your data!

Quick Tip: You can count the total number of cells by multiplying the number of rows by the number of columns. (E.g., 5 rows x 3 columns = 15 cells).

1.2 Creating a Table (In Documents and HTML)

The first step in any application (like a word processor or web editor) is specifying the number of rows and columns you need.

In Document Production (Syllabus 13.2)

When working in applications like Microsoft Word or DTP software, you generally use an Insert Table dialogue box to define:

  • The number of rows (horizontal).
  • The number of columns (vertical).
In Web Authoring (HTML - Syllabus 21.2)

When creating a table in HTML (the content layer), you use specific tags:

The main structure uses these tags:

  • <table>: Starts and ends the whole table.
  • <tr>: Defines a Table Row.
  • <td>: Defines a Table Data cell (a normal cell).
  • <th>: Defines a Table Header cell (usually displays text in bold and centred).

Memory Aid (HTML):
T-R-D: Table, Row, Data. They must go in that order!

Key Takeaway: Tables are grids of cells formed by rows and columns, essential for structured content in both software documents and web pages.

2. Editing and Manipulating Table Content

In your practical exams, you must be able to modify the table structure after it has been created.

2.1 Editing Rows and Columns

You must be able to edit a table and its contents, including:

  • Insert row(s) and column(s): Adding new storage slots for data.
  • Delete row(s) and column(s): Removing unwanted sections.
  • Placing text or objects in a table: Filling the cells with text, numbers, or other elements like images, charts, or spreadsheet extracts (Syllabus 13.1 & 13.2).

2.2 Merging Cells (Spanning)

Merging cells means taking two or more adjacent cells and combining them into one single, larger cell. This is vital when you need a single header to stretch across multiple data columns, or vice-versa.

In Document Production (Syllabus 13.2)

In word processors, you typically select the cells you want to combine and choose the 'Merge Cells' option.

In Web Authoring (HTML - Syllabus 21.2)

In HTML, merging is achieved using special attributes within the <td> or <th> tags:

  1. colspan: Specifies how many columns a cell should stretch across.
  2. rowspan: Specifies how many rows a cell should stretch down.

Example: If you have a title that needs to cover 3 columns, you would use: <th colspan="3">Monthly Sales Report</th>

Analogy: Imagine building a seating plan. If you use colspan="2", you are giving one person two seats side-by-side. If you use rowspan="2", that person takes up one seat, but the space extends downward into the next row too.

Common Mistake to Avoid: When using colspan or rowspan, you must remember to remove the corresponding extra <td> tags from that row, otherwise your table structure will break!

Key Takeaway: Use merging (spanning) to create irregular table shapes and ensure headers stretch correctly over their associated data columns.

3. Formatting and Presentation of Tables

Formatting ensures your table is readable and professional. This involves adjusting sizing, aligning content, and controlling visibility of borders.

3.1 Controlling Size (Documents and Web)

In Document Production (Syllabus 13.2)

You must be able to:

  • Adjust row height: Making rows taller.
  • Adjust column width: Making columns wider or narrower.
In Web Authoring (HTML - Syllabus 21.2)

When specifying table and cell sizes, you use one of two measurements:

  • Pixels (px): A fixed measurement (e.g., width="600" or width="600px").
  • Percentage (%): A relative measurement based on the window size (e.g., width="80%"). This is often better for responsiveness.

Did you know? Using percentage values (like 80%) for table width means the table will automatically resize if the user changes their browser window size!

3.2 Alignment of Content

Data alignment is crucial for readability, especially for numbers.

  • Horizontal Alignment (align): Controls side-to-side positioning.
    • Left (default for text)
    • Right (default for numbers/currency)
    • Centre
    • Fully Justified (stretches text to both edges)
  • Vertical Alignment (valign): Controls up-and-down positioning within a cell.
    • Top
    • Middle
    • Bottom

3.3 Appearance and Readability

You must be able to adjust these features in documents and (via styles) in web pages:

1. Showing/Hiding Gridlines and Borders:

  • In Documents: You can choose to show gridlines (useful for editing) or hide gridlines (often used for professional printed documents where you want the structure without lines).
  • In HTML: Borders are typically handled using CSS (Cascading Style Sheets, covered in Section 21.3). You may need to ensure borders are visible/invisible or collapsed (Syllabus 21.3).

2. Text Wrapping (Documents Only - Syllabus 13.2):

You need to be able to wrap text within a cell. If a text string is too long for the cell width, the text will automatically drop to the next line within that cell.

3. Shading/Colouring:

Adding shading or colouring cells is used to highlight key data (e.g., headers or totals) for better visual communication. This is common in both documents and web pages (using the bgcolor attribute in HTML, or preferably CSS).

4. Text Wrapping Around Tables (Syllabus 13.1)

When you insert a table into a document (not a web page), you often need to control how text flows around it. You should be able to apply different text wrapping options to a table, chart, or image, including:

  • Above and Below: Text stops before the table and starts again after it.
  • Square: Text forms a square box around the table.
  • Tight: Text follows the contour of the table closely.

Key Takeaway: Formatting involves precise control over alignment (horizontal and vertical), sizing (pixels or percent), and visual elements like borders and shading to maximize clarity.

Quick Review Checklist: Tables (13.2 & 21.2)

To pass the practical table elements, ensure you can confidently perform these actions:

Structure & Editing:

  • Create a table with a specified number of rows and columns.
  • Insert and delete rows and columns.
  • Merge cells (or use colspan/rowspan in HTML).

Formatting & Appearance:

  • Adjust row height and column width (in documents) or use pixel/% values (in HTML).
  • Set horizontal cell alignment (Left, Right, Centre, Justified).
  • Set vertical cell alignment (Top, Middle, Bottom).
  • Apply shading/colouring to specific cells.
  • Show or hide gridlines/borders.
  • In documents, wrap text around the table (Square, Tight, Above, Below).