Home Yellow Pages Movies Classifieds Jokes Jobs Free Hosting Videos




Lesson 1

<TABLE> tags

<TABLE> is the main tag used to tell the browser "this is a table", along with some attributes like size, border width and a few other things.

<TR>

TableRow defines a horizontal row of <TD> (TableData) cells.

<TD>

Specifies an individual block or cell in a table row.

To paraphrase: A table is made up of rows which in turn are made up of cells.

Open up Notepad and copy and paste off this page the following to get you started:

<HTML>
<HEAD>

<TITLE>My first table</TITLE>

</HEAD>

<BODY>
</BODY>

</HTML>

Save it as table_1.html in some folder somewhere. Open table_1.html in browser and run Notepad side by side. This way you can create your pages and almost instantaneously see the results of your handiwork.

Type in your table tags. These simply mean "starting a table" and "ending a table". Every table needs at least one row.

<HTML>
<HEAD>
<TITLE>My first table</TITLE>
</HEAD>
<BODY>

<TABLE>
<TR>
</TR>
</TABLE>

</BODY>
</HTML>

And of course every row has to have at least one table data cell.


<HTML>
<HEAD>
<TITLE>My first table</TITLE>
</HEAD>
<BODY>

<TABLE>
<TR>

<TD></TD>

</TR>
</TABLE>

</BODY>
</HTML>

Now, just to keep things a little cleaner, I am going to start writing only what is in the table tags. I will leave out the head, body, title, etc. tags from now on. Needless to say, keep them in your document.

<TABLE>
<TR>

<TD></TD>

</TR>
</TABLE>

Now you need something to put in that cell. Let's put Alex in the <TD> cell.

<TABLE>
<TR>

<TD>Alex</TD>

</TR>
</TABLE>

Well now, you are the proud owner of a fully functional html table! Open it with the browser and check it out! If you've done everything correctly your table should look like this:

Alex

First lets make it look more like a table and give it a border. Every time you make a change and want to see how it looks, you can hit the Reload (or Refresh) button on your browser.

<TABLE BORDER=1>
<TR>

<TD>Alex</TD>

</TR>
</TABLE>

View the output in browser. If you want a bigger border put BORDER=5, save the file and view the change in browser.

Alex

If you need a table with no border put BORDER=0 and is the default setting for table border.

When no sizes are specified the table is only as big as it needs to be.

<TABLE BORDER=3>
<TR>

<TD>Alex, Alice and Tom</TD>

</TR>
</TABLE>

The output will be displayed as :

Alex, Alice and Tom

Specifying a table size is pretty simple though.

<TABLE BORDER=3 WIDTH=100%>
<TR>

<TD>Alex, Alice and Tom</TD>

</TR>
</TABLE>

The output will be displayed as :

Alex, Alice and Tom

Here the table will be having a width equal to the screen's width. Change the WIDTH=40% and view the table. If you change WIDTH=100, then the table will be having a width of 100 pixels.

<TABLE BORDER=3 WIDTH=100>
<TR>

<TD>Alex</TD>

</TR>
</TABLE>

The output will be displayed as :

Alex

The following code will change the height of the table to 75 pixels.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>

<TD>Alex</TD>

</TR>
</TABLE>

The output will be displayed as Alex in a table of width 100 pixels and a height of 75 pixel.

Alex

We can control where in the cell the data will appear.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>

<TD ALIGN=CENTER>Alex</TD>

</TR>
</TABLE>

The output will be displayed as

Alex

Similarly data can be aligned to RIGHT and LEFT. Try the above code with ALIGN=RIGHT and view the output in browser.

The default value is (usually) ALIGN=LEFT. You probably already know, by the way, that the default value is the value that the browser assumes if you have not told it otherwise.

We can also control where data will appear vertically in a cell.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>

<TD ALIGN=LEFT VALIGN=TOP>Alex</TD>

</TR>
</TABLE>

The output will be displayed as

Alex

Similarly data can be vertyically aligned to BOTTOM and MIDDLE. Try the above code with VALIGN=MIDDLE and view the output in browser. The default value is (usually) ALIGN=MIDDLE.

Images can also be placed in a table data cell. Save the image to the folder you are working (the folder having tables_1.html). Then substitute an <IMG> tag for Alex.

* To save an image off of a web page, right click on it and choose Save Image As (or something similar).

<TABLE BORDER=3 WIDTH=160 HEIGHT=150>
<TR>

<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="http://media.bizhat.com/phptutorial/applepie.gif" WIDTH=150 HEIGHT=134></TD>

</TR>
</TABLE>

The output will be displayed as

It is good practice to include size attributes with all your image tags. When your browser knows in advance how big your image is going to be, it loads the page faster.

<--HOME        NEXT-->

BizHat.com   Bookmark   Astrology   Chat Room   Classifieds   Computer   Downloads   Directory   Dating   Domain Tools   Education   eCards   Finance   Forums   Freelance Work   Free Hosting   Free Mail   Gallery   Games   Guest Book   Greeting Cards   Ham Radio   Health   Home Business   Hosting Tutorials   Hosting Directory   India   Jobs   Jokes   Kerala   Matrimonial   Music   Movies   News   News Letter   Recipes   Real Estate   Search   SMS   Tourist Guide   Top 100 Sites   Vote Us   Yellow Pages   Arthunkal Church   Site Map  

Google