Chapter 7 Tables and Layout

Transcription

1 Chapter 7 Tables and Layout Presented by Thomas Powell Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Powell We want Layout! Design requirements: pixel level layout, fonts, precise text control Three basic approaches to improving Web page design 1. (X)HTML approach New tags Tricks and workarounds like invisible pixels 2. Binaries Huge images for pages Flash 3. Style sheets + (X)HTML The most common approach is still the HTML approach and will probably continue for at least a little while longer as CSS becomes widely and better supported in browsers and designers and tools become more CSS aware Introduction to Tables Tables really should be used for data tables (e.g. spreadsheet); however, we will see they can also be used for layout Basic Table Tag Overview <table> tag surrounds the whole table indicates a table row <td> indicates table data (a cell) 1

2 Simple Table Example <table border= 1 > <td>cell1 </td> <td>cell 2</td> <td>cell 3 </td> <td>cell 4</td> Table Syntax <th> element can be used anywhere the <td> element is to create a header cell. General difference between <th> and <td> is that <th> tends to center and bold its contents <th>fruit </th> <th>color</th> <td> Apple</td> <td> Red</td> Table Syntax, contd. The <caption> element can be used within a table to add a caption to a table. <table border="1"> <caption>basic Fruit Comparison Chart</caption> <th>fruit</th> <th>color</th> HTML 4 also introduces a variety of other tags such a <tbody>, <tfoot>, <colgroup>, and <col> 2

3 Rowspan and Colspan When you want cells to be bigger you should use the rowspan and colspan attributes to size the cells larger The idea is that the particular cell these attributes are placed on will span the number of rows or columns specified <table> <td colspan= 2 >I m big</td> <Tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> Examples Table Widths The width attribute can be used on the <table> tag itself as well as individual <td> elements to set the size of the table in pixels or percentage. <table width= 600 > <table width= 100% > Pixels allow for absolute layouts, but may not size well If you use pixels make sure that cell and table values add up correctly <table width= 400 > <tr ><td width= 200 >Good</td><td>Table </td></ tr > Percentage values allow for stretchable tables If you use empty cells put a <br /> or in it to keep the browser from collapsing the cell. <td width= 50 > </td As you lay tables out you need to watch to specify space between cells and between cell borders and their contents. Use cellspacing and cellpadding attributes to accomplish this. Tables Contd. It is possible to set backgrounds and background colors for cells and tables using the background and bgcolor attributes. <td bgcolor= red > <td background= image.gif > Basic table alignment is possible - <table align= left border= 0 width= 300 > 3

4 Tables for Layout The goal is to take a design layout created in a program like Fireworks and Photoshop and then slice it into pieces You want to make a table to hold the pieces Set cell widths and table widths to keep things in position Make sure that the cells bump up next to each other by setting cellspacing and cellpadding to 0 Be aware that you will need to set valign and align on some cells You may want to have backgrounds or backgroundcolors to finish the design Cell Alignment, Cellpadding and Cellspacing - Cells defined by <td> or <th> are generally aligned horizontally by setting the align attribute to left, right, or center with left being the default. <table> < tr > <td align= left >Left </td> <td align= center >Center</td> <td align= right >Right</td> </tr > < tr > <td valign= top height= 100 >Top</td> <td valign= middle >Middle</td> <td valign= bottom > Bottom</td> </tr > - The space between cells in a table is controlled by the cellspacing attribute for <table>. Colored Tables and Cells Table elements also can be assigned background colors using the bgcolor attribute. The bgcolor attribute is valid for <table>,, <th>, and <td>. <table border= 1 cellspacing = 0 cellpadding= 8 bgcolor= green > <th bgcolor= lightblue >Lightblue</th> <th bgcolor= lightblue >Lightblue</th> <th bgcolor= lightblue >Lightblue</th> Other attributes defined are bordercolor, and in IE4 and higher bordercolorlight and bordercolordark. 4

5 Background Images in Tables Using the background attribute, it is also possible to apply background images to tables and table cells. <table width= 100% border= 1 cellpadding= 0 cellspacing= 0 background= tabletile.gif > (see example on p 210) Applied Layout Using Tables Centered Layout To create a centered region with content that looks like a print ed page on a background color, use a single cell table with set width, alignm ent, and padding. <table width="80%" align="center" cellpadding="10"> <td bgcolor="white"> <h1 align="center">heading</h1> <hr width="80%" /> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla nulla. Ut vel magna eu velit tristique tempus. Nunc a wisi at ligula euismod tempus. Curabitur vestibulum viverra tellus. Phasellus vestibulum. Duis justo...</p> more content </td> Applied Layout Using Tables, contd. Top-Left-Bottom TLB Layout TLB design is very commonly used on the Web. TLB layout provides for secondary navigation on the left of the content as well as backup navigation or extra information at the bottom of the page. Stretchable Table Layout Another common design is one that stretches to fit the available screen region. The so-called fluid or stretchable design requires that some cells be set with values and others not, to be elastic in response to available screen width. 5

6 Complex Table Layouts It is also possible to apply tables to layouts in a more complicated fashion. Layouts combining text and images can be created using large graphics that incorporate text, but this approach produces pages that are slow to download. Advanced Data Tables Table Tips Set border on to see the cells Don t nest tables if you can avoid it Think about stacking tables Specify as many widths as you can Create stretch zones Use shim gifs to hold cells open may work as well but GIFs never fail Comment your tables 6