XHTML 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 tag. Open your template.htm file and create the following table with me.

Creating a Table My First Table Name Class (cont’d) Designates a new row in the table Designates headings Designates the end this row Designates start of table

Creating a Table Sue sophomore Joe junior Designates a table data cell

Creating a Table Sally senior Specifies the end of this table

Table Cells table data. This element creates individual cells in a row. Content of a table goes in this element. table heading. This element is like the, 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: 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: 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: 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: Size is the width of the table, either in pixels or as a percentage of the display area. Example

Caption Element A table caption is used to tell the reader what the table is for. The element is placed immediately after the tag. Example Figure 1 – 2004 Profit

Cell Alignment Attributes You can align individual cells in order to make your table more readable. Defaults Headings - centered, vertically and horizontally Cells and - centered vertically, left-aligned horizontally

Cell align Attributes To change the default horizontal alignment of a cell use the align=“alignment” attribute with the, or 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: table {background-color:blue; color: white; } th {background-color:gold; color: navy; } caption {color: navy; } (cellspacing=“0”)

Table colors Use an inline style (the style attribute) to change one particular cell. Example: Cell 4

Empty Cell A element that has no content will not display correctly Use as the content

Table Summary - the start and end of a table - the start and end of a row in the table - a heading box on the table - a data cell in a table row - a description for your table

Attributes for 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. 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 or tags. Examples The number indicates the number of rows or columns to span

rowspan Span Span

colspan Span Span

Spanning Rows & Columns

Let’s create the following:

Set up the table: Spanning columns and rows Race Results

First row Runner needs to span 2 cols Runner Time Origin

Second row Men spans 3 rows Men 1. Peter Teagan 2:12:34 San Antonio, Texas

Rows 2 and 3 2. Kyle Wills 2:13:05 Billings, Montana 3. Jason Wu 2:14:28 Cutler, Colorado

Complete the table

Assignment #2 Reproduce a TV programming schedule for one week.