Nottingham Website Design - Learn HTML

Learn HTML - Tables

This html Codes Tutorial covers the TABLE tag which can be used to accurately lao out the design of your web pages.

Html Table Tag: <TABLE> and </TABLE>
This tag is the main html code to the the browser the tables are to be used. The <table> tag needs to be used at the very beginning of your table, and the </table> closing tag has the used at the end of your table. The following html codes are needed to create an accurate table:

ALIGN: This attribute can be used to position the table to the left, center or right of the available display space.

BORDER: If present, a border will be drawn around all table cells. If absent, no borders will be drawn but, by default, space is reserved for the border whether it is displayed or not. You can decide whether you wish to have a boarder or not around the table

CELLSPACING: This attribute specifies the amount of space in pixels to be inserted between individual cells in the table. "0" will give no spacing, whereas "3" will give a space of 3 pixels wide between the cells of your table

CELLPADDING: This attribute specifies the amount of space in pixels to be inserted between the border of the cell and the contents of the cell. "0" will give you no border spacing, whereas "3" will give you 3 pixels of space in your table cell's border.

All of these html attributes will help you accurately layout your table and the information contained in it

WIDTH: This html attribute is used to specify the total width of your table, either as a percentage of the available display space or as an absolute value in pixels. Using a percentage for the width of your table is normally recommended as the table will automatically resize itself so cover say 80% of the viewable screen, which is good for viewers using 21" monitors and 14" monitors

The following is an example of the html <TABLE> tag:

<TABLE BORDER=2 CELLSPACING=0 CELLPADDING=3 WIDTH=80%>

Html Table Data Tag: <TD> and </TD> which are for the table description
This table tag is to used to specify a tables cell and must be placed within a pair of table row <TR> tags which stand for "table row" So to define a first elements contained in a table, you need a <TD> and </TD> and <TR> then </TR> to close the row. The information you wish to be displayed in the table row needs to be placed inside these html tags.

The following html table attributes are available to give you further control over the appearance of your table:

ALIGN: Used to specify the horizontal alignment of the cells contents; this will align the content in the cell to the left, center or to the right. This value is over-ridden by any alignment specified for the table row.

NOWRAP: Prevents line breaks being inserted in the cells contents.

VALIGN: Used to specify the vertical alignment of the cells contents; the value will align top, middle or to the bottom. This value is also over-ridden by an alignment specified for the table row.

Html Table Header Tag: <TH> and </TH>
The table header tag is used to specify a table header cell and must be placed within a pair of table row <TR> tags. The following attributes are permitted:

ALIGN: Used to specify the horizontal alignment of the header cell contents as above; which is align its contents to the left, center or to the right. This is also over-ridden by any alignment specified for the table row.

COLSPAN: Specifies the number of columns occupied by the header cell, the default being 1.

NOWRAP: As above this prevents line breaks being inserted in the header cell.

ROWSPAN: Specifies the number of rows occupied by the header cell, the default being 1.

VALIGN: Used to specify the vertical alignment of the header cell contents; the value can be one of top, middle or bottom. This value is over-ridden by any alignment specified for the table row.

Html Table Row Tag: <TR> and </TR>
The number of rows in a table corresponds exactly to the number of table row tags specified and the following attributes are permitted.

ALIGN: Used to specify the horizontal alignment of the cells within the row; the value can be one of left, center or right. This value will be overridden by any alignment specified for any individual table cell.

VALIGN: Used to specify the vertical alignment of all cells within the row; the value can be one of top, middle or bottom. This value over-rides any alignment specified for any individual table cell.

Website Design Services
Website Design Home
Wesite Design Prices
Business Website Design
Database Website Design
Flash Website Designs
Website Re-Design

Business Solutions
Data Storage Solutions
Company Intranet Sites
PowerPoint Presentations
Company CD Roms
Email Accounts

Search Engines
Search Engine Optimization
Search Engine Submission

Ordering
Special Offers & Discounts
Order Online

Portfolio & Testimonials
Our Customer Testimonials
Website Design Portfolio

Website Design Tutorials
Website Design Tutorials
Good Website Design
Website Design Bad Design
Page Content
HTML Tutorials

FAQ & Jargon
Website Design FAQ
Website Design Jargon

Links & Map
Useful Links
Site Map