Tables

Introduction
The HTML tags to create a table are as follows:
HTML Markup Meaning

<table> </table> Declares a table

<caption> </caption> Defines the table's caption - provides a short description

<tr> </tr> Begins a table row

<th> </th> Begins a cell containing header text

<td> </td> Begins a cell containing regular text

The following attributes/style attributes can be added to the table elements:

Table CSS Meaning
element

<table> , <th> border , e.g. To specify a border for the table (or row or
or <td> td {border: 1px solid cell). Can be used to replace the table
black;} attribute <table border="1"> .

padding , e.g. To specify the gap to be placed around the

td {padding: 25px;} table contents (or row or cell).

background-color , e.g. To set the background colour for the table

table {background-color: (or row or cell).
<table> ,
aqua;}
<tr> , <th> or
<td>
width , e.g. To specify the element is 80% of window
table {width: 80%;} width.

width , e.g. To specify the element is 500 pixels wide.

table {width: 500px;}

text-align , e.g. To set the text alignment left, right, center

td {text-align: right;} or justify. Note: by default, text is aligned
to the left.
<th> , <td>
vertical-align , e.g. To set the vertical alignment top, bottom or
td {vertical-align: top;} middle. Note: by default, tables cells use
middle vertical alignment.

Row(s) of cells
A Table in html is constructed horizontally, by creating rows of data cells as follows:

Displayed by browser HTML markup required

<table>
<tr>
<td> Data cell 1 </td>
Data cell 1Data cell 2
<td> Data cell 2 </td>
</tr>
</table>

We can use CSS to add a table border and some padding as follows.

When we use CSS to add a border by default the table borders are separated border-collapse:
separate; .

In the lecture examples, the default display is changed with border-collapse: collapse; so that
the borders collapse into a single border.

Example: border-collapse: separate

