Setting the Table Layout


Different browsers use different methods to calculate how a particular table should be displayed, with two primary table-layout (Table 9.1) methods favored:

Table 9.1. Table-Layout Values

VALUE

COMPATIBILITY

fixed

IE5.5[*], O5, S1.3, CSS2

auto

IE5.5[*], O5, S1.3, CSS2

inherit

IE5.5[*], O5, S1.3, CSS2


[*] For Windows only

  • Fixed method bases its layout on the width of the table and the width of columns in the first row. This method is generally faster than automatic.

  • Automatic uses the table column width along with the amount of content in the table data cell to calculate the final table data cell width. This will generally render more slowly than the fixed method, but it also produces more accurate results.

In this example (Figure 9.1), the same table code has had the fixed and automatic table-layout properties applied to it with obvious visual differences. Notice that although the word "Duchess" is cramped in the fixed version, there is plenty of space in the auto version.

Figure 1. Notice the word "Duchess" in the top table, which uses the fixed table layout method, is more cramped than the bottom table, which uses auto. Fixed table layout sets the width of the column arbitrarily.


To set the table layout method:

1.

table-layout:


Type the table-layout property name, followed by a colon (Code 9.1).

Code 9.1. The table-layout property lets you force the browser to use either the fixed or auto methods for rendering tables.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Setting the Table Layout</title> <style type="text/css" media="screen"> table {     width: 680px;     border: 2px solid red;     background-color: #fcc; } table.fixedWidth { table-layout: fixed; } table.autoWidth { table-layout: auto;} td {     width: 50px;     padding: 5px;     border: 1px solid red;     background-color: #fff; } th {      width: 50px;      padding: 5px; } </style> </head> <body> <table > <caption>Results from the Queens Croquet Tournament</caption> <tr><th></th><th>1</th><th>2</th><th>3</th> <th>4</th><th>5</th><th>6</th><th>7</th> <th>8< /th><th>Total</th> </tr><tr> <td>Alice</td> ... </tr><tr> <td>Queen</td> ... </tr><tr> <td>Jack</td> ... </tr><tr> <td>Duchess</td> ... </tr></table> <table > <caption>Results from the Queens Croquet Tournament</caption> <tr><th></th><th>1</th><th>2</th><th>3</th> <th>4</th><th>5</th><th>6</th><th>7</th> <th>8< /th><th>Total</th> </tr><tr> <td>Alice</td> ... </tr><tr> <td>Queen</td> ... </tr><tr> <td>Jack</td> ... </tr><tr> <td>Duchess</td> ... </tr></table> </body></html>

2.

fixed;


Type either of the following to specify which method you want used for laying out your table:

  • fixed, which will use the first row to calculate the overall width of table data cells in that column of the table.

  • auto, which will allow the browser to calculate the widths of table data cells based on their content and the overall width of the table.

Tips

  • Internet Explorer 5 for the Mac has some strange bugs when rendering tables using CSS and padding. Backgrounds will not fill the padded area of a table cell and cells will overlap.

  • Internet Explorer for Windows will automatically ignore the border set in CSS for empty data cells, but will apply the background color.





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net