HTML Tables - Level II

Table 1

Costa Rica	Panama	Mexico
Nicaragua	Honduras	El Salvador
Belize	Guatemala	Los Angeles
Chicago	Miami	Dallas

NOTE: the width attribute is set to "100%" meaning the table width will expand and contact as the user expands and contracts their browser window.

Source Code For Table 1

<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="1" WIDTH="100%">

<TR>

<TD>Costa Rica</TD>

<TD>Panama</TD>

<TD>Mexico</TD>

</TR>

<TR>

<TD>Nicaragua</TD>

<TD>Honduras</TD>

<TD>El Salvador</TD>

<TR>

<TD>Belize</TD>

<TD>Guatemala</TD>

<TD>Los Angeles</TD>

</TR>

<TR>

<TD>Chicago</TD>

<TD>Miami</TD>

<TD>Dallas</TD>

</TR>

</TABLE>

---

Controlling Column Width

Table 2

Costa Rica	Panama	Mexico
Nicaragua	Honduras	El Salvador
Belize	Guatemala	Los Angeles
Chicago	Miami	Dallas

Source Code For Table 2

NOTE:

1. The table width has been specified at "400" pixels in the starting table <TABLE> tag
2. The width of each column is set by the width values in the table data <TD> cells in the first table row <TR>
3. Since each cell in the first row <TR> is the top cell in each column, the width you set there will control the width of the entire column below it.
4. The sum of the individual <TD> pixel widths in the first row must equal the pixel width value in the starting table tag. In table 2 the table width equals the sum of the defined widths in the first <TR> as follows:
5. Look at the source code for the first <TR> below to better understand this mathematical relationship. The sum of the three table definition <TD> defined widths can be expressed like this: 150 + 100 + 150 = 400

<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="1" WIDTH="400">

<TR> (this is the first table row)

<TD WIDTH="150">Costa Rica</TD> (the width values shown here define the width in pixels of the first cell in each column)

<TD WIDTH="100">Panama</TD>

<TD WIDTH="150">Mexico</TD>

</TR>

<TR>

<TD>Nicaragua</TD>

<TD>Honduras</TD>

<TD>El Salvador</TD>

</TR>

<TR>

<TD>Belize</TD>

<TD>Guatemala</TD>

<TD>Los Angeles</TD>

</TR>

<TR>

<TD>Chicago</TD>

<TD>Miami</TD>

<TD>Dallas</TD>

</TR>

</TABLE>

---

Controlling Row Height

Table 3

Costa Rica	Panama	Mexico
Nicaragua	Honduras	El Salvador
Belize	Guatemala	Los Angeles
Chicago	Miami	Dallas

Source Code For Table 3

<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="1" WIDTH="400">

<TR>

<TD WIDTH="150" HEIGHT="30">Costa Rica</TD>

<TD WIDTH="100">Panama</TD>

<TD WIDTH="150">Mexico</TD>

</TR>

<TR>

<TD height="30">Nicaragua</TD>

<TD>Honduras</TD>

<TD>El Salvador</TD>

</TR>

<TR>

<TD height="50">Belize</TD>

<TD>Guatemala</TD>

<TD>Los Angeles</TD>

</TR>

<TR>

<TD height="30">Chicago</TD>

<TD>Miami</TD>

<TD>Dallas</TD>

</TR>

</TABLE>

---

Controlling Column Width and Row Height At The Same Time

Table 4

Costa Rica	Panama	Mexico
Nicaragua	Honduras	El Salvador
Belize	Guatemala	Los Angeles
Chicago	Miami	Dallas

Source Code For Table 4

<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="1" WIDTH="400">

<TR>

<TD width="150" height="30">Costa Rica</TD>

<TD width="100">Panama</TD>

<TD width="150">Mexico</TD>

</TR>

<TR>

<TD height="30">Nicaragua</TD>

<TD>Honduras</TD>

<TD>El Salvador</TD>

</TR>

<TR>

<TD height="50">Belize</TD>

<TD>Guatemala</TD>

<TD>Los Angeles</TD>

</TR>

<TR>

<TD height="30">Chicago</TD>

<TD>Miami</TD>

<TD>Dallas</TD>

</TR>

</TABLE>  

---

Alignment of Objects In Cells

1. Objects, text and images can be aligned both VERTICALLY and HORIZONTALLY in any cell.
2. Objects in one cell may be aligned only horizontally, only vertically or both at the same time.
3. The alignment tags are placed inside the table data <TD> tags to control object alignment in each individual cell.

