eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
 ::   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
Basic Tables  
  • Well, as I know you know by now, basic HTML does not actually give you much control over where things go on your page.

  • For the most part, the browser gets to determine placement and you are left simply communicating general layout instructions.

  • However with the introduction of HTML 2.0 in 1995 came the first really powerful tools for HTML layout: Tables.

  • Tables give you the ability to position elements in your page with much greater accuracy.

  • Of course, the original intent of HTML Tables was to provide a way to present tabular data in rows and columns.

  • Thus the first tables looked something like the following:

Column One Header Column Two Header
Row One/Column One Row One/Column Two
Row Two/Column One Row Two/Column Two

  • A table is composed of several tags that are outlined in the table below:

<TABLE> </TABLE> Specifies an HTML table. (By default the table will have no borders)
<TH> </TH> Specifies a Table Header Cell
<TR> </TR> Specifies a Table Row Cell
<TD> </TD> Specifies a Table Column Cell

  • Thus, the following code would create the very basic table that was shown previously:
<TITLE>Table Example</TITLE>

<TH>Column One Header</TH>
<TH>Column Two Header</TH>

<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>

<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>

  • One thing to keep in mind about tables is that you may incorporate regular HTML formatting tags within a table. Thus you could make the contents of a cell bold with the following table cell definition:

<TD><B>This text is bold</B></TD>

Previous Page | Next Page