1 / 49

Week 5 Working with Tables

Week 5 Working with Tables. Understanding Table Basics. Using Table Elements. To build effective page templates, you must be familiar with the HTML table elements and attributes

vangie
Download Presentation

Week 5 Working with Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

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

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

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

  7. Global Table Attributes • Global attributesaffect the entire table

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

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

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

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

  12. Formatting Tables

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

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

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

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

  17. Table Pointers for Well-Designed Tables

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

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

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

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

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

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

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

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

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

More Related