Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

HTML Advanced: Tables : Page 11

Step-by-step guides for creating tables and some ideas for ways to use them in your pages.


advertisement
Nesting Tables

<table>
 <tr>
 <td>
<--!--comment here, begin nested table-->
   <table>
    <tr>
    <td>
    </td>
    </tr>
   </table>
<--!--comment ends here, nested table ends here-->
 </td>
 </tr>
</table>

Nesting tables within tables lets you create some complex effects from just basic HTML table tags. Nesting tables places one table inside of another. To nest a table, start the table as you normally would. When you come to the cell into which you want to place the nested table, enter the table data tag. Then, instead of typing the contents of the cell as you normally would, start the nested table. The table becomes that cell's content. After you end the nested table, be sure to end the table cell it is in with the <,/td> tag.



This table was built by nesting tables inside one another. We'll be the first to tell you it isn't a terribly attractive table, but it shows how you can place tables within tables.

Fish Invertebrates
Guppy
Fancies Plain
Blue Yellow
Green Orange
Snail
Regular Large

This is another example of three nested tables. This table incorporates both images and text:

Aquarium Animals Fish Invertebrates
Guppy
Fancies

Plain

Snail

Regular Large

Nesting tables can lead to complex tables -- which are both visually interesting and have the potential of introducing errors. One of the most common HTML errors is a missing or misplaced table tag.

If you are nesting tables, be sure to track your start and end table tags. Arrange your text file in a way that is as clear and easy to follow as possible, using comment lines as necessary. Remember, a comment line is a tag that starts with the <! --. character and ends with the -- > characters, like this:

<!-- THIS IS A COMMENT. IT WON'T DISPLAY-->



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap