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: 4 stars4 stars4 stars4 stars4 stars / 100
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

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

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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