hitmill.com
link to hitmill.com home page

 

 
   

 

HTML TABLES Tutorial

Selected Table Attributes and Elements


 
This is a free 14-page HTML tutorial about how to code tables for a Web page. Click on one of the table attributes below to learn more about that table attribute.

 

ALIGN and BGCOLOR are the two <TABLE> element attributes which are deprecated in the HTML 4 specification.

ALIGN

<TABLE ALIGN="right">
Code this table at the beginning of the paragraph (After the first paragraph tag").
An opening table tag, <TABLE > , may have several attributes in the tag but some attributes are optional or not needed, depending upon the type of table you are making. The value for each attribute inside the tag is enclosed in quotation marks, only around the value and not around the attribute.
<TABLE attribute="value">.
The ALIGN attribute of the table element element defines the horizontal alignment of the table element (in relationship to the next outer "container", usually the body "container", but a table may be made inside another table. Example: ALIGN="center" would center a table inside the next outer container. If the next outer container is the page BODY itselt, then the table is centered horizontally within the body of the page. I still use this attribute when editing code using Internet Explorer 7.0, even though this attribute is said to have been deprecated in HTML 4.0. Test your code in more than one browser. If the align attribute is not working the newer fix is to use the <DIV align="center"> and the </DIV> tags before and after your table.
I am also currently using the ALIGN attribute inside the <TD ALIGN="right"> to align the cell contents to the right side of the cell. Values for ALIGN may be left, right, or center.

The ALIGN attribute has been used in HTML 3.2 specification and "Transitional HTML" before HTML 4.0, but was officially deprecated in the HTML 4 specificiation to be supplanted by attributes of style sheets, a planned topic in the DHTML section of this site.
Future browser versions may eventually drop support of the ALIGN attribute and supplant it with attributes of style sheets and positioning with style sheets.

Let me repeat before we go further that several attributes of the <TABLE> element may be used at the same time but many of these attributes are optional. When working with tables and page layout you will want to set values for CELLPADDING and CELLSPACING for each of your tables. Here is an example of several attributes coded for some ficticious table element (not for the table containing the code):


 
<TABLE WIDTH="250" BORDER="2" BORDERCOLOR="blue" CELLPADDING="7" CELLSPACING="3" VALIGN="top" ALIGN="right">

 

Quotation marks were used for each value. Line breaks when you are writing HTML code in the text editor are acceptable and white spaces between your lines or paragraphs are also acceptable and will not show up in the complete Web page. (White space in the HTML code of the Web document does not get into the Web page.)

ALIGN values of left | center | right have been defined by the HTML 3.2 specification. The default value is "left". If you do not code the align attribute the browser will assume that the table is aligned to the left. If you code <DIV ALIGN="center"> before a table and </DIV> after a table and do not code an align attribute, the table will still be centered.

Note:
The <CENTER> element has been deprecated by HTML 4.0 to be supplanted by coding <DIV ALIGN="center"> and </DIV>.

<TABLE ALIGN="center">

Text wrapping did not occur. You do not see text on either side of the table aligned in the center. Advanced techniques of style can force the issue but advanced techniques are not covered in this tutorial. The important thing to remember is that when a table is aligned in the center using only HTML coding that the text will not appear on either side of the table.

ALIGN was not mentioned when this table was coded.

Align was not specified for this table. ALIGN="left" is the default value so the browser aligned this table to the far left, even avoiding any margin settings. The text did not wrap to the right of the table because the attribute ALIGN was not coded. Do not assume that if you need a left aligned table and left is the default, then you will not have to code the ALIGN="left" to get text wrap. (See next table).

<TABLE ALIGN="left" STYLE="margin-right:15px;">
When ALIGN="left" is coded text will wrap to the right of the table.


 
Aligning a Table with the STYLE attribute

If you want a right-edge margin for your left aligned table ( a margin between the table and the text) code the following STYLE as an attribute of <TABLE> and type the value as displayed here:

<TABLE STYLE="margin-right:15px;">

STYLE is an inline style from the cascading style sheet rules. (HTML tags can have a STYLE attribute. The word STYLE is followed by an equal sign and then only one set of quotations (opening and closing quotation marks). The value of 15px for margin-right: is the distance between the outer table and the text. There has to be a colon following margin-right. You may change the value number of the pixels (px) to suit yourself for your own table needs. Within the STYLE attribute you may also set margin-left: or margin-top: or margin-bottom: using the STYLE attribute. Separate the rules with a semicolon.
 


 

There may be several style rules for one STYLE attribute but use only one equal sign after the word STYLE then only one opening quotation mark and one closing quotation mark for entire set of STYLE rules you select (again depending upon the needs for your table). Each STYLE rule (found in CSS books about Cascading Style Sheets Rules) has a semi-colon( ; ) separating one rule from the next and there is an attribue and value for each style rule. A colon separates the attribute from the value such as color:red.

Style attribute: style value

The term margin-right:15px is a style sheet rule that declares that the right margin of the table will be 15 pixels wide. Another example of the STYLE attribute for the TABLE element would be
<TABLE STYLE="color:red; font-size:12px; font-family:Helvetica,Tahoma,Arial;">

There is a tutorial at Hitmill about CSS (Cascading Style Sheets Rules).

Also read the tutorials for the HSPACE attribute of the table element and the VSPACE attribute of the table element. These two attributes also deal with horizontal and vertical spacing between the table and the text.



 
Example of a TABLE ALIGN Attribute Without a Value
<TABLE ALIGN>
No value given.

This is an interesting example. We state ALIGN in the table element but we deliberately did not give the attribute a value, just to see what would happen. There is no text wrapping to the right of the left aligned table. So what have I learned? I have seen the trend, that unless I actually code ALIGN="left", there will be no text wrapping to the right of the table. Most interesting is that this table aligns differently in various browsers. I saw it aligned in the center in Netscape Navigator 3 and aligned on the left in Internet Explorer 4. The newer browsers will left align this table with the faulty coding. Attributes need values.

Please send an e-mail note if this information has been helpful to you.
 
[ NEXT Table Attribute ]


 

 

 

 

 
Contact
 
Updated 31 January 2007

© hitmill.com
All Rights Reserved