WilRose HTML Tutorial, Learn HTML on line for free!

This site designed with Web Page Creator 32 HTML Editor ver. 6.0

Introduction

Backgrounds

Fonts and Text

Accents

Lists

Images

Links

Tables

Frames

Forms

JavaScript

Great Books

Members Area

I put the "Tables" section toward the end of this tutorial because they are rather complex to understand at first, they take longer to work with, but tables are the most versatile and useful of all these HTML tags.

There are many tags and variable attributes that you can use within the "<TABLE>" & "</TABLE>" tags. But first, a quick run down of just the basics. (Inside a TABLE.

<TABLE> - Begins the Table

<TR> - Begins the first Table Row

<TD> - Begins the cell containing the Table Data

</TD> - Ends the cell containing the Table Data

</TR> - Ends the first Table Row

</TABLE> - Ends the Table

This exmple is the minimum requirements for your table to work. It shows a simple Table with one Table Row, and one Table Data cell that is presently empty.

Fire up that old text editor and create your first table page something like this:

<HTML>
<HEAD>
<TITLE>My First Table Page</TITLE></HEAD>

<BODY BGCOLOR=#000000>
<H1>My First Table Page</H1>

<TABLE>
<TR>
<TD><FONT SIZE=3 COLOR=#FF0000 FACE="Arial">This is my text in a Table Data Cell</TD>
<TD><FONT SIZE=3 COLOR=#00FF00 FACE="Arial">This is my text in my second Table Data cell</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Other useful things to know about Tables:

You can change the background colors of individual cells
You can use background images instead of colors in each individual cell
You can specify the width and height of the entire table, or any cell in both # of pixels, or % of the screen size
You can use Tables to force or manipulate text wrapping around images
You can put Images in any table data cell
You can specify Table Headings, columns, rows, cellpadding, cellspacing, and more
You can use Tables to control how your pages looks at any screen resolution

Start with the standard document requirements, and include the "Table" Tags.

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE>

<TABLE>

</TABLE>

</BODY>
</HTML>

Now let's create some columns and rows inside the table.

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE>

<TABLE>

<TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR>

<TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR>

<TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR>

<TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR>

</TABLE>

</BODY>
</HTML>

Notice when you view it that you see only the series of numbers and letters. Now add a "BORDER" to your table.

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE>
<TABLE BORDER="1">
<TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR>
<TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR>
<TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR>
<TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR>
</TABLE>
</BODY>
</HTML>

View this and you'll see an entirely different effect.
You can add Headings to each column by simply including this little snippet of code:

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE>
<TABLE BORDER="1">
<TR><TH>A</TH><TH>B</TH><TH>C</TH><TH>D</TH></TR>
<TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR>
<TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR>
<TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR>
<TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR>
</TABLE>
</BODY>
</HTML>

OK, now you're beginning to cook with fire. Let's go in a little deeper now.
You can further manipulate the appearance of your tables with a few more neat little options.
Add Spacing and Padding to your table data cells.

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE>
<TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5" >
<TR><TH>A</TH><TH>B</TH><TH>C</TH><TH>D</TH></TR>
<TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR>
<TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR>
<TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR>
<TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR>
</TABLE>
</BODY>
</HTML>

Now add a "CAPTION" to your table to cue in the world to what it's all about.

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE>
<TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5">
<CAPTION>My Table is Growing Fast</CAPTION>
<TR><TH>A</TH><TH>B</TH><TH>C</TH><TH>D</TH></TR>
<TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR>
<TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR>
<TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR>
<TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR>
</TABLE>
</BODY>
</HTML>

Now let's "center" the table and define it's width. You can easily define the width and height of your tables to manipulate the screen appearance like so:

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE>
<CENTER>
<TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5" WIDTH="75%">
<CAPTION>My Table is Growing Fast</CAPTION>
<TR><TH>A</TH><TH>B</TH><TH>C</TH><TH>D</TH></TR>
<TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR>
<TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR>
<TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR>
<TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

We be Smokin' Now! OK, now add some "Row Headings".

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE>
<CENTER>
<TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5" WIDTH="75%">
<CAPTION>My Table is Growing Fast</CAPTION>
<TR><TH>A</TH><TH>B</TH><TH>C</TH><TH>D</TH></TR>
<TH>Row # 1</TH> <TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR>
<TH>Row # 2</TH> <TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR>
<TH>Row # 3</TH> <TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR>
<TH>Row # 4</TH> <TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

View it.
There are times when you may want to align the data in the headings or the table data cells to the left or right in order to accomplish certain desired effects. Let's align the row headings to the right just so you can see the example of how it works.

<HTML>
<HEAD>
<TITLE>My First Table</TITLE></HEAD>
<BODY BGCOLOR=#00EEEE>
<CENTER>
<TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5" WIDTH="75%">
<CAPTION>My Table is Growing Fast</CAPTION>
<TR><TH>A</TH><TH>B</TH><TH>C</TH><TH>D</TH></TR>
<TH ALIGN="RIGHT">Row # 1</TH> <TR><TD>1-A</TD><TD>1-B</TD><TD>1-C</TD><TD>1-D</TD></TR>
<TH ALIGN="RIGHT">Row # 2</TH> <TR><TD>2-A</TD><TD>2-B</TD><TD>2-C</TD><TD>2-D</TD></TR>
<TH ALIGN="RIGHT">Row # 3</TH> <TR><TD>3-A</TD><TD>3-B</TD><TD>3-C</TD><TD>3-D</TD></TR>
<TH ALIGN="RIGHT">Row # 4</TH> <TR><TD>4-A</TD><TD>4-B</TD><TD>4-C</TD><TD>4-D</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

You can use the ALIGN="LEFT", CENTER, or RIGHT to align any Row or Column Headings or the content of any Table Data Cell. Use them however you see fit. Use your imagination.
You can also specify the width of each column by just adding the "WIDTH" attribute to the top cell of the column and the entire column will follow that lead. Width can be expressed in % or in # of pixels. For example, insert this code into your Column Headings on your fast growing table:
<TR>
<TH WIDTH="20%" > A</TH> <TH WIDTH="20%" > B</TH>
<TH WIDTH="20%" > C</TH> <TH WIDTH="20%" > D</TH>
</TR>

Insert an Image into your table data cell like so:
<TR><TD><IMG WIDTH=58 HEIGHT=34 BORDER=0 SRC="Images/Back.gif"></TD></TR><(B>
It's just as simple and easy as that!
You can also span rows or columns with any data cell, you need only use the "COLSPAN" or the "ROWSPAN" attributes in the <TD> tag. If you want your top row to span the width of the entire table simply tell it to. Add the following lines to your "Fast Growing Table" as the very first Table Row (<TR>).
<TR><TD COLSPAN=5>Spanning the columns!</TD></TR>
Use the "Rowspan attribute the same way to span as many of your table rows as you desire.
Some other notes on TABLES:
Change the background colors of each table row or each individual table data cell, column, or row. Although be aware that in older versions of both Netscape Navigator and Microsoft Internet Explorer, this will not work.
<TR><TD BGCOLOR="red"><FONT COLOR="black">Text data in table data cell</FONT></TD></TR>
Use the color codes, color names, declare the background color or image for each individual cell, by rows, by columns, however you want it!
When it comes to versatility, you just cannot beat tables. And you cannot practice using them enough either. the more you use them, the more tricks you'll learn for newer ways to use them. You can use the "BORDER attribute to create a frame for the photo of your happy smiling face on your homepage! Now go practice!
Top of Page?

Tutorial Front Page / Backgrounds / Fonts & Text / Accents / Lists
Images / Links / Frames / Forms / JavaScript
Cool Free Web Stuff / Recommended Books / Web Site Design / WilRose.com Home