shopping cart, web design, web development, Vantage21st

HTML Tables - Level I

Tables are among the most powerful HTML page formatting tools available to you. In their basic form, they are relatively simple to understand. As you progress along the table learning curve, your implementations will become more complex.

It is crucial that you understand the underlying code for formatting HTML Tables. Without knowledge of the table code, you will severely limit your HTML page layout abilities.

Tables are made up of horizontal rows and vertical columns.

Table 1 below has:

Two rows
Two columns.
Four table cells
A thin border that defines the rows, columns and cells.
The border is 1 pixel in width.
The table WIDTH is set to be "100%" of the width of the browser window.
When the WIDTH is set in percent value, it will expand and contract as the viewer expands and contracts their browser window.

There are three kinds of table tags.

<table></table> These are the table tags. They are the first and last tags in a table.

<TR></TR> These are the table row tags. Each <TR> tag indicates the beginning of a new table row.
<TD></TD> These are the table definition tags. They are placed following the <TR> or table row tag. Each <TD> that follows a <TR> tag defines a new table cell or vertical column.

Table one below has two <TR> tags or table rows and each <TR> tag or row has TWO <TD> tags that follow it. Each <TD> tag defines a new cell and vertical column in that row.

TABLE 1

Costa Rica Panama

Nicaragua Honduras

Source Code For Table 1

<TABLE BORDER="1" WIDTH="100%"> (This is the beginning table tag)

<TR>

<TD>Costa Rica</TD> (This is the first cell in the first row)

<TD>Panama</TD> (This is the second cell in the first row)

</TR> (This is the closing table row tag)

<TR>

<TD>Nicaragua</TD> (This is the first cell in the second row)

<TD>Honduras</TD> (This is the second cell in the second row)

</TR> (This is also a closing table row tag)

</TABLE> (This is the end, or closing table tag)

Now, Lets Add One More Table Row

TABLE 2

Costa Rica	Panama
Nicaragua	Honduras
Belize	Guatemala

Source Code For Table 2

<TR> (This is the beginning of the first row)

<TD>Costa Rica</TD>

<TD>Panama</TD>

</TR>

<TR> (This is the beginning of second row)

<TD>Nicaragua</TD>

<TD>Honduras</TD>

</TR>

<TR> (This is the beginning of third row)

<TD>Belize</TD>

<TD>Guatemala</TD>

</TR>

</TABLE>

Lets Add One More Column

Table 3

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

Source Code For Table 3

<TR>

<TD>Costa Rica</TD>

<TD>Panama</TD>

<TD>Mexico</TD> (This Cell Was Added To The First Row)

</TR>

<TR>

<TD>Nicaragua</TD>

<TD>Honduras</TD>

<TD>El Salvador</TD> (This Cell Was Added To The Second Row)

</TR>

<TR>

<TD>Belize</TD>

<TD>Guatemala</TD>

<TD>Los Angeles</TD> (This Cell Was Added To The Third Row)

</TR>

</TABLE>

How To Align Text In The Horizontal Plane

To align text in the cells in a given table row, the ALIGN="LEFT", ALIGN="CENTER", OR ALIGN="RIGHT" attributes are added to the beginning table row tag <TR> that defines the row of cells.

Table 4

Costa Rica	Panama
Nicaragua	Honduras
Belize	Guatemala

Source code for table 4

<TR ALIGN="LEFT"> (The ALIGN="LEFT" attribute was added here)

<TD>Costa Rica</TD>

<TD>Panama</TD>

</TR>

<TR ALIGN="CENTER"> (The ALIGN="CENTER" attribute was added here)

<TD>Nicaragua</TD>

<TD>Honduras</TD>

</TR>

<TR ALIGN="RIGHT"> (The ALIGN="RIGHT" attribute was added here)

<TD>Belize</TD>

<TD>Guatemala</TD>

</TR>

</TABLE>

Adjusting The Size Of Table Borders, Grids and Cells
How to adjust border widths, the width of the grid lines that divide cells and the amount of space between the object in the cell and the edges of the cell.

Table 5

Costa Rica

Panama

Nicaragua

Honduras

Source Code For Table 5

<TD>Costa Rica</TD>

<TD>Panama</TD>

</TR>

<TR ALIGN="CENTER">

<TD>Nicaragua</TD>

<TD>Honduras</TD>

</TR>

</TABLE>

In the source code above, look at the first line of code replicated below.

BORDER="15" This defines the width of the outside border, this generates a nice beveled edge effect that is 15 pixels in width.
CELLSPACING="5" This defines the width of the grid lines that separate the individual cells
CELLPADDING="20" This defines the distance in pixels from the object in the cell to the inside edges of that cell
You can adjust the numbers of each attribute to suit your design needs.

Invisible Borders

How to use tables to place objects where you want them on your page. Note that in table 6 below, the objects are "suspended" in place.

Table 6

Costa Rica	Panama
Nicaragua	Honduras

Where are the lines? They have been made invisible by changing the value of the border attribute from 15 pixels to 0 pixels. See the BORDER attribute in the source code below. Compare it to the source code for Table 5.

Tip: compose your tables with a BORDER="1" value. this will provide you with grid lines for reference. When you have the layout where you want it, change BORDER="1" to BORDER="0". Your formatting will be locked in and you won't see the grid lines. Cool huh?

Source Code For Table 6

<TD>Costa Rica</TD>

<TD>Panama</TD>

</TR>

<TR ALIGN="CENTER">

<TD>Nicaragua</TD>

<TD>Honduras</TD>

</TR>

</TABLE>

How to define a fixed table width
In all of the examples above, the width of the table has been set as "100%" of the window width. This means the table will stretch from one side of the browser window to the other, and will expand and contract with the width of the browser window. This is not always a desirable effect. You may want to lock in the width of a table so that it stays fixed in width regardless of what the browser window width is.

To do this, you specify the WIDTH attribute in the beginning table tag as an absolute number without the % sign. In the example below, the table width has been locked in at "250" pixels.

Table 7

Costa Rica	Panama
Nicaragua	Honduras

Note that the table is much smaller, if you expand or contract the browser window, it will have no effect on the width of the table.

Source code for table 7

<TABLE BORDER="1" WIDTH="250"> (The width is specified as "250" pixels)

<TR>

<TD>Costa Rica</TD>

<TD>Panama</TD>

</TR>

<TR>

<TD>Nicaragua</TD>

<TD>Honduras</TD>

</TR>

</TABLE>

You can put almost anything in a table!

Using the knowledge you have gained, create a table like the table below. You may use the thumbnail images supplied by your instructor or your own. If you are viewing this on the Internet, you can download the four thumbnail images shown below and save them into your "images" folder.

Add some text to one cell, a few links to another, a list to yet another cell until you have filled all cells with text or graphical objects.

National Geographic Online

News Links

Classic American Cities

New York
Miami
Chicago
Denver
San Francisco

As you can see, tables are very flexible. Experiment with them. Remember, nothing ventured, nothing gained. If you don't try, you will never know.

There are a lot more formatting tricks, attributes etc. that you can do with tables. It is well worth the time to study tables further. A good HTML book like HTML For The World Wide Web by Elizabeth Castro will help.

One of the best ways to learn is from others. While you are looking at a page in a browser, open the "View" menu at the top of the screen. Select "Document Source." this will let you see the HTML source code of the page you are looking at. Neat! You can copy and paste the source code you see and modify it for your own purposes.

tables index | tables level 2