HTML Building Blocks

Tables II

Spanning a Cell across Two or More Columns

Spanning a Cell across Two or More Rows

Changing a table’s width and height

Changing a cell’s size

Aligning the contents of cells

Changing a cell’s colour

Using a Background Image

C& G Web DesignStoke-on-TrentCollege

Tables Part IIIvailo Chakarov

Tables II

Spanning a Cell across Two or More Columns

You can span a cell across two or more columns in order to represent certain information in your table in a better way.

In order to span a cell across two or more columns:

In the definition of your spanning cell, type either:

<th colspan="n" or

<td colspan="n"

where nis the number of columns the cell should span.

Type the cell’s contents.

Complete the rest of the table. Depending on how many columns your cell spans by, you will need to define m - n cells on the same row

wherem is the total number of columns on a row and

nis the number of columns the cell should span.

For example, if the total number of columns on a row is five and the number of columns that your cell spans is three, two more cells should be added on the same row, which contains the spanning cell.

Example

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

html xmlns=" xml:lang="en" lang="en">

<head>

<title>Spanning a Cell Across Two Columns</title>

</head>

<body>

<table border="2"

<tr>

<th colspan="2"> Animals </th>

</tr>

<tr>

<td> Tiger </td>

</tr>

<tr<td> Wolf</td>

<td> Elephant</td>

</tr>

</table>

</body>

</html>

Spanning a Cell across Two or More Rows

In addition to spanning a cell across two or more columns, you can span a cell across two or more rows as well in order to represent certain information in your table in a better way.

In order to span a cell across two or more rows:

In the definition of your spanning cell, type either:

<th rowspan="n" or

<td rowspan="n"

where nis the number of rows the cell should span.

Type the cell’s contents.

Complete the rest of the table. Depending on how many rows your cell spans by, you will need to define the right amount of cells in the next row.

For example, if you define a cell with a rowspan of 2, you will not need to define the corresponding cell in the next row.

Example

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

html xmlns=" xml:lang="en" lang="en">

<head>

<title>Spanning a Cell Across Two Rows</title>

</head>

<body>

<table border="2"

tr>

<th rowspan="2"> Animals</th>

</tr>

tr>

</tr>

</table>

</body>

</html>

Changing a table’s width and height

You can use the widthand height attributes to resize the whole table, or to define the dimensions of particular cells.

In order to change a table’s size in the opening table tag,

type width="x"height="y"

where x and ycan be an absolute value in pixels or

percentages that indicate how big the table should be

with respect to the full window size.

Example 1

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

html xmlns=" xml:lang="en" lang="en">

<head>

<title>Changing a table’s width and height</title>

</head>

<body>

<table border="2"width="300"height="300"

tr>

<th rowspan="2"> Animals</th>

</tr>

tr>

</tr>

</table>

</body>

</html>

Example 2

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

html xmlns=" xml:lang="en" lang="en">

<head>

<title> Changing a table’s width and height</title>

</head>

<body>

<table border="2"width="95%"height="100%"

tr>

<th rowspan="2"> Animals</th>

</tr>

tr>

</tr>

</table>

</body>

</html>

Example 1

Example 2

Changing a cell’s size

You can use the widthand height attributes to resize the whole table, or to define the dimensions of particular cells.

In order to change a cell’s size in the cell tag (<td> or </th>)

type width="x"height="y"

where x and ycan be an absolute value in pixels or

percentages that indicate how big the table should be

with respect to the full window size.

Example

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

html xmlns=" xml:lang="en" lang="en">

<head>

<title>Changing a Cell’s Size</title>

</head>

<body>

<table border="2"

tr>

<th rowspan="2"width="300" height="300"

Animals </th>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Aligning the contents of cells

Each browser displays the contents of the cells of a table in its own way. In order to gain a little more control over the alignment of the contents of a particular cell, you can use the align attribute.

In order to align the contents of cells horizontally:

type in the cell the tag align="direction"

where directioncan be one of these values:

left
right
center
justify

Example

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

html xmlns=" xml:lang="en" lang="en">

<head>

<title>Aligning the Contents of Cells</title>

</head>

<body>

<table border="2"

tr>

<th rowspan="2"width="150"

align="justify"> Animals </th>

</tr>

<tr>

</tr>

</table>

</body>

</html>

In order to align the contents of cells vertically:

type in the cell the tag valign="direction"

where directioncan be one of these values:

top
middle
bottom
baseline

Example

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

html xmlns=" xml:lang="en" lang="en">

<head>

<title>Aligning the Contents of Cells</title>

</head>

<body>

<table border="2"

tr>

<th rowspan="2"width="150"height="150"

align="justify"valign="bottom"> Animals </th>

<td align="right"valign="top"

width="150" height="150"> Bear</td>

</tr>

tr>

<td align="center"valign="middle"

width="150"height="150"> Fox</td>

</tr>

</table>

</body>

</html>

Changing a cell’s colour

You can change the colour of one or more cells in your table in order to set off important information in a table.

In order to change a cell’s colour:

Within the th> or <td> tag, type

bgcolor="colour"

where colourcan be the hexadecimal representation of your desired colour (e.g. #ff99ff) or one of the sixteen pre-defined colours (e.g. red, blue, magenta)

Example

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

html xmlns=" xml:lang="en" lang="en">

<head>

<title>Changing the Colour of a Cell</title>

</head>

<body>

<table border="2"

tr>

<th rowspan="2"width="150"height="75"

align="justify"bgcolor="blue"> Animals </th>

<td align="right"bgcolor="red"width="150"

height="75"Bear</td>

</tr>

tr>

<td align="center"bgcolor="#ff55de"

width="150"height="75"> Fox</td>

</tr>

</table>

</body>

</html>

Using a Background Image

You can create a background for your table or a cell, using an image.

In order to create a background image for a cell:

type<th background="image.gif"or

<td background="image.gif">

where image.gifis the name of the image you would like to use as a background for the cell.

In order to create a background image for a table:

typetable backrground="image.gif">or

table background="image.gif">

where image.gifis the name of the image you would like to use as a background for the cell.

Internet Explorer and Netscape Navigator would display the background image for the whole table in two different ways. Whilst Internet Explorer uses one image for the background, Netscape on the other hand copies the whole image into each cell individually.

Example

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

html xmlns=" xml:lang="en" lang="en">

<head>

<title>Using a Background Image</title>

</head>

<body>

table border="2"background="bgr05.gif"

tr>

<th rowspan="2"width="150"height="75"

align="justify"> Animals</th>

</tr>

<tr>

<td align="center"width="150"height="75"

background="bgrnd10.gif"> Fox</td>

</tr>

</table>

</body>

</html>

The address for the two image files used in the above example are as follows:

C& G Web DesignStoke-on-TrentCollege

Tables Part IIIvailo Chakarov