Support This Site

WELCOME!!

 

AmeriYank's HTML Table Tutorial--Lesson Four.

 

In the last lesson, we learned how to make a table where not all the cells are the same size. To create the table, we learned the "COLSPAN="#"" code. AND, we learned that all the codes that work in basic HTML, will work within a cell or <TD> to create a table like this:

 

This is a table with 4 rows. But the columns are arranged to achieve this look. This is done using the colspan="#" command. You place it in the <TD> portions of your table. This is the default font of "Times New Roman".

You can write on this background. This text is centered.

But we put a bunny image on it for fun. This is the "Arial" font.

This is an image placed on a cell using the background color in the table. The image is centered, but the text is aligned to the left.

This is the default font of "Times New Roman"

You can write on this background, too. This text is aligned on the left .

and the same bunny is here, too.

This is the font called Lucida Handwrting.

This cell has no special background color. It uses the one specified for the table. It is the same for the cell color with the bunny in it on the right.

This is the default font of "Times New Roman"

This cell has a special background color all it's own, just for this cell. It matches the cell color with the bunny in it on the left.

This is the default font of "Times New Roman"

 

In this lesson, we will learn how to create a table similar to the one above, but using the ROWSPAN="#" code. We will also learn how to align text and/or images to at the top, bottom, and middle of a cell. This requires the use of the valign="command" code. We will learn how to create a table like this:

This cell's text is in the middle of the cell.

This cell spans 4 rows.

This cell has no background.

This is a single cell with a backround and text. This is a single cell with no background. The cell below is a single cell with a non-transparent image. This cell's text is at the bottom of the cell. This cell spans 3 rows.
This cell's text is at the top of the cell.This cell spans two rows.

This is a single cell with a different background color than the other cells. This cell is a single cell with no background. The cell above is a single cell with no background and a transparent image. This is a single cell with a background, text, and an image. The text is aligned at the top and left, but the image is aligned in the center.

 

Since we learned how to change background colors, backgrounds, etc, within a cell in the last lesson, let's assume you undestand that part and move to the valign code. It's really easy. If you want your text, image, whatever to be at the TOP of the cell, use the following code:

valign="top"

And place it into the code for the particular cell, like this:

<TD valign="top">

If you want your image or text to be in the middle, write:

valign="middle"

And your code looks like this:

<TD valign="middle">

For the bottom, write:

valign="bottom"

And your code looks like this:

<TD valign="bottom">

As you have probably already figured out, you can place many things inside a tag to tell the PC how to show your page. Last week, we learned that the COLSPAN command also goes into the <TD> tag. SURPRISE!!! So does the ROWSPAN tag. And just like the COLSPAN, you just tell the PC how many cells to span. So, to create a ROWSPAN of 4 cells, your tag would look like this:

<TD rowspan="4">

Now, suppose you want to have the text or image show in the very center of the cell, but aligned to the LEFT border? And suppose you wanted the cell to span 4 rows, like the one in the example above. Well, your code for that cell would look like this:

<TD rowspan="4" valign="middle"><align="left">

Remember, align="whatever" controls your HORIZONTAL text/image. It controls the way the information appears across the page. For example, the text you are reading now is LEFT aligned or, align="left".

This text is CENTERED, or align="center".

This text is RIGHT aligned or align="right".

The align code will work most anywhere on a web page and we have used it many times in this class.

The "v" in VALIGN stands for VERTICAL. It is usually used within a table cell to tell the computer where to place the text/image vertically. And the part that comes after the = sign is either, "top", "middle", or "bottom", depending on where you want the text to be.

Here the horizontal alignment is left and the vertical alignment is top.

The code for the alignment of this cell looks like this:

<td valign="top"><align="left">

Here the horizontal alignment is centered and the vertical alignment is centered, too.

The code for this cell looks like this:

<td valign="middle">
<align="center">

Here the horizontal alignment is to the right and the vertical alignment is at the bottom.

The code for this cell looks like this:

<td valign="bottom>
<align="right">

 

OK, so now you want to try to create a table with cells that span more than one ROW.

Remember, ROWSPAN spans the ROWS and will make your table cell span VERTICALLY.

COLSPAN, spans the COLUMNS and will make your table cell span HORIZONTALLY.

Remember that ALL tables are always rectangles. And all the cells work to make up that rectangle. So, the computer has to have every cell accounted for. What that means is that if you have a 4-celled table, like this:

Cell 1

Row 1 Column 1

Cell 2

Row 1 Column 2

Cell 3

Row 2 Column 1

Cell 4

Row 2 Column 2

 

and you want have a 3-celled table instead, with the ROWS being spanned, your new table will look like this:

   
 

The basic code for the above table (without the code for borders, width or anything else) is:

<table>
<tr>
<td rowspan="2">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

Now, lets suppose you want to have a 3-celled table with the COLUMNS being spanned. Your table would look like this:

 
   

 

And your code would look like this:

<table>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>

Now, suppose your table is 3 cells across and 3 cells down. AND you want some of the cells to span all the way across and some to span less. Let's start with a basic, 9-celled table. It looks like this:

     
     
     

 

Now, we want to have the ROWSPAN all of the cells on the left side of the table, none of the cells in the middle and 2 cells on the right. You want your new table to look like this:

     
 
   

 

Our code would look like this:

