By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,299 Members | 1,054 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,299 IT Pros & Developers. It's quick & easy.

n000b looking for guidence - html conversion to tableless format

P: 1

I'm rather new to web development, and I'm trying to convert the following code (one of my first web pages) to a <div> format. In the code below, I use tables as placeholders for images (among other things), I'd like to remove all the table tags and use <div> tags instead, along with .css, in order to promote usability, and start learning how to make web pages the right way. I have a bunch of .css files that are defining the look of certain elements, but I am not using css positioning yet, which is the point I'm trying to get to.

I know my code is horribly fangled with tables, but it looks nice when the .css is applied. I'm trying to move away from my horrible way of creating web pages, but so far, all I know is that my way of creating web pages is horrible. I've be researching how to go about converting the code below for the past two days, but am coming up short in all the answers I find.

If anyone can give me a start on the code conversion and how to remove the code bulk and substitute for div tags instead, I'd be much oblidged.


The body of my horrible html template:

Expand|Select|Wrap|Line Numbers
  1. <body><!--My horrible table-munged code-->
  2. <div>
  3.   <table width="753" height="10" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">
  4.     <td align="left"><img src="../images/mainNavBar_Side.jpg"></td>
  5.       <td class="sgTopMenuOn" align="right"><a class="subhead3" href="*" >Link 1</a></td>
  6.       <td class="sgTopMenuOff" align="right"><a class="geoTabs" href="*">Link 2</a></td>
  7.       <td class="sgTopMenuOff" align="right" ><a class="geoTabs" href="*">Link 3</a></td>
  8.       <td class="sgTopMenuOff" align="right"><a class="geoTabs" href="*">Link 4</a></td>
  9.       <td class="sgTopMenuOff" align="right"><a class="geoTabs" href="*">Link 5</a></td>
  10.       <td width="6" align="right"><img src="../images/mainNavBar_Side.jpg"></td>
  11.   </table>
  12. </div>
  13. <div width="753" align="center"><img src="../images/mainNavBar_Bottom.jpg" width="753" height="8"></div>
  14. <table width = "753" class="bg_body" id="Table1" cellSpacing="5" cellPadding="5" align="center" border="0">
  15.   <!--Left Side Nav Table-->
  16.   <td width="153" align="left" valign="baseline" bgcolor="#ffffff" cellpadding="0" cellspacing="0"><table width="153"  border="0" cellspacing="0" cellpadding="0">
  17.         <!--DWLayoutTable-->
  18.         <div>
  20.           <td height="12" width="100%"  class="lefttopimage">::Menu :: </td>
  21.           </div>
  22.       </table>
  23.       <table width="100%"  border="0" cellpadding="0" cellspacing="0" class="sidetable" bgcolor="#000000">
  24.         <div>
  25.         <td height="100%" class="leftrightheadings"><div align="center">:: Home :: </div></td>
  26.           </div>
  27.         <tr>
  28.           <td height="100%" class="sidetext"><div class="sgSideMenuOn" align="right"><a href="*">SubLink 1</a></div>
  29.             <div class="sgSideMenuOff" align="right"><a class="geoTabs" href="*">SubLink 2</a></div>
  30.             <div class="sgSideMenuOff" align="right" ><a class="geoTabs" href="*">SubLink 3</a></div>
  31.         </tr>
  32.       </table>
  33.       <table width="100%"  border="0" cellspacing="0" cellpadding="0" class="leftbottomimage">
  34.         <tr>
  35.           <td>&nbsp;</td>
  36.         </tr>
  37.       </table>
  38.       <!--Left side nav table ends -->
  39.       <!--content table begins-->
  40.     <td width="565" height="100%" align="left" valign="top" nowrap bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0"  bgcolor="#ffffff">
  41.         <!--DWLayoutTable-->
  42.         <tr>
  43.           <td width="100%" height="12"  class ="righttopimage" border="0" cellspacing="0" cellpadding="0">image holder 1 </td>
  44.         </tr>
  45.       </table>
  46.       <table width="100%"  border="0" cellspacing="0" cellpadding="10" class = "contenttable">
  47.         <!--DWLayoutTable-->
  48.         <td width="100%" height="96" valign="top"><h1 align="center">content</h1></td>
  49.       </table>
  50.       <table width="100%" border="0" cellspacing="0" cellpadding="0">
  51.           <td width="100%" border="0" valign="bottom" cellspacing="0" cellpadding="0"  class ="rightbottomimage">image holder 2 </td>
  52.       </table>
  53. </table>
  54. <table width = "753" border="0" align="center" cellPadding="0" cellSpacing="0" bgcolor="#000000" class="bg_body" id="Table1" color ="x000000">
  55.   <td width="15"></td>
  56.     <div align="center">
  57.       <td width="10"><div align="left"><img src="../images/tag.jpg"></div></td>
  58.       <td valign="middle" class="lighttext"><p align="center">&nbsp;</p></td>
  59.     </div>
  60. </table>
  61. <table width = "753" height="13" cellSpacing="5" class="mainbottomimage"cellPadding="0" valign = "top" align="center" border="0">
  62.   <td></td>
  63. </table>
  64. </body>
Jun 26 '08 #1
Share this Question
Share on Google+
1 Reply

Expert 5K+
P: 7,435
There are two things most table users have to get out of their minds when doing this:
1) Stop thinking in tables.
2) Stop thinking that everything must automatically be put into a <div>.

Divs are used for structure only, to help contain related elements, but I have made simple web pages that had no divs at all. Each individual img does not need its own div but grouping related images into one div makes sense.
Jun 26 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.