HTML for People Who Want to Learn  --  Tables for Starters

Table Attributes

This page lists the attributes associated with table tags.

 

 

DEFAULT

This is the default table with no attributes defined.

Markup Languages
Acronym Full Name
SGML Standard Generalized Markup Language
HTML Hypertext Markup Language

 

 

Attributes of <TABLE>

Replace "?" with a positive whole number.
Attributes of <TABLE> Description
BORDER=?
 Specify in pixels the width of the border around the table.
CELLPADDING=?
 Specify in pixels the amount of space between the cell contents and the cell border.
CELLSPACING=?
 Specify in pixels the amount of space between each cell.
WIDTH=?
 Specify the width of the table in pixels.
WIDTH="?%"
 Specify the width of the table as a percentage of the browser window.

 

BORDER

This table has a border five pixels wide. The rest of the example tables will be shown with this border.  <TABLE BORDER=5>           Find out how to color the borders!

Markup Languages
Acronym Full Name
SGML Standard Generalized Markup Language
HTML Hypertext Markup Language

 

CELLPADDING

This table has a cellpadding of ten pixels.  <TABLE BORDER=5 CELLPADDING=10>

Markup Languages
Acronym Full Name
SGML Standard Generalized Markup Language
HTML Hypertext Markup Language

 

CELLSPACING

This table has a cellspacing of ten pixels.  <TABLE BORDER=5 CELLSPACING=10>

Markup Languages
Acronym Full Name
SGML Standard Generalized Markup Language
HTML Hypertext Markup Language

 

For comparison, the table below has both cellspacing and cellpadding set at ten pixels.
 <TABLE BORDER=5 CELLSPACING=10 CELLPADDING=10>

Markup Languages
Acronym Full Name
SGML Standard Generalized Markup Language
HTML Hypertext Markup Language

 

WIDTH

This table has a width of 400 pixels.  <TABLE BORDER=5 WIDTH=400>

Markup Languages
Acronym Full Name
SGML Standard Generalized Markup Language
HTML Hypertext Markup Language

 

WIDTH as a Percentage

This table has a width of 50 percent of your browser window. Try resizing the widow and notice how the width of the table is affected.  <TABLE BORDER=5 WIDTH="50%">

Markup Languages
Acronym Full Name
SGML Standard Generalized Markup Language
HTML Hypertext Markup Language

 

 

Attributes of <CAPTION>

* Not supported by all browsers, and not properly supported by others.
Attribute of <CAPTION> Description
ALIGN=TOP
 The default setting, used to postion the caption above the table.
ALIGN=BOTTOM
 Used to postion the caption below the table.
ALIGN=LEFT*
 Used to postion the caption on the left side of the table.
ALIGN=RIGHT*
 Used to postion the caption on the right side of the table.


This table has the caption at the top.  <CAPTION ALIGN=TOP>

Markup Languages
Acronym Full Name
SGML Standard Generalized Markup Language
HTML Hypertext Markup Language


This table has the caption at the bottom.  <CAPTION ALIGN=BOTTOM>

Markup Languages
Acronym Full Name
SGML Standard Generalized Markup Language
HTML Hypertext Markup Language


The caption is on the left side of the table.  <CAPTION ALIGN=LEFT>

Markup Languages
Acronym Full Name
SGML Standard Generalized Markup Language
HTML Hypertext Markup Language


The caption is on the right side of the table.  <CAPTION ALIGN=RIGHT>

Markup Languages
Acronym Full Name
SGML Standard Generalized Markup Language
HTML Hypertext Markup Language

 

 

Attributes of <TR>, <TH>, and <TD>

Attributes of <TR>, <TH>, and <TD> Description
ALIGN=LEFT | CENTER | RIGHT
 Horizontal alignment of contents of a cell.
VALIGN=TOP | MIDDLE | BOTTOM
 Vertical alignment of contents of a cell.
NOTE: Alignment defined within <TH> or <TD> cells override the alignment set in <TR>.

 

Default Alignment

Markup Languages
Acronym Full Name
SGML Standard
Generalized
Markup
Language
HTML Hypertext
Markup
Language

 

ALIGN and VALIGN

Alignment can be defined for either the entire row of cells or for individual cells. For this example, each cell is aligned individually.  <TD ALIGN=**** VALIGN=****>

VALIGN=TOP
----->
Markup Languages
Acronym Full Name
SGML Standard
Generalized
Markup
Language
HTML Hypertext
Markup
Language
ALIGN=CENTER
<-----
VALIGN=BOTTOM
----->		 ALIGN=RIGHT
<-----

 

 

Attributes of <TH> and <TD>

Attributes of <TH> and <TD> Description
COLSPAN=n The number (n) of columns a cell spans.
ROWSPAN=n The number (n) of rows a cell spans.
WIDTH=? Specify the width of the cell in pixels.
NOWRAP Turn off word wrapping within a cell.

 

COLSPAN

COLSPAN is used to extend cells across a column.

Cell 1 Cell 2
Cell 3
<TABLE BORDER=5>
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
<TR>
<TD COLSPAN=2>Cell 3</TD>
</TR>
</TABLE>

The number of cells in each row must match. If there are two cells in one row and a cell in another row that spans two columns, then only that one cell can be in that row because technically it represents two cells. If there are three cells in one row and a cell in another row spans two columns, then only two cells can be in that row.

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD COLSPAN=2>Cell 4</TD>
<TD>Cell 5</TD>
</TR>

 

ROWSPAN

ROWSPAN is used to extend cells through different rows. Notice again that only one cell is defined in the second row.

Cell 1 Cell 2
Cell 3
<TABLE BORDER=5>
<TR>
<TD ROWSPAN=2>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
<TR>
<TD>Cell 3</TD>
</TR>
</TABLE>

 

WIDTH

WIDTH is used to manually define the width of a cell in pixels.  <TD WIDTH=?>

 
This cell has a width of 200 pixels. This cell has a width of 100 pixels.

 

NOWRAP

NOWRAP is used to prevent text in a cell from being word wrapped. Use this only for short lines of text or else the table will run off the screen and you will get a horizontal scroll bar at the bottom of the browser window.  <TD NOWRAP>

 
The text stays on one line instead of getting wrapped to the next line. The text in this cell takes up the rest of the window, and is then wrapped to the next line.

 

 

Go to Build Your Own Table --->     

 

Back
 Home
 E-mail
 Next

Last Modified: Saturday, 18-Jul-98 21:52:14 PDT
Page URL: http://geocities.datacellar.net/SiliconValley/Vista/2823/text/tabattri.html

1