By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,059 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

Creating tables with DIV tags

P: 24
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
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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 5K+
P: 7,435
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.