Profsr Home

Registration

Tutorials Area



CONTENTS

Lesson 1
Preparation



Lesson 2
The Stylesheet



Lesson 3
Basic Tags



Lesson 4
Tables



Lesson 5
Lists



Lesson 6
Java



Profsr.com
Simple HTML Tutorial


LESSON 4 - SETTING THE <TABLE>







My all-time favorite HTML tag has to be: <TABLE> ... </TABLE>. In my humble opinion, when it comes to formatting a web page, including text and pictures, you can do just about anything you can imagine with TABLES.

The basic structure of a table is this:

<TABLE>
     <TR>
         <TD>R1C1</TD>
         <TD>R1C2</TD>
     </TR>
     <TR>
         <TD>R2C1</TD>
         <TD>R2C2</TD>
     </TR>
     <TR>
         <TD>R3C1</TD>
         <TD>R3C2</TD>
     </TR>
</TABLE>


Which results in this:

R1C1 R1C2
R2C1 R2C2
R3C1 R3C2


That table consists of 3 Rows X 2 Columns. But you can construct a table consisting of 1 Row X 1 Column or one of 15 Rows X 5 Columns.

Inside the <TABLE> tag, each <TR> identifies a row (TR for Table Row).

Inside each <TR> tag, each <TD> identifies the content of a column, or cell of the Table (TD stands for Table Data); the TD contains the actual data that you want displayed.

Here is a small example of a table at work (get it? ... a worker, at work ...:)


You can display a picture and a description next to it, in the center of the page, in color.

OR YOU CAN USE 2 COLUMNS

You can make newspaper-style columns by using the class attribute from style sheets to justify the text and position it so that the columns are of equal width inside the table.
You can write as much as you want inside the "cell" and it will expand as much as required, up to the width of the table you specified, in this case, 50% of the page.

The right-hand column is the same width as the left-hand one. It does not have to be the same length.



Here's what the HTML code for that table looks like:



And just by changing BORDER=1 to BORDER=0 in the <TABLE> tag, we eliminate the lines and you can't even tell it's a table anymore:

You can display a picture and a description next to it, in the center of the page, in color.

OR YOU CAN USE 2 COLUMNS

You can make newspaper-style columns by using the class attribute from style sheets to justify the text and position it so that the columns are of equal width inside the table.
You can write as much as you want inside the "cell" and it will expand as much as required, up to the width of the table you specified, in this case, 50% of the page.

The right-hand column is the same width as the left-hand one. It does not have to be the same length.




Now, here is a 1 X 1 table with a background color.

The code for that table is this:

<TABLE bgcolor="#FFFFCC" width="60%" border="1">
     <TR>
     <TD>
          text
     </TD>
     </TR>
</TABLE>


Tips and techniques

1) Tables don't like blank cells. If you create a table displaying a schedule, for example, you are bound to have empty cells in it. Make sure that you use the non-breakable space character &nbsp; in every cell that you must leave empty. Otherwise, you'll have a heck of a time lining-up everything.

2) A good HTML Editor should come-in very handy right now. It would be very long to go through all the attributes of tables that you could use. Your Editor should provide lists of attributes and explanations for all the tags and you should be able to build your tables with those.

3) Remember that when you use the colspan attribute to span more than one column (there is also a rowspan attribute to span rows) you are using-up cells. In the example above, the second row only has 1 <TD> since it spans 2 cells.

4) You do know about View --> Page Source in the menu bar, don't you? Your browser, Netscape in this case, lets you look at the HTML code for the page that you're viewing. Don't be afraid to use it. When you see a page that you like, take a look at the code and figure-out how it was done. It's amazing what you can learn by doing that.