LESSON TWELVE - ADVANCED TABLES

You may read the following sections in their entirety
or use these choices to go directly to a section.

| Spanning columns and rows | | Printing a calendar | | A vertical side-line |

SPANNING COLUMNS AND ROWS

 COLSPAN

This lesson assumes that you understand the basic tables presented in Lesson Eleven and are now ready to take a look at some more advanced table features.

You may have noticed in the table on my main home page that I did not use the CAPTION tag. Instead, I placed the instructions for the table in the first row which spanned across all the columns. For example, here is a simplified version of the table on my home page. I grouped the first four lessons together and used a value of "3" for each of the BORDER, CELLSPACING and CELLPADDING attributes.
 

 
CHOOSE ANY LESSON

LESSON ONE
Introducing HTML 		LESSON TWO
Getting started 		LESSON THREE
<BR>, <P>, <HR>
and other basic tags 		LESSON FOUR
Emphasizing text
and Heading tag

Here are the lines that generated this part of the table (I double spaced the command lines for easier viewing):

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

<TR>

<TD ALIGN="CENTER" COLSPAN="4"><H3>&nbsp;<BR>CHOOSE ANY LESSON</H3>

<TR>

<TD ALIGN="CENTER"><A HREF="lesson1.htm">LESSON ONE<BR>Introducing HTML</A>

<TD ALIGN="CENTER"><A HREF="lesson2.htm">LESSON TWO<BR>Getting started</A>

<TD ALIGN="CENTER"><A HREF="lesson3.htm">LESSON THREE<BR>&lt;BR&gt;, &lt;P&gt;, &lt;HR&gt;<BR> and other basic tags</A>

<TD ALIGN="CENTER"><A HREF="lesson4.htm">LESSON FOUR<BR>Emphasizing text<BR> and Heading tag</A>

</TABLE>

The line that generated the first row that spanned across all four columns is:

<TD ALIGN="CENTER" COLSPAN="4"><H3>&nbsp;<BR>CHOOSE ANY LESSON</H3>

Note the following points:

  1. To span across any number of columns, use the COLSPAN attribute and state how many columns the row is to span across. Thus in our example, COLSPAN="4"(the quote marks are optional) tells the browser to span the first row across four columns.
  2. The second row begins with LESSON ONE and note the <TR> tag to signify the beginning of this row. Recall that <TR> stands for Table Row. Each new row must be designated with a <TR> tag.
  3. Note that each cell in row 2 is a link to another page. That is, each cell is contained between the anchor tags <A> and </A>, and each HREF points to another file.
  4. Note also the use of the <BR> tag to end lines at certain points in each cell. This is needed to prevent the cell from becoming too wide.
  5. The topics in the Lesson Three cell includes the <BR>, <P>, and <HR> tags. When you place the "<" and ">" angle brackets around a word, the browser will treat the word as a tag and won't print the word. So if I want to have <BR> treated by the browser as text and not as a tag, I use ampersand commands to print the "<" and ">" symbols. The ampersand command for "<" is &lt;. The lt stands for "less than" The letters lt must be written in lower case as shown. The ampersand command for ">" is &gt; (greater than). The ampersand command was introduced in Lesson Five and so if you need more information on this command, please visit Lesson Five.
  6. I placed an ALIGN="CENTER" in each cell to center the contents of the cell. As discussed in Lesson Eleven, I could have used only one ALIGN="CENTER" for the entire row if it is placed with the TR tag as in:

    <TR ALIGN="CENTER">

The following example shows two column spans. The first column span is the title which spans across all three columns. The second column span is in the second row and is the cell "Starting Speed in Feet per Minute" and it spans across the second and third columns.
 

METALS AND THEIR REASONABLE CUTTING SPEEDS
MATERIAL Starting Speed
in Feet per Minute
  High-Speed
Steel 		Carbide
Stainless Steel 50 150
Cast Iron 74 225
Brass 300 800
Copper 300 1000

Here are the lines that make this table. You any wish to SWITCH to NOTEPAD and type it in, then save and load it into your browser to see if everything comes out the same. We will be making a change to this table in the next section.

<HTML>
<HEAD>
<TITLE>METAL CUTTING SPEEDS</TITLE>
</HEAD>
<BODY>

