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.

Next: The Use of the DIV tag >>
 

More HTML Articles
More By Stephen Davies

Comments On: Learn to Use HTML Tables and DIV tags Quickly

· Doesn't work as presented, and the random beginner who knows enough to fix it...    · bit negative.... which part does not work exactly?? tests showed it work, please...    · I must be missing something. How can you explain how to use divs and tables...    · I tried the examples; cut-and-paste added some erroneus < and so on.I ended...    · hi it seems that you forgot to add _ at the id .. i tried copy paste your script...    · I'm trying to learn how to use div's instead of a table so i have more control over...   >>> Post your comment now!