eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

Introducton to Web Design
Tables Inside of Tables  
  • You can quickly see how much more control over layout is afforded by tables. By making the table BORDER invisible, you can layout pictures and text in all sorts of creative ways.

  • However, a real mastery over layout necessitates setting tables within tables.

  • Below is an example of how you might use tables within tables to achieve a fairly complex design (Okay, so I had to shrink it so small you can't read the text, but you can get a good idea about the layout).

  • The line art drawing below shows the layout of the table within a table.
  • Let's take a look at the code necessary to create the above web page....

<HTML>
<HEAD>
<TITLE>Electric Eye Pte Ltd</TITLE>
</HEAD>
<BODY BGCOLOR = "#000000"
            TEXT = "#000000">

<CENTER>

<!-- Here is the beginning of the outermost
table -->

<TABLE BORDER = "0" CELLSPACING = "0"
            CELLPADDING = "0">

<!--The first table row is reserved for a title
image that spans both table columns -->

<TR>
<TD COLSPAN = "2" VALIGN = "BOTTOM">
<IMG SRC = "./Images/title_bar.gif"
            WIDTH = "625"
            HEIGHT = "63" HSPACE = "0"
            BORDER = "0"
            VSPACE = "0" ALIGN = "LEFT">
</TD>
</TR>

<!-- The next table row is divided into two
columns.   The first column is a set of
navigation buttons.  This column will be colored
blue to get the side bar effect.  The title image
above actually had the blue coloring permanently
drawn in -->

<TR>

<TD BGCOLOR = "#3366cc" WIDTH = "130"
    VALIGN = "top">
A bunch of clickable images go here.
</TD>

<!-- The second column in the main table is
another table! -->

<TD BGCOLOR = "white" WIDTH = "493"
       VALIGN = "top">
<IMG SRC = "./Images/dot_clear.gif"
            HEIGHT = "1"
            WIDTH = "490" BORDER = "0">

<TABLE BORDER = "0" CELLPADDING = "0"
            CELLSPACING = "0">


<TR>

<!-- next come the two top text sections -->

<TD VALIGN = "top">
<FONT FACE = "Arial">
A bunch of text goes here
</FONT>
</TD>

<TD VALIGN = "top">
A bunch of text goes here
</TD>

</TR>

<!-- In the next row, we have one text piece
that spans two columns -->

<TR>

<TD VALIGN = "top" COLSPAN = "2">
A bunch of text goes here
</TD>

</TR>

<!-- Yet another row is used for footer
information -->

<TR>
<TD COLSPAN = "5">
footer goes here
</TD>
</TR>

<!-- Now we can close both the main and the
secondary tables. -->

</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Previous Page | Next Page