Tables Teppo Räisänen LIIKE/OAMK 2011

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

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

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)

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

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

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

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

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

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

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

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

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)

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

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