ICT 0417 – Website Authoring: Using Tables for Layout
21 Website Authoring
Objective
Know and understand the reason tables are used to structure elements within a web page.
Why Tables Were Historically Used for Layout
Early browsers had limited support for CSS positioning and floating.
Tables provide a grid‑like structure that can align text, images and form controls in rows and columns.
They guarantee that related elements stay together when the page is resized, because each cell’s dimensions are calculated together.
Table‑based layouts were easier for non‑programmers to visualise and edit with WYSIWYG editors.
Advantages of Table‑Based Layout
Predictable alignment of content across different browsers.
Simple to create with basic HTML tags (<table>, <tr>, <td>).
Works well for tabular data that also needs to be displayed as part of the page layout.
Disadvantages and Modern Alternatives
While tables can still be used, they have several drawbacks compared with CSS layout techniques:
Mixes presentation with content, making the markup less semantic.
Increases page size and load time because of extra markup.
Reduces accessibility for screen‑reader users.
Harder to maintain and adapt to responsive designs.
Comparison of Table Layout vs. CSS Layout
Aspect
Table Layout
CSS Layout (Flexbox / Grid)
Semantic Meaning
Low – tables imply tabular data.
High – CSS separates style from structure.
Responsive Design
Complex – requires nested tables or scripts.
Built‑in with media queries, flex and grid.
Accessibility
Screen readers interpret as data tables.
ARIA roles can be applied easily.
Maintenance
Hard – many rows/columns to edit.
Easy – CSS rules can be changed centrally.
Browser Compatibility
Excellent on very old browsers.
Supported by all modern browsers.
Suggested diagram: A side‑by‑side illustration of a simple 2‑column table layout compared with a CSS Flexbox layout.
Key Take‑away
Tables should be reserved for displaying genuine tabular data. For page layout, modern CSS techniques provide cleaner, more flexible and accessible solutions. Understanding the historical use of tables helps students recognise legacy code and transition to best practices.