Home arrow HTML arrow Page 2 - Learn to Use HTML Tables and DIV tags Quickly
HTML

Learn to Use HTML Tables and DIV tags Quickly


Tables have always been popular for simplifying the layout of information on web pages. Style sheets, however, are replacing the idea of a tabulated format. Tables are still popular, though, as they present a very popular layout for design-friendly interfaces. So the need for some kind of combination between plain table tags and styles has arisen.

Author Info:
By: Stephen Davies
Rating: 3 stars3 stars3 stars3 stars3 stars / 78
November 21, 2007
TABLE OF CONTENTS:
  1. · Learn to Use HTML Tables and DIV tags Quickly
  2. · Use of Table Style
  3. · The Use of the DIV tag
  4. · Combining the use of DIV and TABLE tags

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Learn to Use HTML Tables and DIV tags Quickly - Use of Table Style
(Page 2 of 4 )

Tables can usually improve the composition and feel of any web site. They can, however, end up being too complex. It is not a good idea to move away from familiar table designs unless your design has a very consistent feel to it.

When adding borders to tables, it is good practice to remember to stick to transparent images. Navigation menus will stand out properly and be in a style that looks tidy. Consecutive tables will not appear below each other correctly; this will only occur if you place tables inside tables. This can be a cool trick sometimes to show a piece of tabulated data on the web page.

Here is some code that can be used to design a home page that hosts viral videos, like YouTube, but with just 3 columns of videos in 3 categories. Feel free to edit it if you want to use the code:

<table width="100%" border="0" height="500" align="center" cellspacing="0" cellpadding="3">

<tr valign="middle">

<td bgcolor="#006666" width="90" height="20">

<div align="center"><font color="#FFFFFF"><b><font size="2">Shocking Videos</font></b></font> </div>

</td>

<td width="4" height="20"></td>

<td bgcolor="#006600" width="90" height="20">

<div align="center"><font color="#FFFFFF"><b><font size="2">Funny Videos

</font></b></font></div>

</td>

<td width="4" height="20"></td>

<td bgcolor="#660000" width="90" height="20">

<div align="center"><font color="#FFFFFF"><b><font size="2">Famous Bloopers

</font></b></font> </div>

</td>

</tr>

<tr valign="top">

<td bgcolor="#006666" width="90">


Now we place the next <TABLE> code within the above table. Note the closing tag for the table above - </TABLE> - has not been added yet. That will be added after the final table:


<table width="100%" border="0" height="80" cellspacing="0" cellpadding="3">

<tr bgcolor="#FFFFFF" valign="top">

<td>

<p><font size="1">These videos will shock you

</font></p>

</td>

</tr>

</table>

</td>

<td width="4"></td>

<td bgcolor="#990000" width="120">


Now for the third table, again carefully inserting within the table tags above:


<table width="100%" border="0" height="80" cellspacing="0" cellpadding="3">

<tr bgcolor="#FFFFFF" valign="top">

<td>

<p><font size="1">Get ready to laugh hard!

 

</font></p>

</td>

</tr>

</table>

</td>

<td width="4"></td>

<td bgcolor="#000800" width="90">

<table width="100%" border="0" height="80" cellspacing="0" cellpadding="3">

<tr bgcolor="#FFFFFF" valign="top">

<td>

<p><font size="1">Actors do make mistakes!

</font></p>

</td>

</tr>

</table>

</td>

</tr>

</table>

Of course there are no videos inserted. If you like the idea, you could insert code from YouTube to see how it can look or insert information for a very different site that sells products or services right from the home page in 3 categories. It could be a travel site, for example, showing 3 columns for maybe Best Deals, Cheapest Flights and Competitions to win holiday trips. Decrease the widths of the columns and add more categories for your site idea.

It is up to you, and the table code can be altered to fit different designs.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 10 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials