1. XHTML Tables

2. 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.

3. Creating a Table Designates start of 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

4. Creating a Table <tr> <td>Sue</td> <td>sophomore</td> </tr> <tr> <td>Joe</td> <td>junior</td> </tr> Designates a table data cell

5. Creating a Table <tr> <td>Sally</td> <td>senior</td> </tr> </table> Specifies the end of this table

6. 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

7. 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!

8. 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.

9. 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.

10. cellpadding vs. cellspacing cell spacing is between the border of each cell (blue) cell padding is between a cell’s contents and its border (orange) Cell Contents Cell Contents Cell Contents Cell Contents Cell border Table border

11. 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”>

12. 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>

13. 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

14. 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”.

15. Cell valign Attributes • Another attribute, valign=“alignment” allows you to control vertical alignment of cells. • Valid values for alignment are “top”,“middle”, and “bottom”.

16. align and valign values

17. 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.

18. 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”)

19. 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>

20. Empty Cell • A <td>element that has no content will not display correctly • Use &nbsp; as the content

21. 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

22. Attributes for <table><th><td><tr> • border • cellpadding • cellspacing • width • align • valign

23. 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)

24. 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.

25. 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

26. 1 2 Span 3 4 rowspan <tr> <td rowspan=“2”>Span</td> <td>1</td> <td>2</td> </tr> <tr><td>3</td> <td>4</td> </tr>

27. 1 Span 2 3 4 colspan <tr> <td colspan=“2”>Span</td> <td>1</td> </tr> <tr><td>2</td> <td>3</td> <td>4 </tr>

28. 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>

29. Let’s create the following:

30. Set up the table: <title>Spanning columns and rows</title> </head> <body> <table border="5" cellspacing="0“ cellpadding="4"> <caption>Race Results</caption> </table>

31. First row • Runner needs to span 2 cols <tr> <th colspan="2">Runner</th> <th>Time</th> <th>Origin</th> </tr>

32. 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>

33. 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>

34. Complete the table

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