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:
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:
Code:
<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>
Comment