473,473 Members | 2,036 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

n000b looking for guidence - html conversion to tableless format

1 New Member
Hi,

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.

~Chipley

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>
  19.  
  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
1 1581
drhowarddrfine
7,435 Recognized Expert Expert
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

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

Similar topics
71
HTML Editor
by: tomy_baseo | last post by:
I'm new to HTML and want to learn the basics by learning to code by hand (with the assistance of an HTML editor to eliminate repetitive tasks). Can anyone recommend a good, basic HTML editor that's...
Latest Bytes
8
Creating Advanced Tables For Layouts in HTML?
by: Millissa | last post by:
If someone can help me with examples of or info on how to create an advanced tables for the layout on my site, I would be very grateful! Thanks, M
Latest Bytes
81
CSS versus HTML tables
by: sinister | last post by:
I wanted to spiff up my overly spartan homepage, and started using some CSS templates I found on a couple of weblogs. It looks fine in my browser (IE 6.0), but it doesn't print right. I tested...
Latest Bytes
10
How to HTML 150 pages of text
by: st4 | last post by:
Help, As part of my family history web site i need to get 150 pages of typed text into some format to display. It just text right now but I would like to add some graphics (photos) and make the...
Latest Bytes
6
Anyone have a list of HTML colors in Hex, Long and Named format?
by: Danny Lesandrini | last post by:
I'm using an Access database to drive a web site and the colors of various table backgrounds are stored in Access. I want users of the Access database to be able to select colors for the site, but...
Latest Bytes
4
RTF to HTML and reverse...!
by: ALESSANDRO Baraldi | last post by:
Good evening. Few day ago i ask about this Object. A very kindly replay of Sthepen Lebans give me the solution to use ClipBoard to synthesise the Conversion, but i've some truble. My scene: ...
Latest Bytes
0
Html to text conversion
by: Knut-Olav Traa | last post by:
Hello, I need a component that transfers html strings to text format. The component must format the text nice, and not just strip off the html-tags. For example: The tabledata should be formated...
Latest Bytes
2
Alternatively, I seek a HTML to RTF Function
by: Number 11950 - GPEMC! Replace number with 11950 | last post by:
HTML to RTF conversion is done by the clipboard in certain circumstances. Does anyone know of an API or possibly a Framework2 class.method that will convert HTML to RTF...? TIA -- Timothy...
Latest Bytes
53
No TABLES in html. No hacks in CSS. Any layout possible, crossbrowser. Try it.
by: brave1979 | last post by:
Please check out my javascript library that allows you to create any layout for your web page, nested as deep as you like, adjusting to width and height of a browser window. You just describe it in...
Latest Bytes
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Latest Bytes
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Latest Bytes
1
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
Latest Bytes
0
Couldn’t get equations in html when convert word .docx file to html file in C#.
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
Latest Bytes
0
Trying to create a lan-to-lan vpn between two differents networks
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
Latest Bytes
0
Windows Forms - .Net 8.0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
Latest Bytes
0
transfer the data from one system to another through ip address
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
Latest Bytes
1
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
Latest Bytes
0
bsmnconsultancy
Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...
Latest Bytes

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us