Tables
Basic Tables
Border, Cellpadding, Cellspacing Attributes
Data Vertical Alginment
Spanning Rows and Columns

Tags used in tables:(Top of Page)
<TABLE> .... </TABLE>
Tag Type Tag Start Tag End Example Information
Table Tag <TABLE> </TABLE> <TABLE>...HTML...</TABLE> Forms a container for html within your document.  Valid html within container:  <TR> <TD> <TH> <CAPTION> <TABLE>
Table Row Tag <TR> </TR> <TR><TD>..HTML...</TD></TR> Creates a row for the table that contains table data <TD> or headings <TH>
Table Data Tag <TD> </TD> <TD>...HTML...</TD> Creates data forming cells for the rows. Cells contain html including tables.
Table Heading Tag <TH> </TH> <TH>Nane</TH> Centered boldface text.  Identical to table data tag <TD>
Caption Tag <CAPTION> </CAPTION> <CAPTION>Sample Table</CAPTION> Caption for entire table.  Default centered and at top of table. Tag placed inside table, not inside row or data.
 
Simple Sample Table
Item Title
Alpha First Cell
Beta Second Cell
Omega Last Cell
 
Attributes:  Borders, Padding, and Spacing(Top of Page)

Border attribute:  BORDER="n" creates a border of specified number of pixels, n, around outside of cells.  Border is beveled and the larger the border, the more apparent the beveling becomes.


Padding attribute: CELLPADDING="n" specifies the number of pixels, n, to appear inside the cell separating the contents from the edges of the cell (top, bottom, left, right).

Spacing attribute: CELLSPACING="n" specifies the number of pixels, n, to appear between the cell and the borders of adjacent cells.

Examples:

borders <TABLE BORDER="1">....</TABLE>

Simple Sample Table
Item Title
Alpha First Cell
Beta Second Cell
Omega Last Cell

Attributes:   <TABLE CELLPADDING="10">....</TABLE>
Simple Sample Table
Item Title
Alpha First Cell
Beta Second Cell
Omega Last Cell
 
Attributes:   <TABLE CELLSPACING="8">....</TABLE>
Simple Sample Table
Item Title
Alpha First Cell
Beta Second Cell
Omega Last Cell

Combined Attributes:   <TABLE BORDER="1" CELLPADDING="10" CELLSPACING="8">....</TABLE>
Simple Sample Table Simple Sample Table
Item Title
Alpha First Cell
Beta Second Cell
Omega Last Cell

Vertical Alignment(Top of Page)

Vertical alignment, VALIGN, attribute can be assigned to <TR>, <TD> or <TH> tags.  The values assigned can be "MIDDLE", "TOP", "BOTTOM", or "BASELINE" with MIDDLE being the default value.  The contents of various cells will produce different effects with the VALIGN tag.  

Example using VALIGN in <TR> tag.

BASELINE

 Footing Bedrock Foundation

MIDDLE (Default)

 Center Mean Midpoint

TOP

 Highest Greatest Upper

BOTTOM

 Lowest Underside Nadir



Spanning Rows and Columns(Top of Page)

Cells may span several rows or columns. The attribute ROWSPAN="n" specifies how may rows a particular <TD> spans, and COLSPAN="n" specifies how may columns a particular <TD> spans.

Example of spanning rows:

Without row spanning

Faux Company Team Member 1
  Member 2
  Member 3


With row spanning

Faux Company Team Member 1
Member 2
Member 3


Combination ROWSPAN and COLSPAN:
Attitude Survey Results Question One
Y Generation X Generation Other Generations
Gender Female 71% 62% 52%
Male 59% 65% 51%