Subtitles of the Movie

Let me now introduce you to the concept of nesting HTML tables. Nesting is the placing of something within something else. Something else acts as a container of the something. When you nest tables, the nested table is contained within another table. This is the table which contains it. This is quite useful, this nesting of tables for formatting page layouts using tables but also for achieving very precise or sophisticated layout of tabular information such as more sophisticated layouts of columns of sports scores, financial data or even grades. Usually tables are positioned relatively. Control over positioning within tables is really quite poor so you're constrained to certain kinds of layouts only; hence the need to sometimes nest your tables which means tables can be placed within other tables and it can give you much more sophisticated and much more flexible layouts. For example, let's say that you have a page and you'd like to have a navigation element on the left with content on the right. One way to create this kind of effect is by using nested table. Here is a table which contains two other tables. This table on the left could be your navigation. The table over to the right could be content. Notice that these can also be extended vertically as far as I need. So here my navigation table could be very, very narrow and my content table could be as wide as needed. You'll create new HTML tables by adding additional table tags inside of an existing table. So of you notice, here is a my parent table. Width is 500. Height is 187. Border is one. I have some cell padding on there. Let's go ahead and increase the cell padding to 20 and notice that I can really see then the nested tables inside of my parent table. There's a ten-pixel padding to the left and to the right. Additional tables are then placed inside of that initial table tag. This highlighted table here has a width of 380, height of 60, border one, align right, cell padding is two. My third table is this one to the left. Here is the HTML for it. Align left, cell padding two. This width is only 120 pixels. Here I've reproduced just the code for those two tables that are nested inside the parent table. The containing table is the code here in red. It's 500 pixels in width. It's opened and closed the same way but as you can see within the table data cell, the td cell, it contains two other tables. The code for the table to the left is in black. The wider table to the right is in blue. Notice again the containing table encompasses the other two tables. The nested tables are coded just as a standard table would be coded. Now, as you can imagine, this can get pretty complex if you use table layouts that are heavily nested. It's best not to use too many tables too deeply within other tables within a page. Practical use of nesting tables however is useful and something that many websites develop to gain control over the formatting of certain kinds of content. So here you have a relatively simple example of two tables nested within another table. Let's now move on to the next section of the tutorial on forms. Forms make your HTML pages interactive by making it possible for your users to give you feedback. So in the next section of the tutorial you'll learn all about how to insert forms into your HTML documents, all about text input boxes, checkboxes, radio buttons, list boxes and many other elements to facilitate the entering of data from your users to you on your web pages.