Table Types

---

There are four table types, defined by the way that each behaves when viewed in a browser.

• Fixed-width tables control the width of text content, to provide multicolumn text, or to force images together. A fixed-width table uses a pixel-based width. Text content within the cells of this table type wraps to maintain the table's width. However, if you place "hard" content with a total width wider than that set to the containing table, the cells and table expand to accommodate it. A fixed-width table forces a horizontal scrollbar to appear along the bottom edge of the browser window when that window is smaller than the width of the table. This scrollbar enables the user to see all the table content by scrolling. And, if the total height of the content expands the table vertically, a vertical scrollbar appears.

• Relative/percentage-width tables display content that adjusts to the width of the browser window. Use a relative table to display content that adjusts to the width of the browser window. A table with a percentage value for its width is said to be relative because its size adjusts according to the document's size within the browser's window. When the browser window is expanded, the table expands and vice versa. A relative table doesn't force a horizontal scrollbar unless the percentage value is set to greater than 100%. An exception to this rule occurs when the total width of the table's hard content, such as images, media, or other tables, is greater than the width of the browser window.

• Fit to data tables do not use a table width. Use this table to have the table collapse around the content, whatever its size. Different browsers render this table type in different ways. Be sure to test your page in your target browser(s) to see whether this table behaves as expected. Fit to data is most often used for dynamic content or when using the Insert Tabular Data tool in Macromedia Dreamweaver.

• Hybrid tables are percentage-based tables with at least one fixed-width column. This table is also knows as an AutoStretch, stretchy, or fluid table because the table and one or more of its columns stretch to fit the browser window while the remaining column(s) remain set to a specific width. This table type has the advantage of relative sizing with the control of fixed-width columns, but beware: its development and consistent rendering can be tricky.

  Cross-Reference 

  See the sidebar "Building the Hybrid Table in Standard Mode" to learn how to build the hybrid table used in the Habitat Alert's homepage.

• Nested tables, while not specifically a table type, enable you to place tables inside the cell of another table to form a nested table. Avoid excessive nesting of tables, as they slow down the rendering of your page in browsers. An occasional nested table is fine, but using multiple tables for modular page construction or through the use of Cascading Style Sheets (CSS) often works better.

---