35
XHTML Tables
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 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
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"> </td><td rowspan="2"> </td>
</tr><tr>
<td> </td><td> </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.
