TABLES HTML TUTORIAL (INTRODUCTION TO TABLES) PDF Print E-mail


INTRODUCING TABLES

 I like tables and make good use of them. My main home page uses a table to point to each lesson and in Lesson Ten, I used a table to print all the colors and their codes. Tables are great for summarizing large amounts of information and for structuring data. Tables allow viewers to find what they need quickly and easily. Tables are part of HTML 3.2 specifications and most of the popular browsers now support them. This lesson is for those of you who want to incorporate a table into a web page and we will begin with a basic table and progress from there. In the next lesson we study some of the more advanced features of table design.

A BASIC TABLE

 Here is a basic table. Note that there is no border around the table and that there are no lines separating the data in the table.
 

VOLUNTEER SCHEDULE

9 A.M. 12 P.M. 2 P.M.
NURSERYJohn Mary Marcia
SECURITYKimberly George Ken
TICKETSJacob Nancy Adam

Note that even though there are no lines to separate the items in the table and that some names are longer than others, everything still nicely lines up. I am going to build on this example and I would like you to follow along with me and also to do some of your own experimenting. So, SWITCH to NOTEPAD and type in the following HTML document that gives the above table. Once you have typed it in, SAVE the document, SWITCH back to your browser, and load the document to see the table. An explanation of the commands is given below the document.

<HTML>
<HEAD>
<TITLE>VOLUNTEER SCHEDULE</TITLE>
</HEAD>
<BODY>
<H3 ALIGN="CENTER">
<TABLE>
<CAPTION><STRONG>VOLUNTEER SCHEDULE</STRONG></CAPTION>
<TR>
<TD>
<TD>9 A.M.
<TD>12 P.M.
<TD>2 P.M.
<TR>
<TD><STRONG>NURSERY</STRONG>
<TD>John
<TD>Mary
<TD>Marcia
<TR>
<TD><STRONG>SECURITY</STRONG>
<TD>Kimberly
<TD>George
<TD>Ken
<TR>
<TD><STRONG>TICKETS</STRONG>
<TD>Jacob
<TD>Nancy
<TD>Adam
</TABLE></H3>
</BODY></HTML>

Here is an explanation of this table.

  1. A table must be declared with TABLE tags. Therefore <TABLE> denotes the beginning of a table and </TABLE> denotes the end of the table. If you leave off the closing tag, your table won't work. TABLE is a container element and so everything contained between the opening and closing TABLE tags is part of the table.
  2. This table begins with a CAPTION tag. The CAPTION tag is optional. It represents or describes the contents of your table. Most browsers will automatically center the caption above the table contents. A caption can be placed above or below the table. To place the caption below the table, use the attribute ALIGN="BOTTOM" as in <CAPTION ALIGN="BOTTOM"> (try it). Note also that I strongly emphasized the caption and my headings. This is optional but it does serve the purpose of making your caption and headings stand out more.
  3. A table is made up of rows and columns and tables are generated row by row with each row going from left to right. A row is a horizontal collection of cells. Therefore, 9 A.M., 12 P.M. and 2 P.M. are in the first row; NURSERY, John, Mary and Marcia make up the second row; SECURITY, Kimberly, George and Ken make up the third row. Our table has four rows. Columns are vertical. Therefore NURSERY, SECURITY, TICKETS are in the first column, while 9 A.M., John, Kimberly, and Jacob make up the second column, and so on.
  4. Rows are divided into cells and each cell in our example is a data cell. A cell can also contain no data (the first cell in the first row is empty or blank). Cells can also overlap. That is, a cell can span across more than one row or span more than one column and we will deal with that in the next lesson.
  5. TD stands for Table Data. It denotes the beginning of a new cell. You simply place this tag in front of the information you want in the cell. Thus TD is used to mark up each individual cell. The TD cell can contain almost anything such as tags that center, emphasize, and color text. A data cell can contain lists, images, and even nested tables (a cell containing a table). The list goes on. The closing TD tag (</TD>) is optional. Some people use it as good practice to close each table cell explicitly. If you have a table inside a cell (nested tables), then you should use the closing tag to close each cell and row as some browsers get nested tables wrong and will display them incorrectly. So use </TD> if you want, as in:

    <TD>9 A.M.</TD>
    <TD>12 P.M.</TD>

    but each new TD tag implies that the previous one has ended.

  6. You begin each row with a <TR> tag. TR stands for Table Row. Tables are always constructed as sequences of rows. Thus <TR> tells the browser that a new row is now beginning. If you don't use the TR tag for each new row, the browser assumes the cells will keep going to the right. There is also an optional end tag (</TR>) to explicitly terminate a row. However, each TR implies that the previous row has ended. Again, if you have a table inside a cell, you are recommended to close all cells and rows as some browsers need them to get the nested tables to print correctly.
  7. I used <H3 ALIGN="CENTER"> to center the table. The header tag, H3, has no effect on the data. I could have used any header tag and the results would have been the same. You can also use ALIGN="RIGHT" to have the table aligned with the right side of the browser screen (right justified). If you remove this attribute, you will see the table aligned with the left side of the browser screen (left justified). Note that some browsers may not honor the ALIGN attribute to center a table.
  8. Notice in our example, that the width of each column is not the same. This is because the width of each column is determined by the width of the largest cell in that column.

