XHTML

Tables

Tables Tables create little boxes in which

you can place things to keep them organized.

The little boxes are called table cells.

Tables are created using the <table> tag.

Open your template.htm file and create the following table with me.

Creating a Table

<table><caption>My First Table</caption><tr>

<th>Name</th><th>Class</th>

</tr>(cont’d)

Designates a new row in the table

Designates headings

Designates the end this row

Designates start of table

Creating a Table

<tr><td>Sue</td><td>sophomore</td>

</tr><tr>

<td>Joe</td><td>junior</td>

</tr>

Designates a table data cell

Creating a Table

<tr><td>Sally</td><td>senior</td>

</tr></table>

Specifies the end of this table

Table Cells <td></td> table data. This element

creates individual cells in a row. Content of a table goes in this element.

<th></th> table heading. This element is like the <td>, but also displays the text inside the cells as centered and boldface

Table Tag Attributes The table tag can have attributes

that specify additional formatting for the entire table.

Syntax:<table border=“size” >Try different size borders on your

table – try 1, 5, and 10. Tip: Set border="0" to display tables

with no borders!

cellspacing Attribute Cell spacing controls the amount of

space inserted between table cells.Syntax:<table cellspacing=“size”>Default size is 2 pixels.Experiment with cellspacing. (Don’t

delete the border attribute) Try values such as 0, 1, 5, and 10 pixels.

cellpadding Attribute Cell padding controls the space

between the table text and cell borders.

Syntax:<table cellpadding=“size”>Default size is 2 pixels.Experiment with cellpadding. Try

values such as 0, 1, 5, and 10 pixels.

cellpadding vs. cellspacing

Cell Contents

Cell Contents

Cell Contents

Cell Contents

cell spacing is between the border of each cell (blue)

cell padding is between a cell’s contents and its border (orange)Table borderCell border

Table width Attribute The syntax for specifying table size is:<table width=“size”>Size is the width of the table, either in

pixels or as a percentage of the display area.

Example<table width=“75%”><table width=“400”>

Caption Element A table caption is used to tell the

reader what the table is for. The <caption></caption> element is

placed immediately after the <table> tag.

Example<table><caption>Figure 1 – 2004 Profit</caption><tr>

Cell Alignment Attributes You can align individual cells in order

to make your table more readable. Defaults

Headings <th> - centered, vertically and horizontally

Cells <tr> and <td> - centered vertically, left-aligned horizontally

Cell align Attributes To change the default horizontal

alignment of a cell use the align=“alignment” attribute with the <th>, <tr> or <td> tags.

Where alignment is either “left”, “right” or “center”.

Cell valign Attributes Another attribute,

valign=“alignment” allows you to control vertical alignment of cells.

Valid values for alignment are “top”, “middle”, and “bottom”.

align and valign values

Table colors

You can also use style sheets to control table colors

You can change colors for the entire table, or for a given row, or even a single cell using CSS.

Table colors Use an internal (embedded) style

to change all tables Example:

<style type=“text/css”>

table {background-color:blue;color: white; }

th {background-color:gold;color: navy; }

caption {color: navy; }

</style>

(cellspacing=“0”)

Table colors Use an inline style (the style

attribute) to change one particular cell.

Example:<td style="background-color:#FFCC99;

color:navy">Cell 4</td>

Empty Cell A <td>element

that has no content will not display correctly

Use &nbsp; as the content

Table Summary <table> </table> - the start and end of

a table <tr> </tr> - the start and end of a row in

the table <th> </th> - a heading box on the table <td> </td> - a data cell in a table row <caption></caption> - a description

for your table

Attributes for <table> <th><td><tr>

border cellpadding cellspacing width

align valign

Assignment #1

Create a calendar page for the month you were born – use caption for the month.

Use styles for color. Add some text Add an image on your birthday To align the days to the top of the calendar,

use <tr valign=“top”>. To keep a border on a blank cell, use &nbsp;

for the text. (no breaking space)

Spanning Rows & Columns A basic table contains cells of data

arranged in columns and rows. Sometimes the contents of a cell

apply to more than one row or column.

You can mark a single cell to be part of multiple rows or columns – known as spanning.

Spanning Rows & Columns Spanning is done by using the

rowspan or colspan attributes in the <td> or <th> tags.

Examples<td colspan=“2”><td rowspan=“3”>

The number indicates the number of rows or columns to span

rowspan

<tr> <td rowspan=“2”>Span</td> <td>1</td>

<td>2</td></tr><tr><td>3</td>

<td>4</td> </tr>

1 2

3 4Span

colspan

<tr> <td colspan=“2”>Span</td> <td>1</td> </tr><tr><td>2</td>

<td>3</td><td>4

</tr>

1

2 3 4

Span

Spanning Rows & Columns<table border="1"><tr>

<td colspan="2">&nbsp;</td><td rowspan="2">&nbsp;</td>

</tr><tr>

<td>&nbsp;</td><td>&nbsp;</td>

</tr></table>

 

 

   

Let’s create the following:

Set up the table:

<title>Spanning columns and rows</title></head>

<body><table border="5" cellspacing="0“ cellpadding="4"><caption>Race Results</caption>

</table>

First row

Runner needs to span 2 cols<tr> <th colspan="2">Runner</th> <th>Time</th> <th>Origin</th></tr>

Second row Men spans 3 rows<tr> <th rowspan="3">Men</th> <td>1. Peter Teagan </td> <td>2:12:34 </td> <td>San Antonio, Texas </td></tr>

Rows 2 and 3

<tr> <td>2. Kyle Wills </td> <td>2:13:05 </td> <td>Billings, Montana </td></tr><tr> <td>3. Jason Wu</td> <td>2:14:28 </td> <td>Cutler, Colorado </td></tr>

Complete the table

Assignment #2

Reproduce a TV programming schedule for one week.