The Table Cell Object Alignment Attributes

HORIZONTAL ALIGNMENT ATTRIBUTES

1. To align an object left, add align="left" to the <TD> tag as in <TD align="left">
2. To align an object center, add align="center" to the <TD> tag as in <TD align="center">
3. To align an object right, add align="right" to the <TD> tag as in <TD align="right">

VERTICAL ALIGNMENT ATTRIBUTES

1. To align an object top, add valign="top" to the <TD> tag as in <TD valign="top">
2. To align an object middle, add valign="middle" to the <TD> tag as in <TD align="middle">
3. To align an object bottom, add valign="bottom" to the <TD> tag as in <TD align="bottom">

HORIZONTAL and VERTICAL ALIGNMENT ATTRIBUTES may be used at the same time.

1. To align an object top and center, add align="center" valign="top" to the <TD> tag as in <TD align="center" valign="top">
2. To align an object bottom and center, add align="center" valign="bottom" to the <TD> tag as in <TD align="center" valign="middle">
3. To align an object top and right, add align="right" valign="top" to the <TD> tag.

Examples similar to these are shown in Table 8a above and in Table 8a's source code

Table 5

Costa Rica	Panama	Mexico
Nicaragua	Honduras	El Salvador
Belize	Guatemala	Los Angeles
Chicago	Miami	Dallas

NOTE:

1. In this table, the HEIGHT attribute has been added to the opening table tag setting the height of the table in pixels.
2. When you set a table height value in pixels, the objects will align "left" in the horizontal plane and "middle" in the vertical plane, these are the defaults.
3. The table above is "200" pixels in HEIGHT, this has been set in the opening table tag in the source code example below as: HEIGHT="200".

Source Code For Table 5

<TABLE BORDER="1" CELLSPACING="10" CELLPADDING="1" WIDTH="400" HEIGHT="200">

<TR>

<TD align="left" width="150">Costa Rica</TD>

<TD align="center" width="100">Panama</TD>

<TD align="right" width="150">Mexico</TD>

</TR>

<TR>

<TD>Nicaragua</TD>

<TD valign="top">Honduras</TD>

<TD valign="bottom">El Salvador</TD>

</TR>

<TR>

<TD valign="top">Belize</TD>

<TD align="center">Guatemala</TD>

<TD align="right" valign="bottom" width="150">Los Angeles</TD>

</TR>

<TR>

<TD align="center">Chicago</TD>

<TD align="center" valign="top">Miami</TD>

<TD>Dallas</TD>

</TR>

</TABLE>

---

Changing The Color of The Table Background

• You must be viewing this guide with your browser or an HTML authoring program that supports table colors to see the colors in the table 6 below.
• If you are using hard copy, you will see shades of gray instead of colors. To view this live online, point your browser at: http://www.vantage21st.com/guides/html-tables/tables_2.htm
• To access a handy chart that will give you the HEX codes for the 216 color safe palate, point your browser at: http://www.vantage21st.com/guides/html-216_color_safe/index.htm

Table 6

Costa Rica	Panama	Mexico
Nicaragua	Honduras	El Salvador
Belize	Guatemala	Los Angeles
Chicago	Miami	Dallas

NOTE:

1. The color for the entire table background is set in the beginning <TABLE> tag below
2. In this example the HEX value "#66CCFF" defines the color light blue.
3. In the cells that contain the text Costa Rica, Panama and Los Angeles, the color for each individual cell has been set inside the <TD> tag.
4. Colors set in <TD> tags will override the color set in the beginning table tag, leaving the color of the rest of the cells the light blue specified in the beginning table tag.

Source Code For Table 6

<TABLE BGCOLOR="#66CCFF" BORDER="1" CELLSPACING="2" CELLPADDING="1" WIDTH="400">

<TR>

<TD BGCOLOR="#FF0000">Costa Rica</TD> (this cell will be red)

<TD>Panama</TD>

<TD>Mexico</TD>

</TR>

<TR>

<TD>Nicaragua</TD>

<TD BGCOLOR="#00CC00" >Honduras</TD> (this cell will be green)

<TD>El Salvador</TD>

</TR>

<TR>

<TD>Belize</TD>

<TD>Guatemala</TD>

<TD BGCOLOR="#FF9966" >Los Angeles</TD> (this cell will be orange)

</TR>

<TR>

<TD>Chicago</TD>

<TD>Miami</TD>

<TD>Dallas</TD>

</TR>

</TABLE>

tables level 1 | tables index | tables level 3

---