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

Published by Patrick Mutisya · 8 days ago

21. Website Authoring – Using Table Attributes

Learning Objective

By the end of this lesson you will be able to:

  • Select appropriate table attributes to meet the needs of your audience.

  • Make cells span more than one row or column using rowspan and colspan.

  • Set table and cell dimensions in pixels or percentages with the width and height attributes.

  • Apply presentational attributes such as border, bgcolor, align, and valign to tables and cells.

Key Table Attributes

AttributePurposeTypical \cdot alues
borderDefines the thickness of the outer border (in pixels).0, 1, 2, …
cellspacingSpace between individual cells.0, 2, 5, … (pixels)
cellpaddingSpace between cell content and its border.0, 2, 5, … (pixels)
widthOverall table width.Pixel value (e.g., 600) or percentage (e.g., 80%)
heightOverall table height.Pixel value (e.g., 400) or percentage (e.g., 50%)
colspanNumber of columns a cell should span.Integer ≥ 1
rowspanNumber of rows a cell should span.Integer ≥ 1
bgcolorBackground colour of a table or cell.Colour name (e.g., lightgrey) or hex code (e.g., #e0e0e0)
alignHorizontal alignment of the table on the page.left, center, right
valignVertical alignment of content inside a cell.top, middle, bottom

Example: A Timetable Using colspan and rowspan

The following table demonstrates how to create a weekly class timetable where some lessons occupy more than one period or day.

TimeMondayTuesdayWednesdayThursdayFriday
08:00‑09:00MathematicsEnglishHistoryGeography
09:00‑10:00ScienceArtPhysical EducationMusicComputer Science
10:00‑11:00BiologyChemistryFrenchSpanish
11:00‑12:00Lunch BreakDramaEconomics

Setting Table Size in Pixels vs. Percentages

Choosing between pixel and percentage values depends on the intended display environment:

  1. Pixel values give precise control. Example: <table width="800" height="400"> ensures the table is 800 px wide regardless of screen size.

  2. Percentage values make the table responsive to the browser window. Example: <table width="90%" height="auto"> lets the table expand to 90 % of its container’s width.

Applying Presentational Styles Directly in HTML

While modern web design prefers CSS, the IGCSE syllabus still expects knowledge of legacy presentational attributes. Below is a concise checklist for quick reference:

  • border="2" – 2‑pixel border around the table.

  • cellspacing="4" – 4 px gap between cells.

  • cellpadding="6" – 6 px padding inside each cell.

  • bgcolor="#eeeeee" – Light grey background for the whole table.

  • align="center" – Centers the table horizontally on the page.

  • Cell‑level: bgcolor, align, valign, width, height.

Common Pitfalls and How to Avoid Them

  • Forgetting to close a colspan or rowspan cell can shift subsequent columns, breaking the layout.

  • Mixing pixel and percentage values in the same dimension may produce unexpected results on different screens.

  • Using both CSS and presentational attributes can cause conflicts; for IGCSE practice, stick to the HTML attributes listed above.

Practice Activity

Create a table that meets the following specifications:

  1. Overall width: 70% of the page.

  2. Three columns: Product, Price, Availability.

  3. The header row should have a background colour of #cce5ff and a 2‑pixel border.

  4. In the body, make the Price cell for the second product span two rows (use rowspan).

  5. Set the Availability column width to 150 px.

Suggested diagram: Sketch of the required table layout showing merged cells.