Transcript 7Tables

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