HTML
WEB DESIGN
GUIDE – TABLES
II
- We will continue to work in webpage4.html.
- We will be adding to the bottom
of the document. In order to keep
the solutions shorter, we will use . . . to represent the content that
was already there before we started.
<html>
<head>
</head>
<body>
.
. .
</body>
</html>
|
STRETCHING
TABLE
·
Create
a table similar to the one in the code below.
Notice that the second data cell has a fair bit of content in it.
<html>
<head>
</head>
<body>
.
. .
<table border="1">
<tr>
<td>Wayne Gretzky</td>
<td>Gretzky is the greatest hockey
player of all-time leading the NHL in career goals, assists and
points. He also holds the record for
most goals, most assists and most points in a single season.</td>
</tr>
</table>
</body>
</html>
|
The
table in the code above is too elongated (too wide).
SPECIFYING
A TABLE WIDTH
·
To
avoid the table filling the entire width of the screen, we can specify its
width in the table tag. The width is
in pixels.
<html>
<head>
</head>
<body>
.
. .
<table border="1" width="500">
<tr>
<td>Wayne Gretzky</td>
<td>Gretzky is the greatest hockey player of all-time
leading the NHL in career goals, assists and points. He also holds the record for most goals,
most assists and most points in a single season.</td>
</tr>
</table>
</body>
</html>
|
SPECIFYING
A DATA CELL WIDTH
·
In
the table above, the first cell is squished so much that the two words in it
appear on different lines. We can fix
this by giving that cell a minimum width of 150 pixels. See below.
<html>
<head>
</head>
<body>
.
. .
<table border="1" width="500">
<tr>
<td width="150">Wayne
Gretzky</td>
<td>Gretzky is the greatest hockey player of all-time
leading the NHL in career goals, assists and points. He also holds the record for most goals,
most assists and most points in a single season.</td>
</tr>
</table>
</body>
</html>
|
TABLE
ALIGNMENT
·
We
can center a table on the screen using the align attribute.
<html>
<head>
</head>
<body>
.
. .
<table border="1" width="500" align="center">
<tr>
<td width="150">Wayne Gretzky</td>
<td>Gretzky is the greatest hockey player of all-time
leading the NHL in career goals, assists and points. He also holds the record for most goals,
most assists and most points in a single season.</td>
</tr>
</table>
</body>
</html>
|
BACKGROUND
COLOURS
- We can use the bgcolor attribute in the table tag, the tr tag and in the td tag.
- Copy and paste the following
table code to your html document and do the background colour changes below.
<table
border="1">
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>E</td><td>F</td><td>G</td><td>H</td></tr>
<tr><td>I</td><td>J</td><td>K</td><td>L</td></tr>
<tr><td>M</td><td>N</td><td>O</td><td>P</td></tr>
</table>
Changes to do:
- Make the entire table’s
background green.
- Make the top row’s background
yellow.
- Make the letter M’s cell
background yellow.
Try
to do this yourself before looking at the solution below. Your table should look like this:
Solution:
<html>
<head>
</head>
<body>
. .
.
<table
border="1" bgcolor="green">
<tr bgcolor="yellow"><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>E</td><td>F</td><td>G</td><td>H</td></tr>
<tr><td>I</td><td>J</td><td>K</td><td>L</td></tr>
<tr><td bgcolor="yellow">M</td><td>N</td><td>O</td><td>P</td></tr>
</table>
</body>
</html>
|
GOT EXTRA TIME?
·
Add
a <caption>Table caption</caption> between the <table> and
first <tr> tag. What does this do?
·
For
the first row of a table, instead of using <td> and </td> tags,
try using <th> and </th>
tags instead. This makes the content
headers. What impact does this have?
|