CoderTools Web site

HTML Tables - Introduction


Description


HTML Tables are used for a couple of reasons:

  a) to organise and layout sections of pages or whole pages.
  b) to display tabular lists.

Note: it is now considered a bit old hat to use tables for layout purposes instead look to css and div tags.


Examples

A table has three main tags,
  • <table> - this element marks the start and end of the table
  • <tr> - this element marks the start and end of a table row and always appears within a table element
  • <td> - this element marks the start and end of a table column and always appears within a table row element

An example table:

        
        <table border="1">
            <tr>
                <td>row 1 column 1</td>
                <td>row 1 colum 2</td>
            </tr>
            <tr>
                <td>row 2 column 1</td>
                <td>row 2 colum 2</td>
            </tr>
        </table>Give it a go!
        

This code displays like this:

row 1 column 1row 1 column 2
row 2 column 1row 2 column 2

Attributes of <table>


Name Values Description
align left|center|right align the table within the page or flow of text. The default is left. The flow of text will flow right of the table if this value is left
valign top|middle|bottom|baseline specifies the vertical alignment of the cells content within the row.
height number
% e.g. 50%
Specifies the height of the table.
width number
% e.g. 50%
Specifies the width of the table.
background url A url of an image to use as the background. The image is tiled if it is smaller than the table.
bgcolor #rrggbb or color name specifies the background color of the table. This value can be overridden by the bgcolor of the table row <tr> element.
border number size in pixels of the border. If this value is set to 0 then the border will not appear. The default is 1
bordercolor #rrggbb or color name specifies the background color of the border. This overrides the bgcolor of the table element.
cellpadding number size in pixels of the space between the content and the cell border. Default is 1
cellspacing number size in pixels of the space between cells. Default is 2
frame void
above
below
hsides
lhs
rhs
vsides
box
border
Specifies which table borders to draw the border. Void is default
rules none
groups
rows
cols
all
Specifies where to draw rules. None is the default value unless border is set to 1 or greater then the default is all.
hspace number the size in pixels of the space between the table and any page element to the left or right of the table.
vspace number the size in pixels of the space between the table and any page element to the top or bottom of the table.

12/14/2017 1:16:45 AM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP