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: - <body><!--My horrible table-munged code-->
-
<div>
-
<table width="753" height="10" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">
-
<td align="left"><img src="../images/mainNavBar_Side.jpg"></td>
-
<td class="sgTopMenuOn" align="right"><a class="subhead3" href="*" >Link 1</a></td>
-
<td class="sgTopMenuOff" align="right"><a class="geoTabs" href="*">Link 2</a></td>
-
<td class="sgTopMenuOff" align="right" ><a class="geoTabs" href="*">Link 3</a></td>
-
<td class="sgTopMenuOff" align="right"><a class="geoTabs" href="*">Link 4</a></td>
-
<td class="sgTopMenuOff" align="right"><a class="geoTabs" href="*">Link 5</a></td>
-
<td width="6" align="right"><img src="../images/mainNavBar_Side.jpg"></td>
-
</table>
-
</div>
-
<div width="753" align="center"><img src="../images/mainNavBar_Bottom.jpg" width="753" height="8"></div>
-
<table width = "753" class="bg_body" id="Table1" cellSpacing="5" cellPadding="5" align="center" border="0">
-
<!--Left Side Nav Table-->
-
<td width="153" align="left" valign="baseline" bgcolor="#ffffff" cellpadding="0" cellspacing="0"><table width="153" border="0" cellspacing="0" cellpadding="0">
-
<!--DWLayoutTable-->
-
<div>
-
-
<td height="12" width="100%" class="lefttopimage">::Menu :: </td>
-
</div>
-
</table>
-
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="sidetable" bgcolor="#000000">
-
<div>
-
<td height="100%" class="leftrightheadings"><div align="center">:: Home :: </div></td>
-
</div>
-
<tr>
-
<td height="100%" class="sidetext"><div class="sgSideMenuOn" align="right"><a href="*">SubLink 1</a></div>
-
<div class="sgSideMenuOff" align="right"><a class="geoTabs" href="*">SubLink 2</a></div>
-
<div class="sgSideMenuOff" align="right" ><a class="geoTabs" href="*">SubLink 3</a></div>
-
</tr>
-
</table>
-
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="leftbottomimage">
-
<tr>
-
<td> </td>
-
</tr>
-
</table>
-
<!--Left side nav table ends -->
-
<!--content table begins-->
-
<td width="565" height="100%" align="left" valign="top" nowrap bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
-
<!--DWLayoutTable-->
-
<tr>
-
<td width="100%" height="12" class ="righttopimage" border="0" cellspacing="0" cellpadding="0">image holder 1 </td>
-
</tr>
-
</table>
-
<table width="100%" border="0" cellspacing="0" cellpadding="10" class = "contenttable">
-
<!--DWLayoutTable-->
-
<td width="100%" height="96" valign="top"><h1 align="center">content</h1></td>
-
</table>
-
<table width="100%" border="0" cellspacing="0" cellpadding="0">
-
<td width="100%" border="0" valign="bottom" cellspacing="0" cellpadding="0" class ="rightbottomimage">image holder 2 </td>
-
</table>
-
</table>
-
<table width = "753" border="0" align="center" cellPadding="0" cellSpacing="0" bgcolor="#000000" class="bg_body" id="Table1" color ="x000000">
-
<td width="15"></td>
-
<div align="center">
-
<td width="10"><div align="left"><img src="../images/tag.jpg"></div></td>
-
<td valign="middle" class="lighttext"><p align="center"> </p></td>
-
</div>
-
</table>
-
<table width = "753" height="13" cellSpacing="5" class="mainbottomimage"cellPadding="0" valign = "top" align="center" border="0">
-
<td></td>
-
</table>
-
</body>
1  1598 
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.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
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.
|
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
|
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...
|
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...
|
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
| | |
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.
|
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)
|
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
|
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
|
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...
|
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
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...
|
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...
|
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,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
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...
|
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();...
| | |
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 last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
| |
