Academic Year 2016/2017

Topic Outline
o What is a table?
o Basic Table Structure
o Table Headings
Web Design & o Spanning Columns
Development o Spanning Rows
o Width and Spacing
o Border and Background

Notes 11: HTML Tables

Gemma O’Callaghan

What Is A Table? What is a Table?

o There are several types of information that need to be
displayed in a grid or table.
– E.g. sport results, stock reports, train timetables
o Grids allow us to understand complex data by
referencing information on two axes.
o Each block in the grid is referred to as a table cell.
o A table cell can contain any sort of information,
including numbers, text elements, images and
multimedia objects.
o In HTML, a table is written out row by row.

Web Design & Development 1

 Academic Year 2016/2017

How Tables Are Used Table Elements

o In visual browsers, the arrangements of data in rows
and columns gives readers an instant understanding of
the relationships between data cells and their
respective header labels.
o Before the introduction of stylesheets, tables were the
only option for creating multicolumn layouts or
controlling alignment and whitespace.
o <table> … </table>
– The <table> element is used to create a table.
o <tr> … </tr>
– The <tr> tag (table row) indicates the start of each row.
– At the end of the row, you use a closing </tr> tag.
o <td> … </td>
– The <tr> element is followed by one or more <td> elements.
– Each cell of a table is represented using a <td> element. (table
data)

5 6

Table Elements Minimal Table Structure

o <th> … </th> o Here’s an example of a simple table with 3 rows and 3
– The <th> element is used like the <td> element but its columns.
purpose is to represent the heading for either a column or a
row.
– Even is a cell has no content, you should still use a <td> or a
<th> element to represent the presence of an empty cell
otherwise the table will not render correctly.
– Browsers usually display the content of a <th> element in bold
and in the middle of the cell.
– Using <th> elements for headings helps
• people who use screen readers,
• improves the ability for search engines to index your pages
• gives you more control over the appearance of tables when you
start using CSS

7 8

Web Design & Development 2

 Academic Year 2016/2017

Minimal Table Structure Minimal Table Structure

o This shows the structure of the previous table according
to the HTML table model. o This shows the elements that that identify the table
(table), rows (tr, for “table row”), and cells (th, for
o All of the table’s content goes into cells that are
“table headers,” and td, for “table data”).
arranged into rows.
o Cells are the heart of the table, because that’s where
o Cells contain either header information (titles for the
the actual content goes. The other elements just hold
columns, such as “Calories”) or data, which may be any
things together.
sort of content.

9 10

Minimal Table Structure Minimal Table Structure

o What we don’t see are column elements. o The markup for the previous table example would look
o The number of columns in a table is determined by the as follows.
number of cells in each row.
o This is one of the things that make HTML tables
potentially tricky.
o Rows are easy—if you want the table to have three
rows, just use three <tr> elements.
o Columns are different.
o For a table with four columns, you need to make sure
that every row has four <td> or <th> elements; the
columns are implied.

11

Web Design & Development 3

 Academic Year 2016/2017

Minimal Table Structure Table Exercise

o How the table would look in a browser. Here is the source for <table>
another table. <tr>
<td>Table</td>
<td>Row</td>
Can you tell how many <td>Layout</td>
rows and columns it will </tr>
have when it is displayed <tr>
in the browser? <td>Header</td>
<td>Cell</td>
<td>Data</td>
</tr>
</table>
14

Spanning Cells Spanning Columns

o Column spans, created with the colspan attribute in the
o One fundamental feature of table structure is cell
<td> or <th> element, stretch a cell to the right to span
spanning, which is the stretching of a cell to cover
over the subsequent columns.
several rows or columns.
o Here a column span is used to make a header apply to
o Spanning cells allows you to create complex table
two columns. (I’ve added a border around cells to
structures, but it has the side effect of making the
reveal the table structure in the screenshot.)
markup a little more difficult to keep track of.
o You make a header or data cell span by adding the
colspan or rowspan attributes.

15

Web Design & Development 4

 Academic Year 2016/2017

Spanning Columns Spanning Rows

o Row spans, created with the rowspan attribute, work
just like column spans, but they cause the cell to span
downward over several rows.
o In this example, the first cell in the table spans down
three rows.

18

Spanning Rows Long Tables

o There are 3 elements that help distinguish between the
main content of a table and the first and last rows
(which can contain different content).
– <thead> - The headings of the table
– <tbody> - The body of the table
– <tfoot> - The footer for the table
o Especially useful for long tables.
o Browsers don’t usually render these elements
differently but you can use CSS to render them
differently.
o Keeps header and footer visible in a long table.