(https://purdyw.users.ecs.westminster.ac.uk/18/tableColSep.html)

Displayed by browser CSS/HTML markup required

 table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

td {
padding: 5px;
Data cell 1 Data cell 2 }

<table>
<tr>
<td> Data cell 1 </td>
<td> Data cell 2 </td>
</tr>
</table>

You can add more rows to your table by adding a new <tr> tag followed by your table cells and
content, and closing the row using the </tr> tag:

Displayed by browser CSS/HTML markup required

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

td {
padding: 5px;
}
Data cell 1 Data cell 2
<table>
Data cell 3 Data cell 4 <tr>
<td> Data cell 1 </td>
<td> Data cell 2 </td>
</tr>
<tr>
<td> Data cell 3 </td>
<td> Data cell 4 </td>
</tr>
</table>

Heading to a column
The tag <th> may be used instead of <td> if the cell is a header to a column of cells. For
example:

Displayed by browser CSS/HTML markup required

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

th, td {
padding: 5px;
Mnemonic Expansion }

Hyper Text <table>

HTML Markup
<tr>
Language
<th> Mnemonic </th>
<th> Expansion </th>
</tr>
<tr>
<td> HTML </td>
<td> Hyper Text <br> Markup Language </td>
</tr>
</table>
Alignment
You can align your content horizontally and vertically using CSS style attributes. For example:

Displayed by browser HTML markup required

<table border="1" style="width:250px; height:250px">

<caption>An example to demonstrate alignment</caption>
<tr style="vertical-align:top">
An example to demonstrate <td>Top left </td>
alignment <td style="text-align:center">Top center </td>
<td style="text-align:right">Top right </td>
Top left Top Top right
</tr>
center
<tr style="vertical-align:middle">
<td>Middle left </td>
Middle Middle Middle <td style="text-align:center">Middle center </td>
left center right <td style="text-align:right">Middle right </td>
</tr>
<tr style="vertical-align:bottom">
Bottom Bottom Bottom <td >Bottom left </td>
left center right <td style="text-align:center">Bottom center </td>
<td style="text-align:right">Bottom right </td>
</tr>
</table>

Spanning rows and columns

You can add the attributes rowspan and colspan to the HTML tags <td> and <th to form data
cells which span more than one row or column. For example:

Displayed by browser CSS/HTML markup required

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

th, td {
padding: 5px;
}

<table>
Exam Coursework
<tr>
Tutorials 30% <th>Exam</th>
60% <th colspan="2">Coursework </th>
Coursework 10% </tr>
<tr>
<td rowspan="2"> 60%</td>
<td>Tutorials</td>
<td> 30%</td>
</tr>
<tr>
<td> Coursework</td>
<td> 10%</td>
</tr>
</table>

Colouring table cells

You can add the attributes rowspan and colspan to the HTML tags <td> and <th to form data
cells which span more than one row or column. For example:

Displayed by browser CSS/HTML markup required

 th, td {
padding: 5px;
}

th {
text-align: left;
}

.a {
background-color: #FFFFD0;
}

.b {
background-color: #FFD0FF;
}
Type Percentage
.c {
Exam 60% background-color: #D0FFFF;
}
Coursework 40%

<table>
<tr class="a">
<th>Type</th>
<th>Percentage</th>
</tr>
<tr class="b">
<td> Exam</td>
<td> 60%</td>
</tr>
<tr class="c">
<td> Coursework</td>
<td> 40%</td>
</tr>
</table>

Table to format text

You can also use tables to format text on Web pages: For example:

Displayed by browser CSS/HTML markup required

th, td {
padding: 10px;
}

th {
text-align: left;
Column
Column 2 }
1

This is <table>
This will be
my first <tr>
my second
column <th>Column 1</th>
column. The
of text. I <th>Column 2</th>
text will be
can
automatically </tr>
write as
formatted to <tr>
much
fit in second <td> This is my first column of text. I can write
as I
columns... as much as I want....
want....
</td>
<td> This will be my second column. The text will
be automatically formatted to fit in second columns...
</td>
</tr>
</table>

However, in a later lecture we will use CSS to create columns.

 Note: If you have declared a table and it does not appear on your page, check that you
have a closing tag element for each opening tag element. You may have forgotten the tag at
the end of the table.
Grouping Table elements
While <th> and <tr> tags represents a single header and a row cell respectively in a table. You
can use the <thead> tag to organize and group table headers ( <th> ) into a distinct section for
better semantic structure, accessibility, and styling.
Using <thead> , <tbody> and <tfoot> tags allows you to apply styles specifically to areas of the
table you want without affecting other elements.
Screen readers and other assistive technologies rely on semantic tags to understand the
structure of the table.

<thead> :Groups one or more rows ( <tr> ) of table header cells ( <th> ). It separates the
header content from the table's body ( <tbody> ) and footer ( <tfooter> ). Unlike a single
<th> , <thead> is used to organize multiple header rows as a distinct section.
<tbody> :Groups the main table content (data rows). It is different from or <td> because
<tbody> acts as a container for all rows ( <tr> ) of data cells ( <td> ), while <tr> and <td>
define individual rows and cells.
<tfoot> : Groups one or more rows ( <tr> ) of footer content, such as summary or totals. It is
separate from the data in <tbody> and is always rendered after <thead> regardless of its
placement in the code. Unlike <td> or <tr> , <tfoot> explicitly indicates that the content
belongs to the table's footer.

Displayed by HTML Markup Required

Browser

Product Price

<table>
Apple £1
<thead> style="background-color: #fcf3e4; font-weight: bold;">
Banana £0.50 <tr>
<th>Product</th>
Orange £0.75 <th>Price</th>
</tr>
Total £2.25 </thead>
<tbody>
<tr>
<td>Apple</td>
<td>£1</td>
</tr>
<tr>
<td>Banana</td>
<td>£0.50</td>
</tr>
<tr>
<td>Orange</td>
<td>£0.75</td>
</tr>
</tbody>
<tfoot> style="background-color: #f9f9f9; font-weight: bold;">
<tr>
<td>Total</td>
<td>£2.25</td>
</tr>
</tfoot>
</table>

Table Accessibility
While semantic HTML tags like <th> , <tr> , and <td> represent individual header and data cells
in a table, ARIA roles and attributes can enhance accessibility and provide additional context for
assistive technologies. The following provide an overview of the key tags and attributes for
accessible HTML5 tables:

Semantic Structure: <thead> , <tbody> , and <tfoot> that we discussed above separate
header, body, and footer content for screen readers.
aria-labelledby : Associates the table with a caption or heading.
aria-describedby : Adds additional explanatory content.
scope attribute on <th> : Clarifies relationships between headers and cells.
headers attribute on <td> : Links cells to their respective headers in complex tables.

 Look this example that integrates table accessibility tags.

View result of this example
Review Questions
Question 1 - What is the difference between the <tr> and <td> tags
Question 2 - What is the difference between the <td> and <th> tags
Question 3 - Write the html tags to display the following tables (no CSS used):

4COSC011W Assessment %

Table 1: Coursework 50%

Examination 50%

Item 1 Item 2
Table 2:
Item 3 Item 4 Item 5

Item 2 Item 3 Item 4

Table 3: Item 1
Item 5 Item 6 Item 7

Academic Year

Sem
Table 4COSC001W
1
4:
4COSC002W 4COSC003W 4COSC004W
Sem
4COSC005W
2

Accessibility statement (/accessibility)