THE BORDER ATTRIBUTE

Now SWITCH to NOTEPAD and change the opening TABLE tag to:

<TABLE BORDER="1">

After you have saved the change, load the web page into your browser. This is what you should see:
 

VOLUNTEER SCHEDULE

9 A.M. 12 P.M. 2 P.M.
NURSERYJohn Mary Marcia
SECURITYKimberly George Ken
TICKETSJacob Nancy Adam

The table now has a border around the outside and each cell is separated from the other cells with borders. In some low level browsers, there will be no border around the empty cell. "Cells" are the individual rectangles in the table. The "1" in BORDER="1" is called the "value" of the BORDER attribute and here it specifies a border around the table 1 pixel wide. The quotation marks around the "1" are optional. If you want to have a wider border, then change the "1" to a bigger number. For example, change the "1" to a "10" so that we have a border of 10 pixels. Do this now to see the effect. Below is the output with a border width around the table of 10 pixels. Try different pixel widths to see if there is one you would like to use in your tables. Note: in some low level browsers, a wider border will only be placed on the right side of the table and on the bottom of the table. In other words, there will be no wide border around the top and left side of the table.
 

VOLUNTEER SCHEDULE

9 A.M. 12 P.M. 2 P.M.
NURSERYJohn Mary Marcia
SECURITYKimberly George Ken
TICKETSJacob Nancy Adam

The default value for BORDER is 1. Therefore <TABLE BORDER> would have a border 1 pixel wide. The HTML 3 draft did not include the values for the BORDER attribute and so browsers which use this table model might draw a border around your table for BORDER="0". Try BORDER="0" to see what happens to the table border.

Note that the empty cell is different in appearance from the rest of the cells. If you want it to look like the rest of the cells, just place the space character in the cell. The invisible space character is the ampersand command " " and was studied in Lesson Five. Let's do this now. Go back to our HTML document in NOTEPAD and change the first <TD> tag that creates the empty cell to:

<TD> 

Save this change, load the document into your browser and note that the browser now shows the empty cell with the same appearance as a non empty cell.
 

VOLUNTEER SCHEDULE
 9 A.M. 12 P.M. 2 P.M.
NURSERYJohn Mary Marcia
SECURITYKimberly George Ken
TICKETSJacob Nancy Adam

CELL SPACING and CELL PADDING

Change the TABLE command in our HTML document to include the CELLSPACING attribute as in (also change the border value back to "1"):

<TABLE BORDER="1" CELLSPACING="5">

The quotation marks around the value "5" are also optional. Now when you load this document into your browser, you should see:
 

VOLUNTEER SCHEDULE
 9 A.M. 12 P.M. 2 P.M.
NURSERYJohn Mary Marcia
SECURITYKimberly George Ken
TICKETSJacob Nancy Adam

Note that CELLSPACING affects the amount of spacing between cells. That is, the value in the CELLSPACING attribute indicates how many pixels of white space there should be between individual cells. Try different values for different effects. If you do not include a value, the default cell spacing value is 2 pixels. Note: in some low level browsers, the borders around adjacent cells will also be separated by the same number of pixels. This means that the borders will not look continuous. Tables will look their best in all browsers if you use a CELLSPACING value of "0".

Now let's add the CELLPADDING attribute and change the cellspacing attribute to "2". Change the TABLE command to:

<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="5">

and this is what you should see:
 

VOLUNTEER SCHEDULE
 9 A.M. 12 P.M. 2 P.M.
NURSERYJohn Mary Marcia
SECURITYKimberly George Ken
TICKETSJacob Nancy Adam

Problem 1: What do you think is the effect of adding the CELLPADDING attribute to the TABLE tag? If you are unsure, just change the number 5 to a bigger number.

| Click here to go to the answer section |

