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 <tr> & <td> are used The complete table is written using

<table></table> 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

www.mtv3.fi http://www.ouka.fi/

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