Embedded Files
Home > Chapter Review and Exercises > Chapter 8 Exercises
Read pages 163-167 before starting Exercise 8-1.
Read pages 163-167 before starting Exercise 8-1.
Exercise 8-1 What you need to know for this exercise
Exercise 8-1 What you need to know for this exercise
There are four basic elements used when constructing tables on a website:
<table>…</table> The table element surrounds the entire contents of the table.
<tr>…</tr> Each table row is defined with a <tr> element. The table row element contains the <th> and <td> elements.
<th>…</th> The table header is defined with a <th> tag. By default, the text in <th> elements are bold and centered.
<td>…</td> By default, the text in <td> elements are regular and left-aligned. Each table data/cell is defined with a <td> tag.
Taken from the text, here is a sample table:
<table>
<tr>
<th>Menu item</th>
<th>Calories</th>
<th>Fat (g)</th>
</tr>
<tr>
<td>Chicken noodle soup</td>
<td>120</td>
<td>2</td>
</tr>
<tr>
<td>Caesar salad</td>
<td>400</td>
<td>26</td>
</tr>
</table>
When placed on a website, this table will look like this (I have enlarged it so that you can see the detail:
NEW --> The Exercise 8-1 walkthrough is now available as a slide presentation.
NEW --> The Exercise 8-1 walkthrough is now available as a slide presentation.
Exercise 8-1 Walkthrough
Exercise 8-1 Walkthrough
Page 167
Page 167
Step 1
For this exercise, you will be writing the HTML markup to produce this table:
These are albums produced by the rock group The Beatles.
Step 2
To begin, open up your Sublime text editor. Then using File Explorer, go to your Dropbox folder, and then to your 1. Class text Exercises subfolder. Finally, open your Ch08 folder and bring the exercise 8-1.txt file into Sublime. The contents of this document are as follows:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Exercise 8-1</title>
<style>
td, th {border: 1px solid gray;}
</style>
</head>
<body>
<h1>Exercise 8-1</h1>
Album
Year
Rubber Soul
1965
Revolver
1966
Sgt. Pepper's<
1967
The White Album<
1968
Abbey Road
1969
</body>
</html>
The markup in the style element, td, th {border: 1px solid gray;}, is telling us that each cell in the table will have a solid grey border, and the cells will all be spaced apart by one pixel. Note, in a later chapter we will learn about referencing colors using special hex codes. The color grey is equivalent to #CCC in hex. Hence, the markup in the style section could also be td, th {border: 1px solid #CCC;}.
Step 3
Now save the exercise 8-1.txt file into your Chapter 8 folder, as exercise 8-1.html.
Step 4
Now you will need to fill in the missing table elements. Just below the <h1> header, add the <table> opening tag.
</head>
<body>
<h1>Exercise 8-1</h1>
<table>
Album
Year
Step 5
And just above the closing </body> tag, add the closing </table> tag.
Abbey Road
1969
</table>
</body>
</html>
Step 6
There are six table rows in this table. Add the opening and closing <tr> tags to each row.
<table>
<tr>
Album
Year
</tr>
<tr>
Rubber Soul
1965
</tr>
<tr>
Revolver
1966
</tr>
<tr>
Sgt. Pepper's
1967
</tr>
<tr>
The White Album
1968
</tr>
<tr>
Abbey Road>
1969
</tr>
</table>
Step 7
Next, the two headings, Album and Year, need the <th> heading tags.
<table>
<tr>
<th>Album</th>
<th>Year</th>
</tr>
Step 8
And now finally, each of the remaining table data cells needs a <td> and </td> tag.
<table>
<tr>
<th>Album</th>
<th>Year</th>
</tr>
<tr>
<td>Rubber Soul</td>
<td>1965</td>
</tr>
<tr>
<td>Revolver</td>
<td>1966</td>
</tr>
<tr>
<td>Sgt. Pepper's</td>
<td>1967</td>
</tr>
<tr>
<td>The White Album</td>
<td>1968</td>
</tr>
<tr>
<td>Abbey Road></td>
<td>1969</td>
</tr>
</table>
Step 9
Now save the the exercise 8-1.txt into your Ch08 folder, as exercise 8-1.html. Open up your exercise 8-1.html file in a web browser to verify it looks as shown below.
Now save the the exercise 8-1.txt into your Ch08 folder, as exercise 8-1.html. Open up your exercise 8-1.html file in a web browser to verify it looks as shown below.
Read page 168 before starting Exercise 8-2.
Read page 168 before starting Exercise 8-2.
Exercise 8-2 What you need to know for this exercise
Exercise 8-2 What you need to know for this exercise
One fundamental feature of table structure is cell spanning, which is the stretching of a cell to cover several rows or columns.
Column spans, created with the colspan attribute cause the cell to span over several columns.
The the number of cells in the row with the most cells, equals the number of columns in that table.
The cells that are spanned over are not included in the table, i.e. there is no need for a blank <td></td> element.
Exercise 8-2 Walkthrough
Exercise 8-2 Walkthrough
Page 168
Page 168
Step 1
For this exercise, you will be writing the HTML markup to produce this table:
Step 2
To begin, open up your text editor, and bring into the editor the exercise 8-2.txt file that's in the Ch08 folder. The contents of this document are as follows:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Exercise 8-2</title>
<style>
table td, th {border: 1px solid gray;}
</style>
</head>
<body>
<h1>Exercise 8-2</h1>
7:00pm
7:30pm
8:00pm
The Sunday Night Movie
Perry Mason
Candid Camera
What's My Line
Bonanza
The Wackiest Ship in the Army
</body>
</html>
Step 3
The three cells with the program times are header cells, so the <th> element is needed. Below the Exercise 8-2 h1 heading, add the <table> opening tag, and the first table row of the headings. This table has three columns.
<body>
<h1>Exercise 8-2</h1>
<table>
<tr>
<th>7:00pm</th><th>7:30pm</th><th>8:00pm</th>
</tr>
Step 4
The next row, has a single cell with the text, "The Sunday Night Movie". This cell will have to span all three columns of this table. Using the colspan attribute, add the next row to the table.
<h1>Exercise 8-2</h1>
<table>
<tr>
<th>7:00pm</th><th>7:30pm</th><th>8:00pm</th>
</tr>
<tr>
<td colspan="3">The Sunday Night Movie</td>
</tr>
Step 5
The next row has three cells. Each of these will need their own <td> and </td> tags.
<tr>
<td>Perry Mason</td>
<td>Candid Camera</td>
<td>What's My Line</td>
</tr>
Step 6
Finally, the last row only has two cells. The last cell, containing the text, "The Wackiest Ship in the Army", will span two columns. Finally, add the ending </table> tag below that table row.
<tr>
<td>Bonanza</td>
<td colspan="2">The Wackiest Ship in the Army</td>
</tr>
</table>
</body>
</html>
Step 7
Now save the exercise 8-2.txt file into your Ch08 folder, as exercise 8-2.html. Open up your exercise 8-2.html file in a web browser to verify it looks as shown below.
Now save the exercise 8-2.txt file into your Ch08 folder, as exercise 8-2.html. Open up your exercise 8-2.html file in a web browser to verify it looks as shown below.
Read page 169 before starting Exercise 8-3.
Read page 169 before starting Exercise 8-3.
Exercise 8-3 What you need to know for this exercise
Exercise 8-3 What you need to know for this exercise
Row spans, created with the rowspan attribute, work just like column spans, but they cause the cell to span downward over several rows.
Rows always span downward, so the spanned cell is part of the first row in which it appears, even though its content is vertically centered.
Cells that are spanned over do not appear in the table markup, i.e. there is no need for a blank <td></td> element.
Exercise 8-3 Walkthrough
Exercise 8-3 Walkthrough
Page 169
Page 169
Step 1
For this exercise, you will be writing the HTML markup to produce this table:
Step 2
To begin, open up your text editor, and bring into the editor the exercise 8-3.txt file. The contents of this document are as follows:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Exercise 8-3</title>
<style>
table td, th {border: 1px solid gray;}
</style>
</head>
<body>
<h1>Exercise 8-3</h1>
apples
oranges
pears
bananas
pineapple
lychees
</body>
</html>
Step 3
Rows always span downward, so the “oranges” cell is part of the first row even though its content is vertically centered. The first row also includes the apples and the pears cells. Using the rowspan attribute, add the first row of the table. Below the Exercise 8-3 h1 heading, add the <table> opening tag, and the first table row.
<body>
<h1>Exercise 8-3</h1>
<table>
<tr>
<td>apples</td>
<td rowspan="3">oranges</td>
<td>pears</td>
</tr>
Step 4
The next row is a little tricky. The cell with "pineapple" in it needs to span two rows, the "bananas" and the "lychees" cells. Using the rowspan attribute in the "pineapple" cell, add the next row to the table.
<tr>
<td>bananas</td>
<td rowspan="2">pineapple</td>
</tr>
Step 5
The final row has only one cell, the "lychees" cell. Add this to the table. Remember, you do not have to add the cells that are spanned over in the table. Finally, add the </table> closing tag.
<tr>
<td>lychees</td>
</tr>
</table>
Step 6
Now save the exercise 8-3.txt file into your Ch08 folder, as exercise 8-3.html. Open up your exercise 8-3.html file in a web browser to verify it looks as shown below.
Now save the exercise 8-3.txt file into your Ch08 folder, as exercise 8-3.html. Open up your exercise 8-3.html file in a web browser to verify it looks as shown below.
Read pageS 170-173 before starting Exercise 8-4.
Read pageS 170-173 before starting Exercise 8-4.
Exercise 8-4 What you need to know for this exercise
Exercise 8-4 What you need to know for this exercise
The <caption> element is used to place a title or description on top of the table.
When used, the <caption> element must be the first thing within the table element.
Here is an excellent example of the <caption> element:
https://www.w3schools.com/tags/tag_caption.asp
The scope attribute associates a table header with the row, column, group of rows (such as tbody), or column group in which it appears by using the values row, col, rowgroup, or colgroup, respectively.
Here is an excellent example of the scope attribute:
https://www.w3schools.com/tags/att_scope.asp
For really complicated tables in which scope is not sufficient to associate a table data cell with its respective header (such as when the table contains multiple spanned cells), the headers attribute is used in the td element to explicitly tie it to a header’s id value.
Here is an example of the headers attribute:
https://www.w3schools.com/tags/att_td_headers.asp
Here is a further definition of what a header attribute does taken from this source:
The objective of this technique is to associate each data cell (in a data table) with the appropriate headers. This technique adds a headers attribute to each data cell (td element). It also adds an id attribute to any cell used as a header for other cells. The headers attribute of a cell contains a list of the id attributes of the associated header cells. If there is more than one id, they are separated by spaces.
This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the th element alone or the th element with the scope attribute. Using this technique also makes these complex relationships perceivable when the presentation format changes.
You can describe rows or groups of rows as belonging to a header, footer, or the body of a table by using the thead, tfoot, and tbody elements, respectively. Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
Columns are implied by the number of cells (td or th) in each row. You can semantically group columns (and assign id and class values) using the colgroup element.
Exercise 8-4 Walkthrough
Exercise 8-4 Walkthrough
Page 174
Page 174
Step 1
For this exercise, you will be writing the HTML markup to produce this table:
Step 2
To begin, open up your text editor, and bring into the editor the exercise 8-4.txt file from the Ch08 folder. The contents of this document are as follows:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Table Challenge</title>
</head>
<body>
<h1>Exercise 8-4</h1>
</body>
</html>
Step 3
First, we need to add the following CSS style sheet rules to the document. CSS style sheet rules will be covered in a later chapter.
The line in the style section, td, th { border: 1px solid #CCC; } means that a solid Chinese silver colored border 1 pixel wide will apply to all td and th elements.
The line in the style section, table { border: 1px solid black; } means that a solid black outline, 1 pixel wide, will be placed around the entire table.
<head>
<meta charset="UTF-8">
<title>Table Challenge</title>
<style>
td, th { border: 1px solid #CCC; }
table { border: 1px solid black; }
</style>
</head>
Step 4
The table has five rows, so we will first add the table element and its table row tags <tr>..</tr>.
<body>
<h1>Exercise 8-4</h1>
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
Step 5
The first cell (the one in the top-left corner) spans down the height of two rows, so it gets a rowspan attribute
<body>
<h1>Exercise 8-4</h1>
<table>
<th rowspan="2"> </th>
<tr></tr>
Step 6
The cell in the second column of the first row containing the text, "A common header for two subheads", spans over the width of two columns, so it gets a colspan attribute:
<body>
<h1>Exercise 8-4</h1>
<table>
<th rowspan="2"> </th>
<th colspan="2">A common header for two subheads</th>
<tr></tr>
Step 7
The cell in the third column ("Header 3") has been spanned over by the colspan we just added, so we don’t need to include it in the markup. The cell in the fourth column also spans down two rows.
<body>
<h1>Exercise 8-4</h1>
<table>
<th rowspan="2"> </th>
<th colspan="2">A common header for two subheads</th>
<th rowspan="2">Header 3</th>
</tr>
Step 8
Continue filling in the th and td elements for the remaining four rows of the table. The first and last cells in the second row have been spanned over. Also, if it’s bold in the example, it needs to be a th header.
<body>
<h1>Exercise 8-4</h1>
<table>
<tr>
<th rowspan="2"> </th>
<th colspan="2">A common header for two subheads</th>
<th rowspan="2">Header 3</th>
</tr>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>data A1</td>
<td>data A2</td>
<td>data A3</td>
</tr>
<tr>
<td>data B1</td>
<td>data B2</td>
<td>data B3</td>
</tr>
<tr>
<td>data C1</td>
<td>data C2</td>
<td>data C3</td>
</tr>
</table>
Step 9
The title of the table is placed over the table by using the caption element.
<body>
<h1>Exercise 8-4</h1>
<table>
<caption>Your Content Here</caption>
<tr>
<th rowspan="2"> </th>
<th colspan="2">A common header for two subheads</th>
<th rowspan="2">Header 3</th>
</tr>
Step 10
The scope attribute is used to make sure that the Thing A, Thing B, and Thing C headers are associated with their respective rows.
<body>
<h1>Exercise 8-4</h1>
<table>
<caption>Your Content Here</caption>
<tr>
<th rowspan="2"> </th>
<th colspan="2">A common header for two subheads</th>
<th rowspan="2">Header 3</th>
</tr>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<th scope="row">Thing A</th>
<td>data A1</td>
<td>data A2</td>
<td>data A3</td>
</tr>
<tr>
<th scope="row">Thing B </th>
<td>data B1</td>
<td>data B2</td>
<td>data B3</td>
</tr>
<tr>
<th scope="row">Thing C</th>
<td>data C1</td>
<td>data C2</td>
<td>data C3</td>
</tr>
</table>
Step 11
The table has two column groups: one column for headers, the rest for data. For greater semantic clarity use the span attribute (there is no need for individual column identification).
<body>
<h1>Exercise 8-4</h1>
<table>
<caption>Your Content Here</caption>
<colgroup span="3"></colgroup>
<tr>
<th rowspan="2"> </th>
<th colspan="2">A common header for two subheads</th>
<th rowspan="2">Header 3</th>
</tr>
Step 12
Now save the exercise 8-4.txt file into your Ch08 folder, as exercise 8-4.html. Open up your exercise 8-4.html file in a web browser to verify it looks as it does below. If not, go back and adjust your markup. The final document will look like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
td, th { border: 1px solid #CCC; }
table { border: 1px solid black; }
</style>
</head>
<body>
<h1>Exercise 8-4</h1>
<table>
<caption>Your Content Here</caption>
<colgroup span="3"></colgroup>
<tr>
<th rowspan="2"> </th>
<th colspan="2">A common header for two subheads</th>
<th rowspan="2">Header 3</th>
</tr>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<th scope="row">Thing A</th>
<td>data A1</td>
<td>data A2</td>
<td>data A3</td>
</tr>
<tr>
<th scope="row">Thing B </th>
<td>data B1</td>
<td>data B2</td>
<td>data B3</td>
</tr>
<tr>
<th scope="row">Thing C</th>
<td>data C1</td>
<td>data C2</td>
<td>data C3</td>
</tr>
</table>
</body>
</html>
Report abuse