490 likes | 562 Views
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
E N D
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
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>
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
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
Global Table Attributes • Global attributesaffect the entire table
Row-Level Table Attributes • Row-level attributesaffect the entire table
Cell-Level Table Attributes • Cell-level attributes affect only the contents of one cell
Spanning Columns • The colspan attribute lets you create cells that span multiple columns of a table • Column cells always span to the right
Spanning Rows • The rowspan attribute lets you create cells that span multiple rows of a table • Rows always span down
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
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
Adding White Space in a Table • You can add white space into a table with the cellpadding and cellspacing attributes
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
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
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
Centering Tables • Centering a fixed table makes it independent of resolution changes, because the table is always centered in the browser window
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
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
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
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
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
Summary • Test your work! • Table settings, especially cell widths and heights, can vary based on the user’s browser