<TABLE BORDER="5" CELLSPACING="0" CELLPADDING="3">
<TR>
<TH COLSPAN="3">METALS AND THEIR REASONABLE CUTTING SPEEDS
<TR>
<TH>MATERIAL
<TH COLSPAN="2">Starting Speed<BR>in Feet per Minute
<TR>
<TH>&nbsp;
<TH>High-Speed<BR>Steel
<TH>Carbide
<TR>
<TD>Stainless Steel
<TD ALIGN="CENTER">50
<TD ALIGN="CENTER">150
<TR>
<TD>Cast Iron
<TD ALIGN="CENTER">74
<TD ALIGN="CENTER">225
<TR>
<TD>Brass
<TD ALIGN="CENTER">300
<TD ALIGN="CENTER">800
<TR>
<TD>Copper
<TD ALIGN="CENTER">300
<TD ALIGN="CENTER">1000
</TABLE>
</BODY></HTML>

Now for a discussion:

  1. Note that I used <TH> instead of <TD> for the cells that contain the headings. TH (Table Header) both centers and emphasizes the headings.
  2. Since "Starting Speed in Feet per Minute" spans across two columns, it is considered to take the place of the cells in row 2, columns 2 and 3.
  3. Note that each <TR> indicates the beginning of a new row in the table.
  4. The first cell in row 3 is blank and to make it take on the appearance of the other cells, I placed the space character (&nbsp;) in the cell.
  5. Each number was centered in its cell with the ALIGN="CENTER" attribute.

ROWSPAN

Let's take the last example, and have the heading MATERIAL fill the first two rows in the first column so that the empty cell is eliminated. In other words, let's change the table to look like:
 


METALS AND THEIR REASONABLE CUTTING SPEEDS

MATERIAL Starting Speed
in Feet per Minute
High-Speed
Steel 		Carbide
Stainless Steel 50 150
Cast Iron 74 225
Brass 300 800
Copper 300 1000

There are really only two changes that have to be made to have "MATERIAL" span two rows:

  1. remove the empty cell and
  2. add the ROWSPAN="2" to the <TH> tag for the "MATERIAL" cell.
Here are the first few rows in the BODY of the document. I also added <BR>'s in the first row of the table to force an empty line above and below the title of the table. In most browsers, the <P> won't work and in some browsers using the <BR> tag this way will not work either. But it will look good in those browsers that do accept the <BR> to force blank or empty lines.

<TABLE BORDER="5" CELLSPACING="0" CELLPADDING="3">
<TR>
<TH COLSPAN="3"><BR>METALS AND THEIR REASONABLE CUTTING SPEEDS<BR><BR>
<TR>
<TH ROWSPAN="2">MATERIAL
<TH COLSPAN="2">Starting Speed<BR>in Feet per Minute
<TR>
<TH>High-Speed<BR>Steel
<TH>Carbide
<TR>

Note that "MATERIAL" spans row 2, column 1 and row 3, column 1. These two cells are now considered occupied. Thus the first <TH> for row 3 (High Speed Steel) is considered to be in the second column. Therefore "High-Speed Steel" in the third row was printed in the second column as the first column was occupied. So if a cell spans more than one row or column, just ignore the cell and move to the next available cell in the row.

Now it's your turn to make up a table. There is nothing like learning by doing.

Problem 1: Make up the HTML document that will give the following table:
 


DRILL SPEEDS

  MATERIALS DIAMETER
IN INCHES 		CUTTING SPEED RPM
Feet Metres
1. Brass 2.5 350   560
2. Cast iron 4.5   69 201
3. Copper 1 300   1200
4. Stainless Steel 3.625   46 167

| Click here to go to the answer section |

| top | | bottom |

PRINTING A CALENDAR

 A calendar is nothing more than a table with a lot of rows and columns.

Problem 2: Write the HTML document that gives the following calendar. Use the value "3" for each of the attributes BORDER, CELLSPACING and CELLPADDING.
 

JULY
Sun Mon Tue Wed Thu Fri Sat
  1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31  

| Click here to go to the answer section |

| top | | bottom |

A SIDE-LINE

If you would like to see your web page or part of your web page separated into two sections by a vertical line (a side-line), you could set up it up as a one row, two column table. You could choose a table WIDTH of 100% and a table HEIGHT of any number of pixels that you desire. The width of the table can also be expressed in pixels. If your browser supports full color, the left side is colored yellow.

