467,161 Members | 1,050 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,161 developers. It's quick & easy.

Creating tables with DIV tags

I want to convert my website tables layout to div tags as someone told me its easier to make changes etc etc I just need some help in getting started with this and what to put in the stylesheet. the code below is how it looks just now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Angela Home Page</title>


<SCRIPT LANGUAGE="JavaScript">

AboutMe1 = new Image();
AboutMe1.src = "Images/AboutMe1.gif";

AboutMe2 = new Image();
AboutMe2.src = "Images/AboutMe2.gif";

Skills1 = new Image();
Skills1.src = "Images/Skills1.gif";

Skills2 = new Image();
Skills2.src = "Images/Skills2.gif";

Interests1 = new Image();
Interests1.src = "Images/Interests1.gif";

Interests2 = new Image();
Interests2.src = "Images/Interests2.gif";

WorkProjects1 = new Image();
WorkProjects1.src = "Images/WorkProjects1.gif";

WorkProjects2 = new Image();
WorkProjects2.src = "Images/WorkProjects2.gif";

Links1 = new Image();
Links1.src = "Images/Links1.gif";

Links2 = new Image();
Links2.src = "Images/Links2.gif";

Contact1 = new Image();
Contact1.src = "Images/Contact1.gif";

Contact2 = new Image();
Contact2.src = "Images/Contact2.gif";

</script>

<link href="AngelaRennieWebStyles.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="c8c8c8">



<table border="0" width="821" height="170" cellpadding="10" align="center">
<tr>
<td colspan="3" valign="top"><div align="center"><a href="HomepageAngela.htm"><img src="Images/Main-Banner.gif" width="821 height=" border="0"170"></a></div></td>
</tr>
<tr>

<td width="152" valign="top">

<!-- Buttons -->
<p><a href="About.htm" onmouseover="AboutMe1.src='Images/AboutMe2.gif';"
onmouseout="AboutMe1.src='Images/AboutMe1.gif';">
<img name="AboutMe1" src="Images/AboutMe1.gif" border=0 width="142" height="43"></a><br>

<a href="Skills.htm" onmouseover="Skills1.src='images/Skills2.gif';"
onmouseout="Skills1.src='images/Skills1.gif';">
<img name="Skills1" src="images/Skills1.gif" border=0 width="142" height="43"></a><br>

<a href="Interests.htm" onmouseover="Interests1.src='images/Interests2.gif';"
onmouseout="Interests1.src='images/Interests1.gif';">
<img name="Interests1" src="images/Interests1.gif" border=0 width="142" height="43"></a><br>

<a href="WorkProjects.htm" onmouseover="WorkProjects1.src='images/WorkProjects2.gif';"
onmouseout="WorkProjects1.src='images/WorkProjects1.gif';">
<img name="WorkProjects1" src="images/WorkProjects1.gif" border=0 width="142" height="43"></a><br>

<a href="Links.htm" onmouseover="Links1.src='images/Links2.gif';"
onmouseout="Links1.src='images/Links1.gif';">
<img name="Links1" src="images/Links1.gif" border=0 width="142" height="43"></a><br>

<a href="Contact.htm" onmouseover="Contact1.src='images/Contact2.gif';"
onmouseout="Contact1.src='images/Contact1.gif';">
<img name="Contact1" src="images/Contact1.gif" border=0 width="142" height="43"></a></p>
<p><img src="Images/Square.gif" width="142" height="142"><br>

</p></td>

<!-- End of Buttons -->


<td width="647" colspan="2" valign="top"><h1>Home&gt;</h1>
<h5>Welcome </h5>
<p>Home to my personal website and online portfolio, where you can find out all about me, my interests, work and projects that I have done. </p>
<p>Have a browse around and feel free to drop me a line via the contact section if you want to get in touch.</p>
<p>&nbsp; </p></td>
</tr>
<tr>
<td colspan="3" valign="top"><div align="center"><h4>&copy; 2007 Web Design by Angela Rennie</h4></div></td>
</tr>
</table>

</body>
</html>
Mar 26 '07 #1
  • viewed: 1668
Share:
2 Replies
drhowarddrfine
Expert 4TB
The idea of the <div> tag is not to replicate tables but to aid in structuring a html document. Tables were never intended to be used for page layout and shouldn't anymore. So you need to move away from the concept of needing to lay everything out in a grid unless, of course, that is the look you need.

I have to leave for an hour or so but I'll look at this then.
Mar 26 '07 #2
drhowarddrfine
Expert 4TB
And sometimes you don't need divs at all. I don't have the images so I didn't try centering anything and I can't tell if this looks exactly how you want it but it should be close. (And, no, I didn't go to the store yet :) )
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3.    <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Angela Home Page</title>
  7.  
  8. <style type="text/css">
  9.     body{
  10.         background-color:#c8c8c8;
  11.     }
  12.     img{
  13.         width:142px;
  14.         height:43px;
  15.     }
  16.     #banner{
  17.         width:821px;
  18.         height:170px;
  19.     }
  20. </style>
  21. </head>
  22. <body>
  23. <p id="banner">
  24.     <a href="HomepageAngela.htm">
  25.         <img src="Images/Main-Banner.gif">
  26.     </a>
  27. </p>
  28.  
  29. <!-- Buttons -->
  30. <p><a href="About.htm" onmouseover="AboutMe1.src='Images/AboutMe2.gif';"
  31. onmouseout="AboutMe1.src='Images/AboutMe1.gif';">
  32. <img name="AboutMe1" src="Images/AboutMe1.gif"></a><br>
  33.  
  34. <a href="Skills.htm" onmouseover="Skills1.src='images/Skills2.gif';"
  35. onmouseout="Skills1.src='images/Skills1.gif';">
  36. <img name="Skills1" src="images/Skills1.gif"></a><br>
  37.  
  38. <a href="Interests.htm" onmouseover="Interests1.src='images/Interests2.gif';"
  39. onmouseout="Interests1.src='images/Interests1.gif';">
  40. <img name="Interests1" src="images/Interests1.gif"></a><br>
  41.  
  42. <a href="WorkProjects.htm" onmouseover="WorkProjects1.src='images/WorkProjects2.gif';"
  43. onmouseout="WorkProjects1.src='images/WorkProjects1.gif';">
  44. <img name="WorkProjects1" src="images/WorkProjects1.gif"></a><br>
  45.  
  46. <a href="Links.htm" onmouseover="Links1.src='images/Links2.gif';"
  47. onmouseout="Links1.src='images/Links1.gif';">
  48. <img name="Links1" src="images/Links1.gif"></a><br>
  49.  
  50. <a href="Contact.htm" onmouseover="Contact1.src='images/Contact2.gif';"
  51. onmouseout="Contact1.src='images/Contact1.gif';">
  52. <img name="Contact1" src="images/Contact1.gif"></a></p>
  53. <p><img src="Images/Square.gif">
  54.  
  55. </p>
  56.  
  57. <h1>Home&gt;</h1>
  58. <h5>Welcome </h5>
  59. <p>Home to my personal website and online portfolio, where you can find out all about me, my interests, work and projects that I have done. </p>
  60. <p>Have a browse around and feel free to drop me a line via the contact section if you want to get in touch.</p>
  61.  
  62. <h4>&copy; 2007 Web Design by Angela Rennie</h4>
  63.  
  64. </body>
  65. </html>
Mar 26 '07 #3

Post your reply

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

Similar topics

44 posts views Thread by Mariusz Jedrzejewski | last post: by
1 post views Thread by Jason Shohet | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.