HTML Table Tutorial

Revised: 03/27/2004

Quick Study

Chapter Two Basic HTML

BBecause HTML is simple plain English text, it's possible to create web pages in any text editor such as Windows Notepad or Mac SimpleText or word processor that will save files as plain text. As you work through my HTML tutorials, I recommend that you DO create your HTML in a text editor. That's simply the best way to learn. Go to this site for your HTML Editor

To begin with, here is the steps that you have to do in creating your FIRST HTML using NOTEPAD.

 <HTML>
 <Head>
 <Title>Your Homepage Title Goes here</Title>
 </Head>
 <Body>The message goes in here
 </Body>
 </HTML>

Once you are done making your code...click on the FILE menu in your Text Editor and choose SAVE. Save the file as "index.html" then upload it into your FTP Space.

Putting a Style in your homepage like Color Text or Background is a great way to do in using an HTML Coding. For a list of Color codes, you can visit this site Click Here. If you want to put color in your FONT, you may need to specify it on the Body of the webpage like the <Body Text: LINK: Alink: Vlink: >. And the background color is should be BGCOLOR=" (put the color here )".If you wanted to be more realistic, you can change the background color into an IMAGE, the syntax for that is Background="(the URL address of the Image)" Using Tables When you think of a tables, you probably visualize bunch of numbers or data arranged where we could position them using the COLUMN and ROW. Say you wanted to make a Code that will form a chart for numbers or Alaphabet. You could do that using a table.

Using Tables

When you think of a tables, you probably visualize bunch of numbers or data arranged where we can position them using the COLUMN and ROW. Say you wanted to make a Code that will form a chart for numbers or Alaphabet. You could do that using a table.

For Example of Table using Column and Row:

Table One Table Two
Table Three Table Four

Tables can be very simple. Before we go let me have you familiarize with those commands we needed to get started:

< TABLE> and </TABLE> This is the start and the end of the table in the HTML code.
<TR> </TR> The start and the end of a table row.
<TD> </TD> Stands for table data. Each single table cell within a table row needs to be defined with these opening and closing tags.
<CAPTION> </CAPTION> This tag can be used for the explanatory comment or designation accompanying a pictorial illustration. You can use single element Align.
<TH> </TH> Each single header cell within a table row needs to be defined with these opening and closing tags. The content of header cells is automatically displayed in bold text attribute and aligned centered.

The heading especially of an article or document can be added on a Table command. We can use the <Caption> element if we are trying to shows what was the content of the document.

Here is an example of a Table with a Caption elemet:

This is the Caption
Table one Table Two
Table Three Table Four

Here's the source code : 

     <Table Border=1 Cellpadding=2 cellspacing=2>  
          <Caption>First Table</Caption>   
            <TR>  
              <TD>Table One</TD>    
              <TD>Table Two</TD>
            </TR>
               <TR>
                 <TD>Table Three</TD>
                 <TD>Table Four</TD>
               </TR>
     </Table>

Another single element can be added within a Table is the "align". This tag has single attributes, which can be take the value as Top or Bottom. You can use the command line: <Caption align="bottom"> which is by default is top.

Image can be added in your TABLE using the <Img Src> element. Here's the example on how to add image on a TABLE.

Here is the example on how to add image on a web:

TestGraphic

If you wanted to put it on a Table, check this out.

This is a Caption
Graphics Test

Here's the source code of the above example:

   
        <Table Border="1" >
           <Caption align="bottom">This is a Caption</Caption>
              <TR>
           <TD><Img Src="Graphics.gif" width="82" heigth="62" ></TD>
              </TR>
     
        </Table>
Take Note: I just add the single element on Caption which is the Align.

A Table item can be span in several columns. Using the "colspan" and "rowspan", these two element can be added in tag to create quite complex displays. Here's an example using those two attributes:

This is an example of "rowspan"
Computers Type
Brand Hewlett Packard
Compaq Psenario
Packard Bell

To give you an example for the "colspan", see the table below:

This is a table with a colspan tag that will expand column of a table
Once we add this tag, you will see the difference without using the "colspan" tag the same way when we use the "rowspan" tag that helps customize the table 
 

<Table align=center Width="300" Border="5">
<TR>
      <TD colspan="3">This is a table with a colspan tag 
           that will expand column of a table </TD></TR>
<TR>
      <TD>Once we add this tag, you will see the difference
           without using the "colspan" tag>/TD>
      <TD>> the same way when we use the "rowspan" tag that
           helps customize the table</TD>
</TR>

</Table>

There are a lot of attributes you can add within a TABLE elemet. As of this time that is all I can share. But I will make some updates with this tutorial.

[Go Back] [ Chapter Three (LIST tag) ] [ Keyboard Shortcut ]

Google
[ Home ] [ Table Tutorial ] [ CSS Tutorial ] [ Div Tutorial ] [ JavaScript ]  [ List Tutorial ]
©1999-2000. Comments or Questions about this page? Please e-mail me at PCTechPH@yahoo.com . All Rights Reserved.
Visit Our Sponsors!
Affordable HP Products from Office Depot!
Net2Phone is the global leader in long distance savings!
Stop Missing Calls While You're Online!
Hear who's calling while you're online... Get the FREE the Internet Answering Machine
Click Here!
Be an Affiliates
Join the Monster Affiliate Program now!
Calling all Webmasters....Let us pay you for referring affiliates to the LinkShare Network.
HTML Tutorial!
Dynamic Drive DHTML code library
Visit Dynamic Drive for free, original DHTML scripts and components, all of which utilize the latest in DHTML and JavaScript technology!