HTML WEB DESIGN

 

separator-blank.png

 

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?