<table>
<tr>
<td rowspan="3"></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

 

Now, let's suppose you want the same pattern, but you want to span the COLUMNS, instead of the rows. Your new table might look like this:

 
     
   

 

Your code for the above table would look like this:

<table>
<tr>
<td colspan="3"></td>
</tr><tr>
<td></td>
<td></td>
<td></td>
</tr><tr>
<td colspan="2"></td>
<td></td>
</tr>
</table>

 

You can arrange the cells and spans any way you like. For example, you could have the middle section spanning all 3 cells and none of the other sections spanning anything. It's all up to you and how you want to design you web site. Again, YOU are the master/mistress of your domain!

Ok, so let's take a look at the big scary ROWSPAN table from the beginning of the lesson. Not so scary now, is it? Here it is with all the codes for each cell, except I am leaving out the font code.

Remember, if you do NOT specify, the computer will default the text/image
HORIZONTAL alignment (align=) to be "left".

If you do NOT specify, the computer will default to the text image
VERTICAL alignment (valign=) to be "middle".

 

<table border="5" width="95%" bordercolordark=
"#800000"
bordercolorlight=
"#FF0000">
<tr><td rowspan="4" valign="middle">
<align="left">

This cell's text is in the middle of the cell.

This cell spans 4 rows.

This cell has no background.

</td>

<td width="25%"
background=
"holidayfd.jpg">

This is a single cell with a backround and text.

</td>

<td width="25%">

This is a single cell with no background. The cell below is a single cell with a non-transparent image.

</td>

<td valign=
"bottom" rowspan="3" width="25%">

This cell's text is at the bottom of the cell. This cell spans 3 rows.

</td></tr>

<tr>

<td valign="top" rowspan="2" width="25%">

This cell's text is at the top of the cell.This cell spans two rows.

</td>

<td width="25%">
<img src="flower.jpg"
width="150" height="150">

 

 

 

 

</td></tr>

<td align="center" width="25%">
<p align="center">
<img
src="bunny.gif" width="50" height="50">

</p></td></tr>

<tr>
<td width="25%" bgcolor="#FF0000">

This is a single cell with a different background color than the other cells.

</td>

<td width="25%">

This cell is a single cell with no background. The cell above is a single cell with no background and a transparent image.

</td>

<td width="25%"
background=
"bluish.jpg">

This is a single cell with a background, text, and an image. The text is aligned at the top and left, but the image is aligned in the center.

<p align="center">
<img src="bunny.gif" width="50" height="50">

</p></td>
</tr></table>

 

Creating tables with rowspans is a little more difficult than creating them with colspans. Above all, BE PATIENT with yourself. When you design a web page, consider drawing your table out ahead of time on paper, so you have an idea of what you want it to look like. Then the code is not so confusing, if you fill in each cell on your paper first.

 

So, if we were going to have a page without a title or anything that simply consisted of the above table, our HTML page code would look like this, including the font code:

 

<HTML>
<BODY text="#FFFFFF" bgcolor="#000080>

<table border="5" width="85%"
bordercolordark="#800000" bordercolorlight="#FF0000">

<tr>

<td rowspan="4" width="25%">
<font color="#FFFFFF" face="arial">
This cell's text is in the
middle of the cell.
<p>This cell spans 4 rows.</p>
<p>This cell has no background.</p>
</font>
</td>


<td width="25%" background="holidayfd.jpg">
<font color="#FF0000" face="arial">
<strong>This is a single cell with a backround and text.</strong>
</font>
</td>


<td width="25%">
<font color="#FFFFFF" face="arial">
This is a single cell with no background.
The cell below is a single cell with a non-transparent image.
</font>
</td>


<td valign="bottom" rowspan="3" width="25%">
<font color="#FFFFFF" face="arial">
This cell's text is at the bottom of the cell. This cell spans 3 rows.
</font>
</td>

</tr><tr>


<td valign="top" rowspan="2" width="25%">
<font color="#FFFFFF" face="arial">
This cell's text is at the top of the cell.This cell spans two rows.
</font>
</td>


<td width="25%">
<img src="flower.jpg" width="150" height="150">

</td>
</tr><tr>


<td align="center" width="25%">
<p align="center">
<img src="bunny.gif" width="50" height="50">
</p>
</td>

</tr><tr>

<td width="25%" bgcolor="#FF0000">
<font color="#FFFFFF" face="arial">
This is a single cell with a different background color than the other cells.
</font></td>


<td width="25%">
<font color="#FFFFFF" face="arial">
This cell is a single cell with no
background. The cell above is a single cell with no
background and a transparent image.
</font>
</td>


<td width="25%" background="bluish.jpg">
<font color="#FFFFFF" face="arial">
<strong>
This is a single cell with a background, text, and an image.
The text is aligned at the top and left, but the image is
aligned in the center.
</strong>
</font>
<p align="center">
<img src="bunny.gif" width="50" height="50">
</p>
</td>


</tr>
</table>

</BODY>

</HTML>

That's it for this week!!

HAPPY CREATING!

 

HOME

Mary, Madonna and Blessed Virgin Mother and Jesus
Designs for Tsunami Relief.

Design and Sell Merchandise Online for Free

 

Tut
Back to Table Lesson One
Back to Table Lesson Two
Back to Table Lesson Three