Table of Contents
 Home
 About this Tutor
 Introduction
 HTML Editors
 Basic Code
 Utter Basics
 The Body Tag
 Headings
 The Font Tag
 Images
 Tables
 Tables Part Two
 Tables Part Three
 Nesting Commands
 Some Design Tips
 Meta Tags
 Web Hosts
 Uploading Your Site
 Copyright Issues
 HTML Mail Lists
 Future of HTML
 Marketing
 Style Sheets
 CSS and Text
 CSS and Fonts
 CSS and Cursors
 CSS and Backgrounds
 CGI
 CGI Scripts
 JavaScripts
 Affiliate Programs List
 Browsers
 Dang 404 Errors
 Color Chart One
 Color Safe Chart
 Color Chart Three
 Code Chart
 Arial Character Map
 Times Character Map
 Wing Ding Character Map

 Meta Tag Generator
 BBS Forum
 Contact Us
 Glossary
 SiteMap
This Site Has Been Rated:
Rating = 7.69By 180 Users
Please Vote Here:

Nesting Commands

The command structure is very important. In older versions of HTML it wasn't very important to keep track, and order, with your code. It isn't today either, actually. But it will be very important in the future of HTML. That is why I want you to learn now, while it's a bit forgiving, that code needs to be nested. It's not much of a problem to do, just as long as you realize that you must keep order.

Please take the time to learn this the proper way, so you don't have to learn it all over next year or the year after when the HTML Specification by W3C changes and upgrades. The W3C is the organization who controls and creates the specification that controls HTML and what browsers show to people surfing the web.

What we mean by that is ... all the code that you start must end in the same order.

Hmmm ... what did he say?

Here are two lines of code that accomplish the same thing:

<center><font face="verdana">Text Here</font></center><br>

<center><font face="verdana">Text Here</center></font><br>

Notice that they both start off with <center> and then <font> but that one ends with </center></font> and the other with </font></center>. Which is correct? The nested one. Think of it this way. The last code you started is the first one you end. Therefore the first instance is correct, the second wrong. As HTML progresses the second will give you an error. At this point in time it will still work. But as mentioned several times in this tutorial, learn to do it right now, and you won't have problems later.

That's nesting, really nothing more than that. Here's another example:

<b><i>Text Here</i></b> or <i><b>Text Here</b></i>

Tables are also nestable. Nestable? Is that actually a word. Probably not, but I like the way it sounds. The principle of nesting holds true for tables. You start one table, begin another within a cell of that table, and end it BEFORE you end that same cell of the first table. Nested within each other. A table within a table, actually, a table within a cell.

<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr align="center">
<td width="50%">Column One</td>
<td width="50%">
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr align="center">
<td width="50%">Nested</td>
<td width="50%">Within this Cell</td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td width="50%">
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr align="center">
<td width="50%">Nested</td>
<td width="50%">Within this Cell</td>
</tr>
</table>
</td>
<td width="50%">Second Column</td>
</tr>
</table>

Here is how this will look:

Column One
Nested Within this Cell
Nested Within this Cell
Second Column

Did I hear you say you wanted an HTMLArea here to mess around with the nested table? Well, OK ... if you really insist I guess I can accommodate.

You Must Use IE Here ... NOT Firefox!


There you have a table nested within another table. All code ends in the reverse order that it started. Notice that cellpadding is set to 5. That is why there is a little space all around the nested table within the cell itself. Set this to zero and you won't have that. Set border to zero and you won't have the border, just the extra cells inside the original tables cell. Well now ... all is in place on heaven and earth.

In real life you probably don't have a use for the border and cellspacing and cellpadding in this type of application. I've used it mainly to show the space, and make it easier to see the nested table inside of a cell. What I want you to do is experiment with it, change all the attributes and generally mess around with the code. See how it works and get familiar with it. Tables are one of the best ways to position text and images on a web page. You'll use them over and over and over again. Get fluent and comfortable with them.

Another word about these HTMLArea boxes. The script is mainly JavaScript. JavaScript changes things that are put into it. The code we start with is all lowercase. The script changes that to partially caps. JavaScript and CGI are completely different languages. They do things differently. I teach you in this tutorial to use all lowercase in writing, that is HTML and it is the right thing to teach you. You need to understand that this HTMLArea script changes things, and as it stands today, that is OK. Just understand it is the script doing that and not me. Also, note in the above table that some code has been added. In particular a tag called <tbody> is added to my code. I didn't put it there, the script did. Just ignore these things for now. I feel the HTMLArea boxes allow you to experiment in real time right here and now, and make it worth the little inconvenience of it changing the code on us.


< >



Daily SEO Tips eMail
SEO Blog
SEO Training
SEO Basics 101 eBook
Learn All the Basics to SEO





© Copyright Night Train Web Productions Night Train Web Productions — All Rights Reserved
No Part of This Work May be Reproduced by any Means Without Prior Written Authorization
8153 / 051006 / 304075