473,840 Members | 1,667 Online
Bytes | Software Development & Data Engineering Community
+ 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 1605
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
6527
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 a step beyond Notepad (not a WYSIWYG tool). Thanks.
8
2801
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
81
5198
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 the blogs, and one definitely didn't print right. Surveying the web, my impression is that CSS is very unreliable, because even updated browsers fail to implement the standards correctly. So should one just avoid CSS? Or is it OK if used...
10
2194
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 text more friendly to read. I am thinking to divide it into smaller chapters and to format it something like a newspaper article. But just learning about HTML, 150 pages just seems like too greater task. Is there a shortcut or another way to do...
6
6165
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 my mappings between named colors, HEX values and the Long Integer values used in Access are not jibbing. Anyone have a nice list laying around? Danny J Lesandrini dlesandrini@hotmail.com
4
8958
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: I use a RichTextBox to write the Formatted Text, and i need to send the content by Mail with Winsok.
0
1700
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 using tabs and spaces. The conversion method signature should be something like this: string HtmlToText(string html)
2
2562
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 Casey GPEMC! >11950 is the number@fieldcraft.com.au 2email Terms & conditions apply. See www.fieldcraft.biz/GPEMC Discover valid interoperable web menus, IE security, TSR Control, & the most advanced speed reading application @ www.fieldcraft.biz
53
4161
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 javascript object and that's all. No need to know CSS hacks, no need to clutter your html with tables. http://www.bravelayout.scarabeo.biz/Quickstart
0
9861
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10924
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10605
jinu1996
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10665
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9444
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7839
isladogs
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7023
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 then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
2
4078
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3139
bsmnconsultancy
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 can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.