Here is an example:
 

This side is colored yellow

Feel free to place anything on this side.

This cell is 30% of the browser screen width.





Note that the HEIGHT is in pixels (600) and not as a percent.
VALIGN="TOP" (Verticle ALIGN) aligns the text with the top of the cell.

This side just shows plain text.

You can color it too if you want.

This side is 70% of the width of the screen.

Both sides are 600 pixels long.

But you can change it to anything you want.

Here is the BODY of the HTML document that gives this table. A brief explanation is given to the left.

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10" WIDTH="100%" HEIGHT="600">
<TR VALIGN="TOP">
<TD WIDTH="30%" BGCOLOR="#FFFF00">This side is colored yellow
<P>Feel free to place anything on this side.
<P>This cell is 30% of the browser screen width.
<TD WIDTH="70%">This side just shows plain text.
<P>You can color it too if you want.
<P>This side is 70% of the width of the screen.
<P>Both sides are 600 pixels long.
<P>But you can change it to anything you want.
</TABLE>

Now if you do not want a border, just remove the TABLE attributes BORDER and CELLSPACING so the TABLE tag becomes:

<TABLE CELLPADDING="10" WIDTH="100%" HEIGHT="600">

Here is what you should see:
 

This side is colored yellow

Feel free to place anything on this side.

This cell is 30% of the browser screen width.





Note that the HEIGHT is in pixels (600) and not as a percent.
VALIGN="TOP" (Verticle ALIGN) aligns the text with the top of the cell.

This side just shows plain text.

You can color it too if you want.

This side is 70% of the width of the screen.

Both sides are 600 pixels long.

But you can change it to anything you want.

Here is the BODY of the HTML document that gives this table. A brief explanation is given to the left.

<TABLE CELLPADDING="10" WIDTH="100%" HEIGHT="600">
<TR VALIGN="TOP">
<TD WIDTH="30%" BGCOLOR="#FFFF00">This side is colored yellow
<P>Feel free to place anything on this side.
<P>This cell is 30% of the browser screen width.
<TD WIDTH="70%">This side just shows plain text.
<P>You can color it too if you want.
<P>This side is 70% of the width of the screen.
<P>Both sides are 600 pixels long.
<P>But you can change it to anything you want.
</TABLE>



Here is another example of a side-line dividing the screen into two two columns. I have removed the yellow background color but you could experiment by leaving it in to see the effect. An explanation and the BODY of this HTML document is given below the table.
 

Feel free to place anything on this side.

This cell is 30% of the browser screen width.

The vertical line is really an image placed in this cell and aligned to the right side of the cell.

This is the right side of the table.

I could have placed the vertical line (the image) in this cell by aligning it to the left side of the cell.

This line is 600 pixels in height (the same length as the table) and 2 pixels wide.

As stated in the above "invisible" table, the line is only an image which I named "linevert.gif". I placed it in the first cell and aligned it to the right side of the cell. I just as easily could have placed it in the second cell and aligned it to the left side of the cell. Feel free to save this line and use it in your own web pages. As you can see below in the IMG statement, I defined the line to be 600 pixels long and 2 pixels wide. If you save this image, be sure to experiment with different lengths and widths.

Here is the BODY of the HTML document that gives rise to this table.

<TABLE CELLPADDING="10" WIDTH="100%" HEIGHT="600">
<TR VALIGN="TOP">
<TD WIDTH="30%"><IMG SRC="linevert.gif" ALIGN="RIGHT" HEIGHT="600" WIDTH="2" ALT="">Feel free to place anything on this side.
<P>This cell is 30% of the browser screen width.
<P>The vertical line is really an <STRONG>image</STRONG> placed in this cell and aligned to the right side of the cell.<BR>
<TD WIDTH="70%">This is the right side of the table.
<P> I could have placed the vertical line (the image) in this cell by aligning it to the left side of the cell.
<P> This line is 600 pixels in height (the same length as the table) and 2 pixels wide.
</TABLE>

