Help with tables

  • steve0
  • Student
  • Student
  • steve0
  • Posts: 82

Post 3+ Months Ago

hi all, i have a question concerning tables.
im using dreamweaver to make my site with, and i want to use tables because i heard they are better than frames. the problem is, when i create a new page with tables, i can never get the tables the right size for the screen, so i always have an empty border to the left and right of the page, also a scrollbar appears on the bottom of the window and if you drag it to the right, it scrolls continuously.
anybody have any idea why it does this and how to fix it?

cheers

steve
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • steve0
  • Student
  • Student
  • steve0
  • Posts: 82

Post 3+ Months Ago

oh, and while im at it, does anyone know how to insert two tables, side by side?
every time i try this, the other table always appears below, not to the side.

thanx

steve
  • fional24
  • Graduate
  • Graduate
  • fional24
  • Posts: 125
  • Loc: Scotland

Post 3+ Months Ago

you will need to take the page margins off, set them to 0px. This is done in the pages properties menu.

Set your table widths to 100% then the will always fill the wirdth of the screen.

Instead of having your tables side by side, why dont you split one large table in two and nest other tables in the split cells?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

It's worth mentioning that Opera adds default padding, instead of default margins like IE and Moz. So, you might want to set padding === 0, as well.

Code: [ Select ]
<table width="100%">
<tr>
   <td width="50%" valign="top">Content or nested table here</td>
   <td width="50%" valign="top">Content or nested table here</td>
</tr>
</table>
  1. <table width="100%">
  2. <tr>
  3.    <td width="50%" valign="top">Content or nested table here</td>
  4.    <td width="50%" valign="top">Content or nested table here</td>
  5. </tr>
  6. </table>
  • steve0
  • Student
  • Student
  • steve0
  • Posts: 82

Post 3+ Months Ago

thanx for the help guys, im trying to find a decent tutorial on tables, hard work this web design thing...

cheers

steve
  • steve0
  • Student
  • Student
  • steve0
  • Posts: 82

Post 3+ Months Ago

ok guys, ive figured out how to split, merge etc. i have the basic table layout for my front page, thats all cool.
now i need help with something else.
i have three columns, if i paste text and pictures into the laft hand column, it appears in the center of the cell (quite far down), if i split the cell i can get around that problem, but then when i paste something into the right hand cell, all the content from the left hand cell gets moved down. i even get the same results if i insert a nested table inside a cell.
im sure its a basic thing and im missing the obvious, but could someone help?

thanx

steve
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

If you look at the snippet I posted, you'll see a cell attribute "valign".

Otherwise, it may be faster if you were to just paste the whole page for us to look over.

:D
  • fional24
  • Graduate
  • Graduate
  • fional24
  • Posts: 125
  • Loc: Scotland

Post 3+ Months Ago

when you click in each cell in dreamweaver, you can set the horizonal and verical alignment using the drop downs on the property inspector. Bear in mind that the cells containing nested tables will also need to be horz and vert aligned.

Which version of dreamweaver are you using? If it's mx 2004 you can use the expanded tables view to make this a lot easier.
  • steve0
  • Student
  • Student
  • steve0
  • Posts: 82

Post 3+ Months Ago

wow, thanx guys, this has helped a lot!!, the only problem is, i still have a scrolling bar at the bottom of the window when i preview. under appearance in page properties, the size is set to 100% and all margins are set to zero. for some reason the page still scrolls to the right into infnity...

cheers

steve
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

It would really be easier to help if we could see the code.

;)

I'm sure your problem would be solved easily.
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

I think your table is too wide, thats why the scroll appears. Try setting the width to 100%.
BTW why not use divs instead of tables ? I find them much less messier than tables.
(much less messier ? - is that making any sense?)
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

You might mean "much less messy." Using "much cleaner" would work as well.

Anyway, I enjoy the following analogy:
frames : tables :: tables : css

By the way, for the other poster: Posting a URL or source code can really improve your chances of getting accurate help.

On the other hand, if setting the width to 100% fails, using 99, 98, or 97 percent might (not fail), though it is an ugly hack.
  • steve0
  • Student
  • Student
  • steve0
  • Posts: 82

Post 3+ Months Ago

ok guys, my site is:
http://www.stephen-hunter.com

