1&! US hosting - Hosting Made Easy. Order 1&1 Microsoft Web Hosting from the World’s # 1 Web Host. Get up to 5 FREE domains!
| HTMLCOOK - Main Page - lists all articles and tutorials |
||
| 1&1 hosting - UK hosting - Buy
your domain from 1&1 -
Best domain prices in the UK! 1&! US hosting - Hosting Made Easy. Order 1&1 Microsoft Web Hosting from the World’s # 1 Web Host. Get up to 5 FREE domains! |
|
|
Tables
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. |
| <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>
<BODY
BGCOLOR=#0000FF> <TABLE>
</BODY>
|
| View this page here |
|
Other useful things to know about Tables:
Start with the standard document requirements, and include the "Table" Tags. |
|
<HTML>
<TABLE>
</TABLE>
</BODY> Now
let's create some columns and rows inside the table.
<HTML>
<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>
|
| Notice
when you view it that you see only the series of numbers and letters. View this page 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>
|
| View this page |
|
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>
|
| View this page |
|
OK, now
you're cooking on gas!!!!!! You can
further manipulate the appearance of your tables with a few more neat
little options. |
| <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>
|
|
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>
|
| View this page |
| 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> |
| View this page |
| Great! 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>
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>
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>
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!
|
| <<Previous Page |