TABLE HEADINGS (<TH>) and the "WIDTH" ATTRIBUTE

 The Table Header tag is often used when the cell's contents is a heading or label. For example, in our table, The times (9 A.M., 12 P.M., 2 P.M.) are headings for the columns, while NURSERY, SECURITY, and TICKETS are headings for the rows. To indicate these items as headings, you can use the Table Header tag (<TH>) instead of the Table Data tag (<TD>). A cell that contains a heading is called a "Header Cell".

To see the effect of the header tag, change our HTML document to look like the following (I also changed the BORDER to "3", the CELLSPACING TO "0" and CELLPADDING to "3" - just so you can see the different effects of these attribute values on the table):

<HTML>
<HEAD>
<TITLE>VOLUNTEER SCHEDULE</TITLE>
</HEAD>
<BODY>
<H3 ALIGN="CENTER">
<TABLE BORDER="3" CELLSPACING="0" CELLPADDING="3">
<CAPTION><STRONG>VOLUNTEER SCHEDULE</STRONG></CAPTION>
<TR>
<TD> 
<TH>9 A.M.
<TH>12 P.M.
<TH>2 P.M.
<TR>
<TH>NURSERY
<TD>John
<TD>Mary
<TD>Marcia
<TR>
<TH>SECURITY
<TD>Kimberly
<TD>George
<TD>Ken
<TR>
<TH>TICKETS
<TD>Jacob
<TD>Nancy
<TD>Adam
</TABLE></H3>
</BODY></HTML>

This is what your table should now look like:
 

VOLUNTEER SCHEDULE
  9 A.M. 12 P.M. 2 P.M.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken
TICKETS Jacob Nancy Adam

Note the headings in the header cells are strongly emphasized (normally in bold). For this reason I removed the STRONG tags from all the row and column headings. They became redundant. Note also that each heading is centered in its cell (for example, note how the label TICKETS is centered in the cell). This will become more noticeable in the next example. If you have more than one row in a cell, the headings will also be centered vertically.

Now change the TABLE tag to include the WIDTH attribute. Change the TABLE tag to:

<TABLE BORDER="3" CELLSPACING="0" CELLPADDING="3" WIDTH="100%">

Now load the web page and this is what you should see:
 

VOLUNTEER SCHEDULE
  9 A.M. 12 P.M. 2 P.M.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken
TICKETS Jacob Nancy Adam

The table has been expanded to the width of the browser screen (100 per cent of the width of the screen). If this did not happen, then your browser does not recognize the WIDTH attribute in this situation. Notice again that the headings are emphasized and centered but the data in the cells are not centered. You can use any suitable percentage for the width or you can specify the width in pixels. If your browser did not accept the WIDTH attribute in the above example, try it again but specify the width in pixels this time. For example, try WIDTH="600" (no %) and see what happens.

Specifying the width in pixels will give an exact width of the table which can't be changed. Specifying the width as a percent of the current screen is preferred because the table will be expanded or compressed to fit the width of the viewer's browser screen. Therefore using a percent will allow the table to be changed if the window is resized. Using pixels for the width means that if the viewer resizes the window to something smaller than the width you have specified, the view will not be able to see the entire table.

CENTERING DATA

You can control the placement of data in the individual cells by using the ALIGN attribute. For example, let's center the name John, left justify the name Mary, and right justify the name Marcia. Let's also center the entire SECURITY row (Kimberly, George and Ken) by placing the ALIGN attribute with the TR tag for this row. To do this, change the following four sequential lines of our HTML document (repeated here):

<TD>John
<TD>Mary
<TD>Marcia
<TR>

to the following:

<TD ALIGN="CENTER">John
<TD ALIGN="LEFT">Mary
<TD ALIGN="RIGHT">Marcia
<TR ALIGN="CENTER">

Now save the web page and load it into your browser. This is what you should see:
 

VOLUNTEER SCHEDULE
  9 A.M. 12 P.M. 2 P.M.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken
TICKETS Jacob Nancy Adam

Note that the name "John" was centered in the cell, "Mary" was aligned to the left side of the cell (which is the default position) and that "Marcia" was aligned to the right side of the cell. Note also that the <TR ALIGN="CENTER"> centered the contents of the entire row.

You can also control the width of any column. For example, let's change the width of the first column to 40% of the browsers screen width, the 9 A.M. column to 20% of the screen width, and the 12 P.M. column to 10%. Change the first three cells in the first row to:

<TD WIDTH="40%"> 
<TH WIDTH="20%">9 A.M.
<TH WIDTH="10%">12 P.M.

Now save these changes and load the web page into your browser. This is what you should see:
 