19

Web Design & Development 5

 Academic Year 2016/2017

Long Tables
<thead>
<tr>
<th>Date</th>
<th>Income</th>
<th>Expenditure</th>
</tr>
</thead>

<tbody>...</tbody>

<tfoot>...</tfoot>

Space in and Between Cells Space in and Between Cells

o By default, cells are sized just large enough to fit their
contents, but often you’ll want to add a little breathing
room around tabular content.
o Cell padding is the space inside the cell, between the
content and the edge of the cell.
o To add cell padding, apply the CSS padding property to
the <td> or <th> element.

o Because spacing is a matter of presentation, it is a job

for style sheets.
o For completeness, we will look at the HTML code that
you could use to put spacing within and around cells in
a table.

23 24

Web Design & Development 6

 Academic Year 2016/2017

Space in and Between Cells Old Code: Width and Spacing

<table width="400"
o Cell spacing is the space between cells.
cellpadding="10"
o The cellspacing attribute creates space between each cellspacing="10">
cell of the table. <tr>
<th width="150"></th>
<th>Withdrawn</th>
<th>Credit</th>
<th>Balance</th>
</tr>

<tr> ... </tr>

</table>

25

Old Code: Width and Spacing Old Code: Width and Spacing
<table width="400"
• The <width> attribute <table width="400" • The cellpadding
cellpadding="10" cellpadding="10" attribute adds space
cellspacing="10"> was used on the
cellspacing="10"> inside each cell of the
<tr> opening <table> tag to
<tr> table.
<th width="150"></th> indicate how wide that <th width="150"></th>
<th>Withdrawn</th> table should be and on <th>Withdrawn</th> • Measured in pixels.
<th>Credit</th> some <th> and <td> <th>Credit</th>
<th>Balance</th> tags to specify the <th>Balance</th>
</tr> width of individual cells. </tr>

<tr> ... </tr> • Measured in pixels.

<tr> ... </tr>
</table> • Sometimes only used </table>
on the first row.

Web Design & Development 7

 Academic Year 2016/2017

Old Code: Width and Spacing Result

<table width="400" • The cellspacing
cellpadding="10" attribute created
cellspacing="10"> space between each
<tr>
<th width="150"></th>
cell of the table.
<th>Withdrawn</th> • Measured in pixels.
<th>Credit</th>
<th>Balance</th>
</tr>

<tr> ... </tr>

</table>

Old Code: Border and Background Old Code: Border and Background
<table border="2" <table border="2"
bgcolor="#efefef"> bgcolor="#efefef">
<tr> <tr>
<th width="150"></th> <th width="150"></th>
<th>Withdrawn</th> <th>Withdrawn</th>
<th>Credit</th> <th>Credit</th>
<th bgcolor="#cccccc">Balance</th> <th bgcolor="#cccccc">Balance</th>
</tr> </tr>
The border attribute was used on both
<tr> ... </tr> <tr> ... </tr> the <table> and <td> elements to
</table> </table> indicate the width of the border in
pixels.

Web Design & Development 8

 Academic Year 2016/2017

Old Code: Border and Background Result

<table border="2"
bgcolor="#efefef">
<tr>
<th width="150"></th>
<th>Withdrawn</th>
<th>Credit</th>
<th bgcolor="#cccccc">Balance</th>
</tr>
The bgcolor attribute was used to
<tr> ... </tr> indicate the background colours of
</table> either the entire table or individual
table cells.

Describing Table Content Describing Table Content

o Use the caption element to give a table a title or brief
description that displays next to the table.
o You can use it to describe the table’s contents or
provide hints on how it is structured.
o When used, the caption element must be the first thing
within the table element, as shown in this example,
which adds a caption to the nutritional chart from
earlier in the chapter.

35 36

Web Design & Development 9

 Academic Year 2016/2017

Topic Review Summary

1 Minute Paper
What are the most significant things you
have learned during this session?
o The <table> element is used to add tables to a
web page.
o A table is drawn out row by row. Each row is
created with the <tr> element.
o Inside each row are cells represented by the <td>
element (or <th> if it is a header).
o You can make cells of a table span more than one
row or column using the rowspan and colspan.
o For long tables you can split the table into a
<thead>, <tbody>, and <tfoot>.

37 38

Web Design & Development 10