HTML Tables (Grade 12 NSC Matric Computer Application Technology): Revision Notes
HTML Tables
Introduction to HTML tables
HTML tables are powerful tools for organising and displaying data on web pages. Think of them like spreadsheets or databases - they help you present information in neat rows and columns that users can easily read and understand.
Tables serve two main purposes in web development. First, they're excellent for displaying structured data, such as price lists, timetables, or student marks. When information naturally fits into rows and columns, tables make it much clearer for visitors to interpret.
Second, tables can control webpage layout by positioning different elements like text, graphics, and videos. However, this approach isn't recommended for modern web design as it can create accessibility issues and make pages harder to maintain.
While tables can be used for layout purposes, modern web development strongly favours CSS for positioning elements. Tables should primarily be used for their intended purpose: displaying tabular data in a structured format.
Creating an HTML table
Basic table structure
Every HTML table follows a specific structure using several key tags working together. Understanding this hierarchy is essential for creating properly formatted tables.
The <table> tag acts as the container for your entire table - everything else goes inside these opening and closing tags. Within the table, you create rows using <tr> (table row) tags. Inside each row, you add individual cells using <td> (table data) tags.
Basic Table Creation Example
Let's build a simple table step by step:
Step 1: Create the table container
<table>
</table>
Step 2: Add a row with two columns
<table>
<tr>
<td> Column A </td>
<td> Column B </td>
</tr>
</table>
This creates a basic table with one row containing two columns that displays as:
| Column A | Column B |
Adding borders to tables
By default, HTML tables appear invisible because they don't have borders. To make your table structure visible, you need to add the border attribute to your <table> tag.
The border attribute specifies the width of the border in pixels. For example, border="2" creates a border that's 2 pixels thick around each cell.
<table border="2">
<tr>
<td> Column A </td>
<td> Column B </td>
</tr>
</table>
Without the border attribute, your table will be completely invisible on the webpage, making it impossible for users to distinguish between different cells and rows.
Adding table captions and headings
A complete table should have a clear title and proper headings to help users understand the data. Use the <caption> tag to add a title above your table, and <th> (table header) tags to create column or row headings.
Complete Table with Caption and Headers
<caption>
This is my table name.
</caption>
<table border="2">
<tr>
<th> Heading A </th>
<th> Heading B </th>
</tr>
<tr>
<td> Column A </td>
<td> Column B </td>
</tr>
</table>
The <th> tags automatically make text bold and centre-aligned, helping distinguish headers from regular data cells. You can place headers at the top of columns or the beginning of rows, depending on how your data is organised.
Formatting an HTML table
Controlling table size
You can control your table's dimensions using the width and height attributes. These can be specified in pixels for exact sizes, or as percentages to make tables responsive to different screen sizes.
<table border="2" width="400" height="150">
This creates a table that's exactly 400 pixels wide and 150 pixels tall. Using percentages like width="70%" makes the table take up 70% of the available screen width.
You can also control individual cell sizes by adding width and height attributes to <th> or <td> tags:
<th width="25%" height="50"> Heading A </th>
<td width="25%" height="50"> Column A </td>
Changing table colours
HTML tables can be customised with various colours to improve their appearance and readability. You can change border colours, background colours of the entire table, or individual cell colours.
For border colours, use the bordercolor attribute:
<table border="2" bordercolor="blue">
To change the background colour of the entire table, use the bgcolor attribute:
<table border="2" bgcolor="yellow">
For individual cell colours, add the bgcolor attribute to specific <th> or <td> tags:
<th bgcolor="yellow"> Heading A </th>
This flexibility allows you to create visually appealing tables that match your website's colour scheme.
Understanding cell spacing and cell padding
Cell spacing and cell padding control the whitespace in your tables, but they work differently. Understanding this distinction is crucial for creating well-formatted tables.
Cell Padding vs Cell Spacing - Don't Confuse Them!
-
Cell padding adjusts the space between the cell walls and the content inside each cell. Think of it as adding cushioning inside each cell to prevent text from touching the borders.
-
Cell spacing controls the space between adjacent table cells. This creates gaps between the actual cells themselves.
Remember: Padding is inside, Spacing is outside!
To control these spacing options, add attributes to your <table> tag:
<table border="1" cellpadding="5" cellspacing="5">
This creates a table where content sits 5 pixels away from cell borders (padding), and there's a 5-pixel gap between each cell (spacing).
Cell spanning with rowspan and colspan
Sometimes you need cells that stretch across multiple rows or columns. HTML provides rowspan and colspan attributes to create these merged cells, which is useful for complex table layouts.
Colspan makes a cell span across multiple columns horizontally:
<th colspan="3" style="text-align:centre">Main Heading</th>
Rowspan makes a cell span across multiple rows vertically:
<th rowspan="2" style="text-align:centre">Main Column</th>
When using rowspan or colspan attributes, remember to reduce the number of cells in affected rows or columns, since the spanning cell takes up multiple spaces. This is a common source of table layout errors!
Text alignment in table cells
You can control how text appears within table cells using alignment attributes. This helps create professional-looking tables with properly positioned content.
Vertical alignment uses the valign attribute with values:
top- aligns content to the top of the cellmiddle- centres content vertically (default)bottom- aligns content to the bottom of the cell
Horizontal alignment uses the align attribute with values:
left- aligns content to the left (default)center- centres content horizontallyright- aligns content to the right
Text Alignment Examples
Vertical alignment:
<td valign="top">Top</td>
<td valign="middle">Middle</td>
<td valign="bottom">Bottom</td>
Horizontal alignment:
<td align="left">Left</td>
<td align="centre">Centre</td>
<td align="right">Right</td>
Adding images to tables
Tables can contain images alongside text, making them more visually appealing and informative. Use the <img> tag within table cells, just like you would in regular HTML.
When adding images to tables, you need to specify the image source and size attributes:
<td> <img src="smiley.jpg" height="100" width="100"></img> </td>
Important considerations for table images:
- Image files must be saved in the same folder as your HTML file
- Always specify height and width attributes to control image size
- Use appropriate file formats (JPG, PNG, GIF)
- Consider image file sizes to ensure fast loading times
Exam tips and common pitfalls
Essential exam strategies
- Always remember to close your HTML tags properly - every opening tag needs a closing tag
- Check your table structure:
<table>contains<tr>tags, which contain<td>or<th>tags - When using rowspan or colspan, adjust the number of cells in affected rows/columns accordingly
- Test your border, spacing, and padding values to achieve the desired appearance
Common mistakes to avoid:
- Forgetting to add borders makes tables invisible and hard to mark
- Mixing up cell padding (inside cells) with cell spacing (between cells)
- Not reducing cell counts when using rowspan/colspan attributes
- Placing
<caption>tags in the wrong position (they should come right after<table>) - Using tables for page layout instead of data presentation
Quick troubleshooting
- If your table isn't visible, check if you've added the
borderattribute - If cells appear cramped, increase
cellpaddingvalues - If you want gaps between cells, use
cellspacing - For images not displaying, verify the file path and name are correct
Key Points to Remember:
-
HTML tables use a hierarchical structure:
<table>contains<tr>(rows), which contain<td>(data cells) or<th>(header cells) -
Borders make tables visible: Without the
borderattribute, tables appear invisible on the webpage -
Cell padding vs cell spacing: Padding controls space inside cells, while spacing controls gaps between cells
-
Rowspan and colspan create merged cells: These attributes let single cells stretch across multiple rows or columns
-
Always include captions and headers: Use
<caption>for table titles and<th>for column/row headings to make tables accessible and professional