You learned in Lesson Eleven that the WIDTH can also be expressed in pixels instead of as a percent. Therefore, instead of WIDTH="30%" for the first cell, you could use, for example, WIDTH="200" representing 200 pixels. If the average screen width is 600 pixels, then 200 pixels represents one third of the width. I often see the first cell defined in pixels on other web pages. There is no need to define the width at all for the second cell as screen widths vary from browser to browser. As you learned in the last lesson, specifying a width in pixels will give an exact width which can't be changed (and you may want this to be the case). Specifying the width as a percent of the current screen will allow the table to be expanded or compressed to fit the viewer's browser screen. It would be a good learning experience to do some experimenting with the WIDTH attribute.

There is one more side-line option that you will find very interesting and one that you may want to consider. To see this one, along with an explanation, just click here.

| top | | bottom |

ANSWERS

Answer to Problem 1: Here is the BODY part of the HTML document. I numbered the first 13 lines so I can refer to them in the discussion given below the document.

Line 1:        <TABLE BORDER="5" CELLSPACING="0" CELLPADDING="3">
Line 2:        <TR>
Line 3:        <TH COLSPAN="6"><BR>DRILL SPEEDS<BR><BR>
Line 4:        <TR>
Line 5:        <TH ROWSPAN="2">&nbsp;
Line 6:        <TH ROWSPAN="2">MATERIALS
Line 7:        <TH ROWSPAN="2">DIAMETER<BR>IN INCHES
Line 8:        <TH COLSPAN="2">CUTTING SPEED
Line 9:        <TH ROWSPAN="2">RPM
Line 10:       <TR>
Line 11:       <TH>Feet
Line 12:       <TH>Metres
Line 13:       <TR>

  1. The <TR> in line 2 indicates the beginning of the first row.
  2. Note in this table that the title of the table (DRILL SPEEDS) spans across all six columns (line 3). Thus after the title, we begin a new row as indicated by the <TR> in line 4.
  3. We are now in the second row of the table which is a row of headings. The first three cells in this second row span 2 rows each (lines 5, 6, 7). Therefore, row 2, column 1; row 3, column 1; row 2 column 2, row 3 column 2; and row 2 column 3, row 3, column 3 are all occupied.
  4. "CUTTING SPEED" is still considered to be in row 2 but it spans 2 columns instead of 2 rows (line 8).
  5. The heading RPM is also still in row 2 and it also spans 2 rows (line 9).
  6. After the RPM cell is set up, we need to begin a new row (row 3) as indicated by the <TR> in line 10.
  7. Note that the headings "Feet" and Metres" are considered to be in row 3, columns 4 and 5 respectively. Since row 3, columns 1 to 3 are occupied, a <TD> will automatically place "Feet" in column 4 (line 11) and "Metres" in column 5 (line 12). They are the only cells left to fill in row 3. Once that is done we begin row 4 (line 13). From row 4 and on, there are no more row and column spans. Some of the cells are empty and as before I placed the space character in them.

Answer to Problem 2:

The first row in the table contains the month "JULY" and this row spans all 7 columns. The blank cell in row 3 spans 2 columns (under "Sun" and "Mon") and to make it take on the appearance of the other cells, I printed the space character (&nbsp;) in it. Feel free to experiment with different designs of calendars. Here is the BODY of the HTML document that gives this calendar:

<H3 ALIGN="CENTER">
<P><TABLE BORDER="3" CELLSPACING="3" CELLPADDING="3">
<TR>
<TH COLSPAN="7">JULY
<TR>
<TH>Sun
<TH>Mon
<TH>Tue
<TH>Wed
<TH>Thu
<TH>Fri
<TH>Sat
<TR ALIGN="CENTER">
<TD COLSPAN="2">&nbsp;
<TD>1
<TD>2
<TD>3
<TD>4
<TD>5
<TR ALIGN="CENTER">
<TD>6
<TD>7
<TD>8
<TD>9
<TD>10
<TD>11
<TD>12
<TR ALIGN="CENTER">
<TD>13
<TD>14
<TD>15
<TD>16
<TD>17
<TD>18
<TD>19
<TR ALIGN="CENTER">
<TD>20
<TD>21
<TD>22
<TD>23
<TD>24
<TD>25
<TD>26
<TR ALIGN="CENTER">
<TD>27
<TD>28
<TD>29
<TD>30
<TD>31
<TD COLSPAN="2">&nbsp;
</TABLE></H3>

| Back to the top of the page |

| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Thirteen |

The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2009 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to htmltutorials@bfree.on.ca