TheWebsEye.com HTML tutorial



HTML TUTORIAL HTML EDITORS HTML BOOKS HTML RESOURCES



HTML TABLES

Tables are used to define the layout of text in web pages. Note that CSS is increasingly used to for positioning elements on a web page. There is no reason why both cannot be used.

open online HTML editor
Online editor Works only in IE - If you use another browser you can Download Web Page Teacher.

<TABLE> - this element is used to surround the other elements in a table. The table can have the following attributes - example. View the source code - click here.

border - this sets the width of the border around the table cells. If set to "0" then there will be no visible borders.
align="left|right" - this aligns the table to the left or right of the web page allowing text to flow around it
valign="top|bottom|center" - this aligns the text contained inside the table to the left or right of the table
width="value" - the width of the table, either as a fixed width in pixels or as a percentage of the browser width
height="value" - the height of the table, either as a fixed height in pixels or as a percentage of the browser height
bgcolor="#rrggbb" - this can specify the background color of a table, row or cell. The #rrggbb stand for the hexadecimal code for the color.
bordercolor="#rrggbb" - the color of the border
background="url" - this can specify the url of an image for the background or a table, row or cell - it will be tiled across all table cells if applied to the table.
cellpadding="value" - this specifies how much white space surrounds the contents of each cell. The default is 1.
cellspacing="value" - this specifies how much white space there is between each cell in the table. The default is 2.

<TR> - used to contain a row in a table. The number of rows in a table are the number of TR elements contained in the table.- example. Apart from the cellpadding and cellspacing attributes, this element can take the same attributes defined for the TABLE element (above). View the source code - click here.

<TD> - represents a cell in a table row. The number of columns in a table are the number of TD elements contained in the table row. Each table row should contain the same number of TD elements. If table rows have different numbers of table cells, the data may be mis-aligned and the width of the table will be set to the width of the table row with the most TD elements - example. Apart from the cellpadding and cellspacing attributes, this element can take the same attributes defined for the TABLE element (above). View the source code - click here.

<TH> - can be used instead of TH for the first row of a table. The contents are displayed in BOLD - example. View the source code - click here.

<CAPTION> - this can be used for a table description that appears above or below the table - depending on whether it is aligned to the top or bottom. It defaults to ALIGN="TOP" but can be set to ALIGN="bottom"