Tables and Lists

1. Tables and Lists

2. Are Tables still needed? Tables were once used to help structure and style our pages CSS now replaces most of the old uses for tables We can still use tables but should use CSS to structure and format our content When using tables, use CSS to add style and formatting

3. How Tables are being used One way tables are being used is with sliced graphics, which are placed within a table to maintain their layout and seamless appearance Another way tables are still being used are with forms to keep forms and their fields neatly organized Probably the most common use for tables is to display data in a tabular form

4. Tables being used with XHTML Displaying data in a tabular form is now one of the most common uses for tables Displaying data within a table mimics the appearance of spreadsheets Tables are made up of columns (vertical) and rows (horizontal) for displaying data in a useful and presentable way Many websites have to use tables in order to display their database data

5. Tables with XHTML A table consists of opening and closing elements <table></table> A table can contain rows (table rows) and cells (table data) within each row <table> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table> The above example contains two rows, with each each row containing two cells

6. Tables with XHTML A table consists of opening and closing elements <table></table> The cells in the first row in the table are often referred to as the table header cells, using the header tags (instead of <td>) will make any text inside these rows appear bold <tr> <th></th> </tr> Within the table tags you have table rows and within each row you have table cells, also known as table data or columns, you can have multiple table cells as well as multiple rows in your table <tr> <td></td> </tr>

7. Tables with XHTML Table example: <table> <tr><th></th><th></th></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table> Above Table has four rows, first row uses a header and each row has only two cells (two <td> elements or columns)

8. Table example with sample data <table> <tr><th>Artists</th><th>Songs</th></tr> <tr><td>Joe Smith</td><td>Singin</td></tr> <tr><td>Mary Time</td><td>Raps</td></tr> <tr><td>Tim Jazz</td><td>Happy</td></tr> </table>

9. Table example with sample data

10. <table summary=“”> Adding a table summary is optional and doesn’t appear in the webpage but helps with accessibility by screen readers <table summary=“table description would go here, this simply provides details of what is contained in our table, again most useful for those using screen readers”>

11. <caption></caption> Adding a table caption is optional but will display in the browser, usually above the table Caption goes inside the <table> elements <table> <caption>You can add the caption after the opening table tag, the caption will appear above the table</caption> <tr><th>Artists</th><th>Songs</th></tr> <tr><td>Joe Smith</td><td>Singin</td></tr> <tr><td>Mary Time</td><td>Raps</td></tr> <tr><td>Tim Jazz</td><td>Happy</td></tr> </table>

12. Styling tables, add style to CSS table { margin-left: 20px; margin-right: 20 px; border: thin solid black; caption-side: bottom; } td, th { border: thin dotted gray; padding: 5px; } caption { font-style: italic; padding-top: 8px; }

13. Styling the table using CSS, what is styled? Table is displayed with a thin black border Table cells have a thin dotted gray style border There is a margin on both sides of the table There is padding in each table cell Caption is also styled caption-side property displays caption at bottom of table

14. Table cells and their appearance Table cells can have padding, border, and border spacing td { border: 1px dotted red; padding: 5px; border-spacing: 5px; }

15. Table cells appearance Content PaddingContent Border-spacing Border

16. border-spacing: property The space in between the cells is known as border-spacing Table cells don’t have margins, they instead have spacing around their borders Defined over the entire table You can’t set the “margin” of an individual cell You can set a common spacing around all cells td { border-spacing: 5px; }

17. border-spacing: property There is a way to define different border spacing on the vertical than the horizontal td{ border-spacing: 10px 30px; }

18. border-spacing: property problems Limitations and problems with border spacing Border spacing not supported on Internet Explorer version 6

19. Border-collapse property An alternative to border-spacingis the border-collapse property Collapses the borders so that there is no border spacing at all Browser will ignore any border spacing you have set on the table Combines two borders that are right next to each other into one border Border-collapse property table{ border-collapse: collapse; }

20. Background-color property Adding color to a table can improve readability of the content The following adds a background color only to the table header cells th{ background-color: #cc6600; }

21. Background-color property Adding alternating colors to each row in your table Enables viewers to more easily read one row when multiple rows of content are being displayed Define a new class and call “rowcolor” .rowcolor { background-color: #fcba7a; }

22. Background-color property Add the class attribute to each alternating row you want colored <table> <tr><th>Artists</th><th>Songs</th></tr> <tr><td>Joe Smith</td> <td>Singin</td></tr> <tr class=“rowcolor” > <td>Mary Time</td><td>Raps</td></tr> <tr><td>Tim Jazz </td></tr> <tr><td>Happy</td></tr> <tr class=“rowcolor” > <td>Don Loud</td><td>Scremin</td></tr> </table>

23. rowspan attribute Using rowspan with tables enables a cell to span more than one row Useful for making table data appearance more readable and more presentable Use for visually showing data repeats of a span of rows without actually repeating data on each row A good example would be a class schedule where a class spans several hours

24. rowspan attribute <table> <tr><th>Monday</th><th>Tuesday</th></tr> <tr><td rowspan=“2” >GRC 275</td><td> open</td></tr> <tr><td>GRC 175</td></tr> <tr><td>GRC 103</td> <td rowspan=“2”>GRC 188</td> </tr> <tr><td>GRC 101</td></tr> <tr><td>GRC 156</td><td>GRC 182</td></tr> </table>

25. rowspan attribute When using rowspan the cells which rowspan is being applied to do not have <td> elements listed in the row(s) below them that are being spanned onto

26. rowspan attribute For example, the second row shown below has GRC 275 spanning two rows, so, the third row which shows GRC 175 doesn’t display a <td> for the GRC 275 cell from the row above, instead it is displaying a <td> for the other cell “open” which isn’t being spanned two rows <table> <tr><th>Monday</th><th>Tuesday</th></tr> <tr><td rowspan=“2” >GRC 275</td><td> “open”</td></tr> <tr><td>GRC 175</td></tr>

27. colspan attribute Using colspan with tables enables a column to span more than one column Useful for making table data appearance more readible and more presentable where a particular value spans more than one column

28. colspan attribute <table> <tr><th>Monday</th><th>Tuesday</th></tr> <tr><td colspan =“2”>GRC 275</td></tr> <tr> <td>GRC 175</td> <td>open</td> </tr> <tr> <td rowspan=“2”>GRC 188</td> </tr> <tr><td>GRC 101</td></tr> <tr><td>GRC 156</td><td>GRC 182</td></tr> </table>

29. colspan attribute When using colspan, the cells which colspan is being applied to remove the original columns <td> following the cell it was applied to

30. colspan attribute For example, the second row shown below has GRC 275 spanning two columns, so, the second column <td> which normally would show below Tuesday doesn’t display and therefore the second row only has one table cell listed <table> <tr><th>Monday</th><th>Tuesday</th></tr> <tr><td colspan =“2”>GRC 275</td></tr> <tr> <td>GRC 175</td> <td>open</td> </tr>

31. Using both colspan and rowspan attributes You can use both colspan and rowspan in the same table Make sure all the <td> account for both the row and column spans For example, remove <td>’s from both row and column where applicable for spans to occur

32. Changing text alignment You can change the alignment of the data in your table cells with the text-align and vertical-align CSS properties table { text-align: center; vertical-align: middle; }

33. XHTML allows table nesting You can nest a table within a table <table> <tr><th>Artists</th><th>Songs</th></tr> <tr><td>Joe Smith</td><td>Singin</td></tr> <tr><td>Mary Time</td><td> <table> <tr><td>Raps</td></tr> <tr><td>Poppin</td></tr> <tr><td>Happy Trails</td></tr> </table> </td></tr> <tr><td>Tim Jazz</td><td>Happy</td></tr> </table>

34. Overriding any inherited CSS Styles in our table If our main table has CSS styles, the nested table will inherit these same styles Add a descendant selector to specify style to the nested table table table tr { background-color: red; }

35. Overriding any inherited CSS Styles in our table There are several ways to style the nested table Alternatively we could have created a class .nestedtable { background-color: red; } Must also add the class to nested <table> element <table class=“nestedtable”>

36. You can style the table within a table <table> <tr><th>Artists</th><th>Songs</th></tr> <tr><td>Joe Smith</td><td>Singin</td></tr> <tr><td>Mary Time</td><td> <table class=“nestedtable”> <tr><td>Raps</td></tr> <tr><td>Poppin</td></tr> <tr><td>Happy Trails</td></tr> </table> </td></tr> <tr><td>Tim Jazz</td><td>Happy</td></tr> </table>

37. List Items within XHTML A list can be styled using CSS Lists display bullets next to each item Only a few properties specific to lists List-style-type property allows you to control the bullets used in your list <ul> <li>Monday</li> <li>Tuesday</li> <li>Wednesday</li> <li>Thursday</li> <li>Friday</li> </ul>

38. List-style-type property: Default appearance round li{ list-style-type: disc; }

39. List-style-type property: Appearance hollow circle li{ list-style-type: circle; }

40. List-style-type property: Appearance square li{ list-style-type: square; }

41. List-style-type property: Appearance none li{ list-style-type: none; }

42. List-style-type property: Appearance custom image li{ list-style-image: url(images/logo.gif); } -end