Week 5 Working with Tables

1. Week 5Working with Tables

2. Understanding Table Basics

3. Using Table Elements • To build effective page templates, you must be familiar with the HTML table elements and attributes • The <table> element contains the table information, which consists of table row elements <tr> and individual table data cells <td> • These are the three elements you will use most frequently when you are building tables

7. Basic Table Code <table border="1"> <tr><td>Breed</td><td>Description</td><td>Group</td> </tr> <tr><td>French Bulldog</td><td>Loyal Companion</td> <td>Non-Sporting</td></tr> <tr><td>Wheaten Terrier</td><td>High energy, friendly</td> <td>Terrier</td></tr> <tr><td>English Pointer</td><td>Hunting companion</td> <td>Sporting</td></tr> <tr><td>Australian Cattle Dog</td><td>Guarding, herding</td> <td>Working</td></tr> </table>

8. Captions and Table Header • <caption> lets you add a caption to the top or bottom of the table • By default, captions display at the top of the table; you can use the align=“bottom” attribute to align the caption at the bottom of the table • The <th> tag lets you create a table header cell that presents the cell content as bold and centered

10. Defining Table Attributes • Table attributes let you further define a number of table characteristics • You can apply attributes at three levels of table structure: global, row level, or cell level

11. Global Table Attributes • Global attributesaffect the entire table

12. Row-Level Table Attributes • Row-level attributesaffect the entire table

13. Cell-Level Table Attributes • Cell-level attributes affect only the contents of one cell

14. Spanning Columns • The colspan attribute lets you create cells that span multiple columns of a table • Column cells always span to the right

16. Spanning Rows • The rowspan attribute lets you create cells that span multiple rows of a table • Rows always span down

18. Formatting Tables

19. Choosing Relative or Fixed Table Widths • Set relative table widths as percentages in the table width attribute • If you choose relative table widths, your tables will resize based on the size of the browser window • Set absolute table widths as pixel values in the table width attribute • Fixed tables remain constant regardless of the browser window size

22. Determining the Correct Fixed Width for a Table • The most common width for page template tables is approximately 975 pixels • This width supports the 1024 x 768 screen resolution

24. Adding White Space in a Table • You can add white space into a table with the cellpadding and cellspacing attributes

27. Removing Default Table Spacing • Default spacing values are included in the table even when you don’t specify values for the table’s border, cellpadding, or cellspacing attributes • Depending on the browser, approximately two pixels are reserved for each of these values • You can remove the default spacing by explicitly stating a zero value for each attribute

30. Table Pointers for Well-Designed Tables

31. Table Pointers for Well-Designed Tables • Write code that is easy to read • Remove extra white spaces • Center tables to adapt to different resolutions • Stack tables for quicker downloading • Avoid nested tables • Use Cascading Style Sheets for table styles

32. Removing Extra Spaces • Always remove any leading or trailing spaces in your table cell content • These spaces cause problems when you try to join the contents of adjacent cells

34. Centering Tables • Centering a fixed table makes it independent of resolution changes, because the table is always centered in the browser window

36. Stacking Tables • Because of the way browsers display tables, it is better to build several small tables rather than one large one • This technique, called stacking tables, also can simplify your table design task, because smaller tables are easier to work with

38. Avoid Nesting Tables • Nesting tablesis the practice of placing an entire table within a table cell • Nested tables are not accessible to screen readers and other assistive devices • This technique is being replaced by newer techniques such as CSS positioning

40. Examples of Page Templates • The following templates cover a variety of page layout needs • You may choose to stack different templates on top of each other for more complex layouts

47. Summary • Plan your tables by sketching them out first • Use fixed table widths if you want to determine the size of your page rather than let the browser determine the width • Use relative widths if you want to build tables that resize with the browser window, wrapping your content to fit • Write table code that is easy to read, remove extra spaces, and choose whether to center or stack tables • Avoid using nested tables and use CSS whenever possible to add presentation style to tables

48. Summary • Work on your pages with the table borders turned on, which displays the cell boundaries • When you are finished with your layout, you can turn the borders off • Size your tables based on the page size you want to create • Use 1024 x 768 as your base screen resolution • In most cases you’ll set the width but not the height of your tables, allowing the content to flow down the page

49. Summary • Test your work! • Table settings, especially cell widths and heights, can vary based on the user’s browser