This chapter doesn't introduce any new vocabulary or attributes. Instead, I'm going to take the time to clearly explain how nested tables work, and how they can be incorporated into the design elements of a web page.
What makes them complicated is what they end up doing to the code, so I'll also be including some tips on how to keep things organized so you always know exactly where in the page you are working without the need to constantly refresh your page in the browser and without any expensive programs like Adobe Dreamweaver.
Nested Tables are simply tables that are contained within another table. The most confusing element is knowing where one table ends and another begins, and which rows and columns belong to which table.
Utilizing the comment tags (as shown briefly in Chapter 4 of this guide) you will be able to quickly scan your code to find the area you want to work on. This method utilizes the fact that your web browser does not read line-breaks in the code, or blank space in the code. It simply bypasses this and goes straight to the next line of code.
For example:
<table><tr><td></td><td></td><td></td><td></td></tr></table>
--And--
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Look exactly the same to your browser. It just cares if your syntax is correct, and nothing else. As long as it is empty space, the browser ignores it, and when you add comment tags, the browser considers them 'empty space' in your code.
So using this, you can put several comments into your code, as well as blank space around them so they stand out in the code while you're scanning, see below, for an example.
------------------------------------------------------------
<body>
<!--Main Table Starts Here-->
<table>
<tr>
<td> <!--Nested Table #1-->
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td> <!--Nested Table #1 Ends-->
<!--NESTED TABLE #2-->
<td>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<!--NESTED TABLE #2 ENDS-->
</tr>
</table>
<!--Main Table Ends Here-->
</body>
----------------------------------------------------------------------
To conserve space I haven't used any of the table elements in this example, and only used one row with two cells, each containing their own nested table. The comment tags can be whatever you want, just make them stand out so you can quickly scan the code for them.
If you're wondering if it is possible to put more tables inside of these nested tables, the answer is Yes, you can. It will make the code that much more complicated to look at, and without the comment tags can be very easy to lose your place in the multitude of tables.
I have a method when it comes to working with tables, that my buddies have dubbed the KIS method. (Keep It Simple).
So when it comes to explaining Nested Tables I've set aside a chapter just for that. There is no Self-Learning Exercise for this chapter, since you're not really learning anything new when it comes to coding, and there is nothing new to practice here.
Just some tips that will make working with Tables and Nested Tables easier on you.
YOU ARE READING
How to Code - A Beginner's Guide
RandomThis guidebook was compiled from most of what I've learned over the years. Since I'm writing this one with the complete newbie in mind, any of you who have a fair degree of prior knowledge and skill in the area of web programming should probably loo...
