P. 1
My Website is Better Than Yours

My Website is Better Than Yours

|Views: 977|Likes:
Published by Eliot Ness
Test of second document
Test of second document

More info:

Published by: Eliot Ness on May 16, 2009
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less





Some of the most flexible page design techniques involve the use of nested
tables. This technique is surprisingly simple—all you need to do is create the main
table (the outer table) and then insert another table (the inner table) in one of the
cells. Here’s a very simple example of HTML that nests one table in another, with the
rendering shown in Figure 4.9.

FFiigguurree 44..88.. Merging a cell both vertically and horizontally.





The size of the inner table, and the size of the
cell it is in, interact as follows:

•If the inner table’s width is specified as a
percent, it’s width will be that percentage of
the width of the cell it is in.

•If the inner table’s width is specified in terms
of pixels, it will display at that width. The cell
it is in will expand if needed
to accommodate.

•The inner table’s height
will be determined by its
content or by the height
attribute of the
elements it contains.

•The containing cell’s
height will expand, if
needed, to accommodate
the inner table.

FFiigguurree 44..99.. Nesting one table within another.

Merge or Embed — Which Is Better?

You may have already realized that these two distinct techniques,
merging cells and embedding tables in tables, are similar in some
respects. They are both techniques that let you escape from the
strict rectangular grid structure of a basic table. Which should you
use for a given design task? There’s no real answer to this question.
Many layouts could be created either way. As you work with HTML
tables and gain additional experience, you’ll gain an intuitive feel for
which technique would be better for a particular layout. Also,
remember that you can combine merged cells and embedded tables,
providing you with even more flexibility.



There’s no theoretical limit to the number of levels of table nesting. In my experi-
ence, two levels, as in the example in this section, is all that you need for most design
tasks. Three levels (table A is within table B which is within table C) is rarely called

Review and Practice

It’s time to get back to the photogra-
pher’s Web page that we have been devel-
oping. You’ll remember that in Chapter 3
we added some formatting to the page
and it was starting to look good, but there
were still layout problems. That version of
the page is shown in Figure 4.10.
What we need to do with the page
now is make some changes to the layout,
the way the text and images are arranged.
Tables, which you learned about in this
chapter, are just the tool for this job! So,
let’s get to work.
First, the plan: For the top part of the
page we will insert a three-row, three-col-
umn table. The three cells in the first row
will be merged to a single cell that will
hold the page’s main heading. The second
row will hold an image in the left cell, the list of photo services in the center cell,
and another image in the right cell. The last row will have the resume link in the
center and images on the two ends.
At the bottom of the page we’ll insert another table, this one with a single row
and two columns. The left cell will hold the education part of the resume and the
right cell will hold the exhibitions information.
Both tables will be set to have no borders so the images and text elements sim-
ply appear to “float” on the page. Padding and alignment will be set as needed for
the best appearance.

The final source code is presented in Listing 4.1. Because the photos are now
displayed in two rows rather than one, the page is longer, so it cannot be shown in
a single image. Figure 4.11 shows the top part of the modified page in a browser and
Figure 4.12 shows the bottom part.

FFiigguurree 44..1100.. The practice Web page before modifications.



LLiissttiinngg 44..11.. The modified HTML source code after adding tables to the page.

Dave Davidson Photographer


color=“#0000FF”>Dave Davidson, Photographer


Fine Art



View my resume


Dave Davidson has been an active photographer since 1992.
He specializes in portraits and fine art prints.




  • BS, Art History, University of Pennsylvania, 1988

  • MS, Photography, Chicago School of Design, 1991


  • Images From Nature, Smith Gallery, Los Angeles, 1994

  • Dave Davidson, Photographer in Nature, Oak Creek Center,
    Houston, 1996

  • Architecture of Manhattan,Bowles Museum,New York,

I hope that you’ll agree with me—the page looks really nice now and is ready
to be uploaded to the Web. That does not mean it could not be improved further!
We’ll be revisiting this page in later chapters.

FFiigguurree 44..1111.. The top part of the modified page.

FFiigguurree 44..1122.. The bottom part of the modified page.




HTML tables are an essential part of any Web designer’s arsenal of tools. It’s dif-
ficult to imagine any even slightly sophisticated Web page being authored without
the use of tables. While some Web gurus are proclaiming the demise of tables for
layout, I think they are a little premature. It’s true that you can create the same lay-
outs using CSS, and we will talk about this in Chapter 7, but there are still quite a
few issues with getting CSS-based layouts to display the same way in all browsers.
Internet Explorer in particular has a few bugs that make CSS-based layouts tricky
even for experienced Web designers. Because of this, I’m sure that layouts based on
HTML tables will be with us for quite some time.


Creating and Uploading
Your Web Pages

The previous several chapters taught you some HTML that you can use to create
basic, yet attractive Web pages and even to start adding some more sophisticated ele-
ments. Now it’s time to get to some of the practical nuts and bolts that a Webmaster
must be concerned with. These are not concerned directly with page design, but
they are essential to know.

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->