Tables and Images
 

 

Adding tables, images, and other useful tags:

You should be well on your way to creating your first webpage. When in doubt, remember to keep it simple, you can always save a template file and “try different things” with it.

Here we will once again build on our previous example, this time adding more formatting and 'eye candy'.

 

---------------------------------------------------------

<HTML>

<HEAD>

<TITLE>Greetings to the World! Our website saying hello! </TITLE>

<META name="description" content="The 'Hello, World!' website sending greetings to all.">

<META name="keywords" content="hello, hello world, hi, greetings, greet">

</HEAD>

<BODY>

<DIV align=”center”>

<TABLE width=”80%” border=”1”>

<TR>

<TD> <IMG SRC=”welcome_image.jpg”> </TD>

<TD><FONT size=2> Hellow, World! <BR> ¡Hola, Mundo! </FONT> </TD>

</TR>

</TABLE>

<BR><BR>

<HR width=”50%”><BR>

</DIV>

</BODY>

</HTML>

---------------------------------------------------------

 

Here we introduce the '<TABLE>' and '<IMG>' tags. '<IMG>' is fairly straightforward (Image tag) and its main attribute 'SRC' defines the location of the image. The '<IMG>' can have several other attributes, including 'height' and 'width' to constrain an image's proportions.

The '<TABLE>' tag gets a little more complex with its internal '<TR>' and '<TD>' tags. '<TR>' denotes a table row, and '<TD>' denotes a cell's data. the easiest way I have found is to use formatting similar to the above and picture the table as a two dimensional grid. The number of rows and columns within a table is arbitrary and can be changed as needed. We could add another row to the table above by doing the following:

 

---------------------------------------------------------

<TABLE width=”80%” border=”1”>

<TR>

<TD> <IMG SRC=”welcome_image.jpg”> </TD>

<TD><FONT size=2> Hellow, World! <BR> ¡Hola, Mundo! </FONT> </TD>

</TR>

<TR>

<TD colspan=”2”>Some greeting and other info goes here</TD>

</TR>

</TABLE>

---------------------------------------------------------

 

In this example we use the 'colspan' attribute to have a single, undivided cell for text on the second row. We could also use two '<TD>' tags that would provide two separate table cells for information. It is important to keep the number of table cells equal for each row in the table. If table cells are missing, the resulting webpage may be formatted incorrectly.

 

Now that you have a grasp on the basic structure of HTML and some techniques, it is time to start playing around and creating webpages. As long as you have a text editor to create the files, and a web browser to view them, you are good to go. So start making some pages with the tags you have learned. Don't be afraid to research each tag's properties, lookup other tags, and try new things. HTML is very forgiving when displaying the code so feel free to experiment and learn the capabilities of HTML

 

 
Tables in HTML

 

 

 
Domainz DIY Web Design Tool allows you to create

a professional web site in minutes. Find out more


 

 
< PREVIOUS    NEXT >

2006 Domainz Limited - A Melbourne IT Company

Level 1, St Laurence House, 138 The Terrace , Wellington, NZ

Offices: Wellington, Melbourne, London, Paris, Amsterdam, Madrid, San Francisco
www.domainz.net.nz