the page that is up is not the page im working on, so heres the soure code for that:
Code: [ Select ]
<!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>Untitled Document</title>
<script type="text/javascript" language="JavaScript1.2" src="stm31.js"></script>
<style type="text/css">
<!--
.style19 {
    font-family: "Courier New", Courier, mono;
    color: #FFFFFF;
}
.style20 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFFFFF;
}
.style21 {font-weight: bold; font-family: Arial, Helvetica, sans-serif;}
.style10 {color: #0099FF}
.style9 {    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 30px;
    color: #00CC66;
}
.style14 {    font-size: 18px;
    color: #FFFFFF;
}
.style23 {
    color: #FFFFFF;
    font-weight: bold;
}
body,td,th {
    font-size: 100%;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
-->
</style>
</head>

<body bgcolor="#000000" text="#339933" link="#33FF00" vlink="#666666" alink="#666600">
<table width="100%" height="100%" border="1" align="left" bordercolor="#000000" bgcolor="#000000"><!--DWLayoutTable-->
 <tr>
  <td height="151" colspan="3" bgcolor="#000000"><div align="center">
    <p><img src="graphics/stevehuntertitle.jpg" width="640" height="78">
     <script id="Sothink Widgets:test1.pgt" type="text/javascript" language="JavaScript1.2">
<!--
stm_bm(["menu1",400,"","blank.gif",1,"stgcl()","stgct()",0,0,0,0,50,1,0,0,"","",0],this);
stm_bp("p0",[0,4,0,0,0,3,0,0,100,"",-2,"",-2,90,0,0,"#7f7f7f","#000000","",3,0,0,"#000000"]);
stm_ai("p0i0",[0,"     HOME   ","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#ffffff",1,"#ffffff",1,"","",3,3,0,0,"#ffffff","#ffffff","#ffcc00","#ffcc00","bold 9pt Arial","bold 9pt Arial",0,0]);
stm_aix("p0i1","p0i0",[0,"log in   ","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#ffffff",1,"#ffffff",1,"","",3,3,0,0,"#ffffff","#ffffff","#ffffff"]);
stm_bpx("p1","p0",[1,4,-1,0,0,3,0,0,83,"progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0,motion=forward,enabled=0,Duration=0.52)",6,"",-2,58,0,0,"#7f7f7f","transparent","",3,1,1]);
stm_aix("p1i0","p0i0",[0,"log in now","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#999999",0,"#ffcc00",0,"","",3,3,0,0,"#ffffff","#ffffff","#ffffff","#000000"]);
stm_ep();
stm_aix("p0i2","p0i1",[0,"pictures    "]);
stm_bpx("p2","p1",[1,4,0,0,0,3,0,0,83,"progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0,motion=forward,enabled=0,Duration=0.52)",6,"",-2,58,0,0,"#7f7f7f","#ffffff"]);
stm_aix("p2i0","p1i0",[0,"kristoffer","","",-1,-1,0,"stevesalbum/base0.html"]);
stm_ai("p2i1",[6,1,"#000000","",0,0,0]);
stm_aix("p2i2","p1i0",[0,"funny pictures","","",-1,-1,0,"fnny_photos/base0.html"]);
stm_aix("p2i3","p2i1",[]);
stm_aix("p2i4","p1i0",[0,"illusions","","",-1,-1,0,"illusions/base0.html"]);
stm_aix("p2i5","p2i1",[]);
stm_aix("p2i6","p1i0",[0,"funny advertisments","","",-1,-1,0,"fnny_photos/advertisments/base0.html"]);
stm_ep();
stm_aix("p0i3","p0i1",[0,"videos     "]);
stm_bpx("p3","p2",[]);
stm_aix("p3i0","p1i0",[0,"cool videos","","",-1,-1,0,"funny%20video%20clips%20page.htm"]);
stm_ep();
stm_aix("p0i4","p0i1",[0,"funny texts                                                                                               "]);
stm_bpx("p4","p2",[]);
stm_aix("p4i0","p1i0",[0,"law &amp; order","","",-1,-1,0,"lawandorder/lawandorder.htm"]);
stm_aix("p4i1","p1i0",[0,"insurance claims","","",-1,-1,0,"insurancepages/insurance.htm"]);
stm_aix("p4i2","p1i0",[0,"no link yet"]);
stm_ep();
stm_aix("p0i5","p0i1",[0,"contact me    ","","",-1,-1,0,"mailto:%20steve@stephen-hunter.com"]);
stm_ep();
stm_em();
//-->
     </script>
 </p>
    <p><span class="style9"><span class="style10">......over 200 viewers and still none of them are any the wiser.......</span></span></p>
  </div></td>
 </tr>
 <tr>
  <td width="15%" height="26" bgcolor="#000000">&nbsp;</td>
  <td width="72%"><div align="center">
</div></td>
  <td width="100%">&nbsp;</td>
 </tr>
 <tr>
  <td height="44" align="left" valign="top" bgcolor="#000066"><p align="center" class="style20">&nbsp;</p>
   <p align="center" class="style20">HEY, LOOK - </p>
   <p align="center" class="style19"><span class="style21">NO MENU YET!!</span></p>
   <p align="center" class="style19"><img src="graphics/construction.jpg" width="122" height="140"></p>
   <p align="center" class="style20">Click on the menu at the top of this page, or the quick picks on the right hand side if you want to see anything remotely amusing.</p>
   <p align="center" class="style20">p.s.</p>
   <p align="center" class="style20">you`re better off clicking &quot;back&quot; in your bowser to get back to the main page because the menu is buggered. </p>
  <p align="center" class="style20">Still under construction. </p></td>
  <td>&nbsp;</td>
  <td rowspan="3" align="left" valign="top" bgcolor="#990033"><p align="center" class="style2 style12 style23">&nbsp;</p>
  <p align="left" class="style2 style12 style23">&nbsp;</p></td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td height="801">&nbsp;</td>
  <td>&nbsp;</td>
 </tr><tr><td height="5"><img src="../../My Documents/Unnamed Site 1/spacer.gif" alt="" width="129" height="1"></td><td><img src="../../My Documents/Unnamed Site 1/spacer.gif" alt="" width="642" height="1"></td><td></td></tr>
</table>
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <title>Untitled Document</title>
  7. <script type="text/javascript" language="JavaScript1.2" src="stm31.js"></script>
  8. <style type="text/css">
  9. <!--
  10. .style19 {
  11.     font-family: "Courier New", Courier, mono;
  12.     color: #FFFFFF;
  13. }
  14. .style20 {
  15.     font-family: Arial, Helvetica, sans-serif;
  16.     font-weight: bold;
  17.     color: #FFFFFF;
  18. }
  19. .style21 {font-weight: bold; font-family: Arial, Helvetica, sans-serif;}
  20. .style10 {color: #0099FF}
  21. .style9 {    font-family: Georgia, "Times New Roman", Times, serif;
  22.     font-style: italic;
  23.     font-size: 30px;
  24.     color: #00CC66;
  25. }
  26. .style14 {    font-size: 18px;
  27.     color: #FFFFFF;
  28. }
  29. .style23 {
  30.     color: #FFFFFF;
  31.     font-weight: bold;
  32. }
  33. body,td,th {
  34.     font-size: 100%;
  35. }
  36. body {
  37.     margin-left: 0px;
  38.     margin-top: 0px;
  39.     margin-right: 0px;
  40.     margin-bottom: 0px;
  41. }
  42. -->
  43. </style>
  44. </head>
  45. <body bgcolor="#000000" text="#339933" link="#33FF00" vlink="#666666" alink="#666600">
  46. <table width="100%" height="100%" border="1" align="left" bordercolor="#000000" bgcolor="#000000"><!--DWLayoutTable-->
  47.  <tr>
  48.   <td height="151" colspan="3" bgcolor="#000000"><div align="center">
  49.     <p><img src="graphics/stevehuntertitle.jpg" width="640" height="78">
  50.      <script id="Sothink Widgets:test1.pgt" type="text/javascript" language="JavaScript1.2">
  51. <!--
  52. stm_bm(["menu1",400,"","blank.gif",1,"stgcl()","stgct()",0,0,0,0,50,1,0,0,"","",0],this);
  53. stm_bp("p0",[0,4,0,0,0,3,0,0,100,"",-2,"",-2,90,0,0,"#7f7f7f","#000000","",3,0,0,"#000000"]);
  54. stm_ai("p0i0",[0,"     HOME   ","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#ffffff",1,"#ffffff",1,"","",3,3,0,0,"#ffffff","#ffffff","#ffcc00","#ffcc00","bold 9pt Arial","bold 9pt Arial",0,0]);
  55. stm_aix("p0i1","p0i0",[0,"log in   ","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#ffffff",1,"#ffffff",1,"","",3,3,0,0,"#ffffff","#ffffff","#ffffff"]);
  56. stm_bpx("p1","p0",[1,4,-1,0,0,3,0,0,83,"progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0,motion=forward,enabled=0,Duration=0.52)",6,"",-2,58,0,0,"#7f7f7f","transparent","",3,1,1]);
  57. stm_aix("p1i0","p0i0",[0,"log in now","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#999999",0,"#ffcc00",0,"","",3,3,0,0,"#ffffff","#ffffff","#ffffff","#000000"]);
  58. stm_ep();
  59. stm_aix("p0i2","p0i1",[0,"pictures    "]);
  60. stm_bpx("p2","p1",[1,4,0,0,0,3,0,0,83,"progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0,motion=forward,enabled=0,Duration=0.52)",6,"",-2,58,0,0,"#7f7f7f","#ffffff"]);
  61. stm_aix("p2i0","p1i0",[0,"kristoffer","","",-1,-1,0,"stevesalbum/base0.html"]);
  62. stm_ai("p2i1",[6,1,"#000000","",0,0,0]);
  63. stm_aix("p2i2","p1i0",[0,"funny pictures","","",-1,-1,0,"fnny_photos/base0.html"]);
  64. stm_aix("p2i3","p2i1",[]);
  65. stm_aix("p2i4","p1i0",[0,"illusions","","",-1,-1,0,"illusions/base0.html"]);
  66. stm_aix("p2i5","p2i1",[]);
  67. stm_aix("p2i6","p1i0",[0,"funny advertisments","","",-1,-1,0,"fnny_photos/advertisments/base0.html"]);
  68. stm_ep();
  69. stm_aix("p0i3","p0i1",[0,"videos     "]);
  70. stm_bpx("p3","p2",[]);
  71. stm_aix("p3i0","p1i0",[0,"cool videos","","",-1,-1,0,"funny%20video%20clips%20page.htm"]);
  72. stm_ep();
  73. stm_aix("p0i4","p0i1",[0,"funny texts                                                                                               "]);
  74. stm_bpx("p4","p2",[]);
  75. stm_aix("p4i0","p1i0",[0,"law &amp; order","","",-1,-1,0,"lawandorder/lawandorder.htm"]);
  76. stm_aix("p4i1","p1i0",[0,"insurance claims","","",-1,-1,0,"insurancepages/insurance.htm"]);
  77. stm_aix("p4i2","p1i0",[0,"no link yet"]);
  78. stm_ep();
  79. stm_aix("p0i5","p0i1",[0,"contact me    ","","",-1,-1,0,"mailto:%20steve@stephen-hunter.com"]);
  80. stm_ep();
  81. stm_em();
  82. //-->
  83.      </script>
  84.  </p>
  85.     <p><span class="style9"><span class="style10">......over 200 viewers and still none of them are any the wiser.......</span></span></p>
  86.   </div></td>
  87.  </tr>
  88.  <tr>
  89.   <td width="15%" height="26" bgcolor="#000000">&nbsp;</td>
  90.   <td width="72%"><div align="center">
  91. </div></td>
  92.   <td width="100%">&nbsp;</td>
  93.  </tr>
  94.  <tr>
  95.   <td height="44" align="left" valign="top" bgcolor="#000066"><p align="center" class="style20">&nbsp;</p>
  96.    <p align="center" class="style20">HEY, LOOK - </p>
  97.    <p align="center" class="style19"><span class="style21">NO MENU YET!!</span></p>
  98.    <p align="center" class="style19"><img src="graphics/construction.jpg" width="122" height="140"></p>
  99.    <p align="center" class="style20">Click on the menu at the top of this page, or the quick picks on the right hand side if you want to see anything remotely amusing.</p>
  100.    <p align="center" class="style20">p.s.</p>
  101.    <p align="center" class="style20">you`re better off clicking &quot;back&quot; in your bowser to get back to the main page because the menu is buggered. </p>
  102.   <p align="center" class="style20">Still under construction. </p></td>
  103.   <td>&nbsp;</td>
  104.   <td rowspan="3" align="left" valign="top" bgcolor="#990033"><p align="center" class="style2 style12 style23">&nbsp;</p>
  105.   <p align="left" class="style2 style12 style23">&nbsp;</p></td>
  106.  </tr>
  107.  <tr>
  108.   <td>&nbsp;</td>
  109.   <td>&nbsp;</td>
  110.  </tr>
  111.  <tr>
  112.   <td height="801">&nbsp;</td>
  113.   <td>&nbsp;</td>
  114.  </tr><tr><td height="5"><img src="../../My Documents/Unnamed Site 1/spacer.gif" alt="" width="129" height="1"></td><td><img src="../../My Documents/Unnamed Site 1/spacer.gif" alt="" width="642" height="1"></td><td></td></tr>
  115. </table>
  116. </body>
  117. </html>


hope this helps to help.

cheers
steve
  • steve0
  • Student
  • Student
  • steve0
  • Posts: 82

Post 3+ Months Ago

hmmm.........


:oops:
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I saw this right off...

Code: [ Select ]
  <td width="15%" height="26" bgcolor="#000000">&nbsp;</td>
  <td width="72%"><div align="center"></div></td>
  <td width="100%">&nbsp;</td>
  1.   <td width="15%" height="26" bgcolor="#000000">&nbsp;</td>
  2.   <td width="72%"><div align="center"></div></td>
  3.   <td width="100%">&nbsp;</td>


These are 3 cells in the same row. All 187% of em. ;)

I'm going take a longer look.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

All my browsers still render the page without horizontal scrolling. I don't see that any of the images that I'm missing would be the culpret, so I'm left to assume that it's something with the "Sothink Widgets" menu.
  • steve0
  • Student
  • Student
  • steve0
  • Posts: 82

Post 3+ Months Ago

yep, you were right, it was the sothink menu widget, it was set to "float"
hence the side scrolling.

thanx for your help!!

steve

Post Information

  • Total Posts in this topic: 17 posts
  • Users browsing this forum: No registered users and 61 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.