1. 10/4/2015Tables1 Spring, 2008 Modified by Linda Kenney 4/2/08

2. 10/4/2015Tables2 An overview of tables Tables are used to organize info along two dimensions at once.  Tables are intended to organize data into rows and columns.  However, many Web authors also use tables to layout the elements that make up a page. This use of tables is not recommended by the XHTML standards, since it hinders accessibility and presents difficulties for certain types of browsers. For this reason, the use of Cascading Style Sheets (CSS) is recommended instead. But since the use of tables for page layout is currently widespread, we will cover it.

3. 10/4/2015Tables3 Table basics Tables are used to arrange data along two dimensions simultaneously. In other words, tables should be used when you have info to present that could benefit from being organized into rows and columns. In XHTML, a table is created using a container element. Within a element there must be one or more containers, each of which represents a single row of the table.

4. 10/4/2015Tables4 Rows Each element should contain one or more and/or containers, each of which represents a cell within that row. What goes within each cell is pretty much up to you. XHTML places virtually no limitations on what you can place within a table cell. You can even put tables inside the cells of other tables, creating nested tables. (Note: Nested tables can be a lot of work for the browser to render and will therefore cause delays in your users’ experience.)

5. 10/4/2015Tables5 Rows (cont.) Each row within a given table should contain the same number of cells. The cells in a row may be any combination of table header cells ( ) and/or table data cells ( ). Table header cells are meant to be used to label rows or columns of the table. Table data cells are meant to contain the actual data. So, a typical table has more table data cells than table header cells. If all rows do not have the same number of cells, the results are likely to be unpredictable across browsers.

6. 10/4/2015Tables6 A simple table Here’s an example of a very simple table with four rows and four columns. Note that there is one element for each row.  Each row contains four cells.  All the cells in the first row are elements.  The first cell in each row is also a element.  The remaining cells are elements.

7. 10/4/2015Tables7 Captions A table may have a caption that describes its overall purpose. Captions are added with the container element.  The element must appear immediately after the start tag.

8. 10/4/2015Tables8 Frames and rules Every table has a frame and rules. The frame surrounds the table. The rules divide the cells from one another. Unless you specify otherwise, the frame and rules for a table are invisible.  While it is often useful to have the frame and rules remain invisible, it is sometimes useful to make them visible. This is accomplished using attributes of the element.

9. 10/4/2015Tables9 Using the border attribute There are three different attributes of the element that are used to control the frame and rules. Most commonly, the border attribute is used.  This attribute must be assigned a numeric value. If the value is 0, the frame and rules remain invisible. Any value greater than 0, makes the frame and rules visible and specifies the width of the frame in pixels. Although non-zero values make rules visible, the value of the border attribute has no effect on the width of the rules.

10. 10/4/2015Tables10 Using the frame attribute For more specific control over which parts of the frame are shown, use the element’s frame attribute.

11. 10/4/2015Tables11 Using the rules attribute For greater control over which rules are shown, use the element’s rules attribute.

12. 10/4/2015Tables12 Using the cellspacing attribute Use the element’s cellspacing attribute to control the thickness (in pixels) of the table’s rules. (default value is 2 pixels) The rules occupy space even when they are invisible.  Therefore, the value of the cellspacing attribute can also be used to control the space between cells. Note that there are rules around all cells, so cellspacing also applies between the frame and the cells on the outer edges of the table.

13. 10/4/2015Tables13 More table attributes cellpadding – distance in pixels between the cell contents and the edge of the cell. (default value is 1 pixel) width – width of table in pixels or percentage. If not included, browser decides. Best to use percentage. align – use the values “right”, “center”, “left” (“left” is default)

14. 10/4/2015Tables14 Attributes for rows and cells align valign – vertical alignment. Values are “top”, “middle”, “bottom”

15. 10/4/2015Tables15 See example: http://pubpages.unh.edu/~ltv6/samples/liststab les.html

16. 10/4/2015Tables16 Spanning rows and columns By default, each cell within a table occupies one row and one column. It is possible, however, to have cells span multiple rows and/or columns.  The and elements accept two attributes to accomplish this. Use the rowspan attribute to specify how many rows a cell should span. Use the colspan attribute to specify how many columns a cell should span.

17. 10/4/2015Tables17 Page layout Page layout refers to the process of organizing the components of a page. A browser generally renders the elements of a page as it encounters them in the XHTML source. Browsers render page components side by side to the extent permitted by the window width and then proceed with any remaining items on the next line. Specifying which items should be side by side or one over the other is exactly what a table is meant to accomplish. So, tables have been commonly used by Web authors as a means of specifying the layout of Web pages. It is not recommended by the standards. The standards recommend using CSS for this purpose.

18. 10/4/2015Tables18 Reasons to use tables for page layout Most importantly, they work. Virtually all visual browsers in use today support tables. They do not all reliably support the CSS alternatives for page layout. Table cells may contain virtually anything that can appear within a element.  That includes paragraphs, headings, line breaks, logical divisions, horizontal rules, images, and more, even nested tables. Table cells expand as necessary to accommodate whatever is placed within them. So, they are very flexible. Table cells can span multiple rows and/or columns. This makes it possible to create very complex arrangements of cells. When used for page layout, tables establish a structural framework for Web pages.  When the same structural framework is used as the basis of several pages, those pages have an inherent structural consistency.

19. 10/4/2015Tables19 Reasons to avoid tables for page layout Although reasonably flexible, tables are fundamentally limited to an underlying grid-like arrangement of items.  While this level of flexibility is better than nothing, it is far from ideal.  The positioning capabilities of CSS are far more powerful and flexible. Non-visual browsers (or visual browsers with limited screen capabilities) expect tables to be used to present tabular data.  When tables are used for page layout, such browsers are unable to accommodate them properly, leaving the page virtually inaccessible. The use of tables for page layout often results in delays in the rendering process.  Before it can display a page based on a table, a browser must calculate the size of each cell within that table.  In many cases, this might involve waiting until additional resources have been retrieved from the server.  This delay can be compounded significantly by the use of nested tables.

20. 10/4/2015Tables20 See http://pubpages.unh.edu/~ltv6/cis599/samples/chapter6/ http://pubpages.unh.edu/~ltv6/samples/tables/

21. 10/4/2015Tables21 A page layout example – step 1 Generally, the first step in using a table for page layout is to sketch the general structure you envision for the page. Draw out the rough proportions of each component area on the page.  Label each component area as a reminder of the purpose that area is meant to serve.

22. 10/4/2015Tables22 A page layout example – step 2 The next step is to identify the number of rows and columns the underlying table requires. We need to know the number of rows and columns the table would require if it were a “regular” table.  We start with a “regular” table.  Then we make individual cells span multiple columns and or rows as necessary to establish the “irregular” table we need. To accomplish this, extend each line within the table so that it runs across the entire width or height of the table.  With each line extended, the underlying regular table will be easy to see.  In the example to the left, the table consists of six rows and three columns. We therefore know that our element will need to contain six elements.

23. 10/4/2015Tables23 A page layout example – step 3 Now we determine the rows and/or columns each cell must span to accomplish our goal For each component area in the sketch, use the line extensions to determine how many rows and/or columns it will need to span  Write your findings for each area right on the sketch.

24. 10/4/2015Tables24 A page layout example – step 4 We now have all the info we need to begin writing our table, working down row by row*