VOLUNTEER SCHEDULE
  9 A.M. 12 P.M. 2 P.M.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken
TICKETS Jacob Nancy Adam

Note that the first column of headings has been expanded to 40% of the width of the browser screen. The column with the heading 9 A.M. is 20% of the width of the screen and the 12 P.M. column has been shrunk to only 10% of the screen width which may have forced the heading to be printed over two lines (each line still centered). Again, if percentages have no effect on the column spacing, try specifying the width in pixels.

Problem 2: What is the width of the last column in the above table?

| Click here to go to the answer section |

USING <BR>, SINGLE CELL TABLES, CELLS AS LINKS, CELL BACKGROUND COLORS

USING THE <BR> TAG and SINGLE CELL TABLES

If a cell becomes too long in relation to the appearance of other cells, insert the <BR> tag. A cell can contain as many lines of information as you want. For example, here is one cell from my main home page. I removed the link as this is covered in the next section (each of my cells is a link to a lesson).
 

LESSON SIX
Creating Page Links,
Link Buttons, E-mail

Here are the lines that make up this cell. Type in this new HTML page and be sure to include the HTML, HEAD, TITLE and BODY elements.

<H3 ALIGN="CENTER">
<TABLE BORDER="3" CELLPADDING="3">
<TR>
<TD ALIGN="CENTER">LESSON SIX<BR>Creating Page Links,<BR>Link Buttons, E-mail
</TABLE></H3>

Using a value of "1" for the TABLE attribute will give the best looking border in low level browsers. Note that a single cell table is a great way to place a box or frame around something you want to emphasize or set apart. Notice the use of <BR> tags to force line breaks at key points in the text.

USING THE CELL AS A LINK TO ANOTHER WEB PAGE

There is much that you can do with data cells. One is using the cell as a link to another web page. Every cell in my home page is a link to another page. So here is a problem for you to solve:

Problem 3: Change the above TD line which is:

<TD ALIGN="CENTER">LESSON SIX<BR>Creating Page Links,<BR>Link Buttons, E-mail

so that the entire cell becomes a link to Lesson Six. The file name (URL) for Lesson Six is "lesson6.htm".

| Click here to go to the answer section |

ADDING A BACKGROUND COLOR TO ANY CELL

This section assumes that your browser supports background colors.

Problem 4: Now change your answer to Problem 3 to include a light yellow background. Use "#FFFFCC" for the color code (taken from the color table in Lesson Ten). Here is the cell with the light yellow background:
 

LESSON SIX
Creating Page Links,
Link Buttons, E-mail

| Click here to go to the answer section |

Let's now try another problem:

Problem 5: The following table has a light yellow background in each heading cell and in the empty cell. Change what is necessary in the "VOLUNTEER SCHEDULE" HTML document to make the table look like the following: (set the border to 3 pixels, cell spacing to 0 pixels and cell padding to 3 pixels. Also use the same yellow color code as in the previous example.)
 

VOLUNTEER SCHEDULE
  9 A.M. 12 P.M. 2 P.M.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken
TICKETS Jacob Nancy Adam

| Click here to go to the answer section |

PLACING AN IMAGE IN A CELL

To place an image in a cell, you follow the same rules as for placing an image on a web page. The following example places a border 10 pixels wide around an image which is placed in a single cell table and also makes the image a link to my home page.
 

cross

The BODY of the HTML document that gives this example is:

<H3 ALIGN="CENTER">
<TABLE BORDER="10" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD><A HREF="index.htm"><IMG SRC="cross1.gif" ALIGN="CENTER" ALT="cross" WIDTH="90" HEIGHT="120" BORDER="0"></A>
</TABLE></H3>

Experiment with different attribute values. Add some cell padding and cell spacing. Place a border around the image as well as a border around the table, or experiment with the ALIGN attribute as in ALIGN="RIGHT" and ALIGN="LEFT" or remove the ALIGN attribute altogether. You can learn a lot from experimenting. For example, if you do not want the image to be a link, just remove the anchor tags and the HREF attribute as in:

<TD><IMG SRC="cross1.gif" ALIGN="CENTER" ALT="cross" WIDTH="90" HEIGHT="120" BORDER="0">

If you use images in a table, be sure to specify the WIDTH and HEIGHT attributes in the IMG tag. This allows the browser to lay out the table in advance, so it can draw the table and place the text above and below the table before the image is loaded. Not using the WIDTH and HEIGHT attributes can cause unnecessary delays in displaying your web page.

 

Comments
Search
Only registered users can write comments!

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."
 
Next >
[ Back ]