Featured Templates
Home
HTML and CSS
Tutorials
Advanced Formatting
Added: Oct 03, 2005 Rating: Less than 3 votes yet
Level: Beginner Software:
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> |
Invisible Spacers
- Another useful tool in your layout toolbox is the invisible spacer .GIF.
- An invisible spacer .GIF is a one pixel by one pixel square with a transparent background that can be used to space things according to exact pixel locations.
- Because the spacer is invisible, it will look as if, you have a greater degree of control over the positioning of text.
- For example, consider the following example:
Here is some regular text
Here is some
text that has apparently been tabbed over.
How could you do this with regular HTML?
The answer is that you could not. - So how did we get that tab effect?
- Well simply, we used our invisible spacer .GIF with the following code:
| Here is some regular text <BR> <IMG SRC = "dot_clear.gif" BORDER = "0" WIDTH = "40" HEIGHT = "1"> Here is some text that has apparently been tabbed over. How could you do this with regular HTML? The answer is that you could not. |
- In the next example, we will put a one pixel border around the spacer so
you can see it in action:
Here is some regular text
Here is some
text that has apparently been tabbed over.
How could you do this with regular HTML?
The answer is that you could not. - You can also use the spacer .GIF to create vertical space as well. Check
out this usage (We will keep the border around the spacer so you can see
what is happening:
Here is some regular text
Here is some
text that has apparently been tabbed over.
How could you do this with regular HTML?
The answer is that you could not. - You will very often wish to have more control over the extra space between paragraphs than afforded by the <P> tag.
- Note that you can grab the invisible spacer .GIF used on this page and download it to your local Images directory for your own use. It is on the house.
Exercise Ten
- Okay, now take about 15 minutes to play with some tables within tables and spacers on your personal web page.
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com
10 Random HTML and CSS Tutorials :
10 Random Markuptutorials.com Materials: