1. Tables Teppo Räisänen LIIKE/OAMK 2011

2. The Role of a Table Tables are quite common in computing systems In XHTML tables are used for presenting tabular information formatting the layout of the page The original idea was to use tables strictly for tabular information

3. Browser Support Tables were not a part of the first HTML specification The modern browsers support use of tables Still there are problems with, e.g. Speech browsers Printouts of Web pages Mobile browsers

4. Implementation of Tables Most WYSIWYG-editors support drawing of tables in a design view One needs still to know the basics of table elements in XHTML level There are also other ways of formatting the layout (without tables)

5. The Structure of a Table Tables consists of rows which contain table cells Elements & are used The complete table is written using tag pair A simple table can be defined by these elements, without any use of attributes

6. Summary & Caption (Optional) Summary and caption attributes can be declared inside the table’s beginning tag Summary describes the nature and structure of the table Caption is used for the heading contents of the table

7. Thead & Tbody Thead element is used for the caption row of the table A tr element is written inside the thead tbody is used for the rest of the table’s contents

8. Tr, Th & Td Tr (table row) = a single row Th (table header cell) Td (table data cell) = a regural table cell Note: the browsers will format th & td cells differently by default

9. Table Formatting By default the td contents are aligned left align- & valign attributes can be used for changing the settings legal values for attributes are left, right & center The table’s alignment can be set using a align attribute

10. Attributes of a Table border width (px/%) cellpadding cellspacing bgcolor

11. Table Layout It is possible to create a Web page/site without any use of tables Tables are used to create sophisticated Web page layouts www.mtv3.fi http://www.ouka.fi/

12. Table Layout It is rather easy to copy a table layout from one site to another CSS/div –layout is meant to replace the use of table layout With both ways there are problems with browser support

13. Problems of Table Layout Absolute width values require a specific display resolution Absolute cell size values lead to problems when font sizes are enlargened Table layouts interfere the speech browsers (accessibility)

14. Problems of Table Layout The tables by themselves are not origins of problems, but rather the inappropriate use of them With tables the problem of using a XHTML element for formatting the output will always prevail

15. Solutions to Problems Avoid absolute values, use relative ones instead If a fixed table width is used, limit it to be relatively small (800 px, 640 px..) Leave enough of empty space inside table cells Use nested tables for declaring information structures