Basic Table Elements and Attributes

Last update on: 06-05-2008
Now that you've seen how basic tables work, this section describes the elements in a little more detail, introducing the attributes they can carry. With these attributes, you can create more sophisticated table layouts.

The <table> Element Creates a Table

The <table> element is the containing element for all tables. It can carry the following attributes:

All of the universal attributes
Basic event attributes for scripting

Some of the most useful attributes that the <table> element can carry are:

align bgcolor border cellpadding cellspacing width

The align Attribute (deprecated):Although it is deprecated, the align attribute is still frequently used with tables. When used with the <table> element, it indicates whether the table should be aligned to the left (the default), right, or center of the page. (When used with cells, as you will see shortly, it aligns the content of that cell.) The syntax is: In this example the text should flow around the table, To prevent this flow you should place a line break after the table using the clear attribute The clear attribute indicates how the browser should display the next line after the line break. With the value of left the text can begin only when there is nothing positioned on the left margin of the browser window (or if it were in a containing element, when nothing is positioned on the left margin of that element). The values clear attribute can take are all, left, right, or none.

The bgcolor Attribute (deprecated)The bgcolor attribute sets the background color for the table. The value of this attribute should be either a hex code or color name.

<table bgcolor="#rrggbb">

The border Attribute (deprecated): Already used in some example above; If you use the border attribute, a border will be created around both the table and each individual cell. The value for this attribute is the width you want the outside border of the table to be in pixels. If you give this attribute a value of 0, or if you do not use this attribute, then you should not get any borders on either the table or any cells.

<table border="1">

The cellpadding Attribute (deprecated): The cellpadding attribute is used to create a gap between the edges of a cell and its contents. The value for this attribute can either be the amount of space or padding you want inside each wall of the cell in pixels or a percentage value (as a percentage of the width of the table).
Imagine, if two cells both contain writing, and there is no gap between the edge of the cells and the writing, the contents can become hard to read.

 cellpadding="3" or cellpadding="1%"

The cellspacing Attribute (deprecated)The cellspacing attribute is used to create a space between the borders of each cell. The value for this attribute can either be the amount of space you want to create between the cells in pixels or a percentage value (as a percentage of the width of the table).

 cellspacing="3" or cellspacing="1%"

The width Attribute (deprecated): The width attribute is used to specify the width of the table in pixels, or as a percentage of the available space. When the table is not nested inside another element, the available space is the width of the screen; otherwise the available space is the width of the containing element.

width="500" or width="60%"

The <tr> Element Contains Table Rows

The element is used to contain each row in a table. Anything appearing within a <tr> element should appear on the same row. It can carry five attributes, four of which have been deprecated in favor of using CSS.

The align Attribute (deprecated): The align attribute specifies the position of the content of all of the cells in the row.

 align="alignment"

List of the possible values for the align attribute.

left: Content is left-aligned.
right: Content is right-aligned.
center: Content is centered horizontally within the cell.
justify: Text within the cell is justified to fill the cell. (supported only by Netscape 6+ browser)
char: Cell contents are aligned horizontally around the first instance of a specific character (for example numbers could be aligned around the first instance of a decimal point).

The bgcolor Attribute (deprecated): The bgcolor attribute sets the background color for the row. The value of this attribute should be either a hex code or color value as already discussed.

<tr bgcolor="#rrggbb">

The bgcolor attribute is commonly used on the element to shade alternate rows of a table different colors, therefore making it easier to read across each row.

The valign Attribute (deprecated): The valign attribute specifies the vertical alignment of the contents of each cell in the row. The syntax is as follows:

 valign="verticalPosition"

List of the value that can support.

top: Aligns content with the top of the cell.
middle: (Vertically) aligns content in the center of a cell.
bottom: Aligns content with the bottom of the cell.
baseline: Aligns content so that the first line of text in each cell starts on the same horizontal line

The <td> and <td> Elements:

Every cell in a table will be represented by either a <td> element for cells containing table data or a <th> element for cells containing table headings.

By default the contents of a <th> element are usually displayed in a bold font, horizontally aligned in the center of the cell. The content of a <td> element, meanwhile, will usually be displayed left-aligned and not in bold

The <td> and <th> elements can both carry the same set of attributes, each of which applies just to that cell. Any effect these attributes have will override settings for the table as a whole or any containing element (such as a row).

In addition to the universal attributes and the basic event attributes, the <td> and <th> elements can also carry the following attributes:

align bgcolor colspan height nowrap rowspan valign width

The align Attribute: The align attribute sets the horizontal alignment for the content of the cell.
The possible values for the align attribute are left, right, center, justify. align="alignment"

The bgcolor Attribute: The bgcolor attribute sets the background color for the cell. The value of this attribute should be either a hex code or a color name. bgcolor="#rrggbb"

The colspan Attribute: The colspan attribute is used to specify how many columns of the table a cell will span across. The value of the colspan attribute is the number of columns the cell stretches across.. colspan="2"

The height Attribute: The height attribute allows you to specify the height of a cell in pixels or as a percentage of the available space: height="20" or height="10%"

The nowrap Attribute: The nowrap attribute is used to stop text from wrapping onto a new line within a cell. You would only use nowrap when the text really would not make sense if it were allowed to wrap onto the next line (for example a line of code that would not work if it were spread across two lines). In HTML it was used without an attribute value, but that would not be allowed in Transitional XHTML. Rather, you would use the following: nowrap="nowrap"

The rowspan Attribute: The rowspan attribute specifies the number of rows of the table a cell will span across, the value of the attribute being the number of rows the cell stretches across: rowspan="2"

The valign Attribute: The valign attribute allows you to specify the vertical alignment for the content of the cell. Possible values are top, middle, bottom, and baseline: valign="value"

The width Attribute: The width attribute allows you to specify the width of a cell in pixels or as a percentage of the available space: width="150" or width="30%"

Creating Tables's lessons:

Introducing Tables
Basic Table Elements And Attributes
Splitting Up Tables Using A Head Body And Foot
Spanning Columns Using The Colspan Attribute
Spanning Rows Using The Rowspan Attribute