|
HTML - Tables To Layout Web Page: Right Or Wrong?
While I was searching for an HTML forum to join, I came across a statement in another forum that said using tables to layout a web page is incorrect -- even stupid. Is this true? I have been reading a book entitled "HTML, XHTML, and CSS Bible" which devotes an entire chapter (chapter 11) to "Page Layout with Tables" and continually refers to page layout within Tables and Nested Tables. This is the method that I have been using to create my first web pages. Do I need to re-think this and change the way I layout my pages? Please enlighten me...
Thanks, JFB Similar Tutorialsim very confused, Firefox runs the site perfectly, exactly how i'd expect. In safari nothing shows up and in I.E 6 the page screws up depending on how long it takes for the page to load . this is firefox - and that is exactly what you get if you open IE and go to the page first time round, but if you then went to another page and took a link back to the original page, this happensbut it then fixes it self if you reload using F5 but not by reloading the page with the address bar. . What looks to be happening is IE is forgetting to format the text and it's resizing the boxes around it to fit rather than re ordering the text - In safari it's just blank. anyway all the page layouts are put there using php to make it easy to fix problems like this, so on that page you see this sorta thing. how the layout works is it starts with this - HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;"> <head> <title>Technology</title> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>D-Wave Systems</title> <script type='text/javascript' src='js/mootools.js'></script> <script type='text/javascript' src='js/slimbox.js'></script> <link rel='stylesheet' href='css/slimbox.css' type='text/css' media='screen' /> <link rel='stylesheet' href='css/Main.css' type='text/css' media='screen' /> <script src='Scripts/AC_RunActiveContent.js' type='text/javascript'></script></head> <body style="height:100%;"> <div id='MainContainer'><table border=0 cellspacing=0 cellpadding=0 class=Container height=100%> <tr><td width=38px height=100% background=images/leftPB.png> </td> <td bgcolor=#FFFFFF valign=top width=700px> 'MainContainer' looks like this - Code: width:800px; /* total width of left+right+center */ height: 100%; margin: 0 auto; inside <td bgcolor=#FFFFFF valign=top width=700px> you have the title bar and to organize the Headlines and main content there's another table - HTML Code: <table width='713' height=400 border='0' cellpadding='0' cellspacing='0'> <tr><td width='470' valign='top' style='background:url(images/contentBgTop.png); background-repeat:no-repeat; background-position:center; height:20px;'> </td> <td width='237' id='HeadLines' valign='top' rowspan=3> ## THIS IS INSIDE THE HEADLINES BOX ## </td> </tr> <tr> <td style='background:url(images/contentBgMiddle.png); background-repeat:repeat-y; background-position:center; text-align:left;' valign='top'> ## THIS IS INSIDE THE CONTENT BOX ## </td> </tr> <tr> <td style='background:url(images/contentBgBottem.png); background-repeat:no-repeat; background-position:center; height:20px;'> </td> </tr> </table><table height=100><tr><td>hello</td></tr></table> </td> <td background=images/rightPB.png height=100% width=38px> </td> </tr> <tr> <td style='background:url(images/bottemLeft.png); background-repeat:no-repeat; background-position:center; height:46px;'></td> <td style='background:url(images/bottem.png); background-repeat:no-repeat; background-position:center; height:46px;'></td> <td style='background:url(images/bottemRight.png); background-repeat:no-repeat; background-position:center; height:46px;'></td> </tr> </table></div></body> </html> Where am i going wrong :S should i be trying a different method to organize the elements? Thanks for reading, sorry it's a little lengthy Hello, I'm designing a site that has a table with it's cells containing unordered lists. These lists are working and displaying fine, except for when I use IE. The links automatically drop down to the next line no matter what. FF looks perfect. Example: Code: <td width="367" height="165" nowrap="nowrap" background="Assets/GFX.png">
<ul>
<li><strong>Full name</strong> Name<a name="Name" /></li>
<li><strong>Birth date</strong> January 19, 1980 </li>
<li><strong>Birthplace</strong> Frome, Great Britain</li>
<li><strong>Link</strong><a href="http://website.com" class="linkcolor" > Website </a></li>
</ul>
</td>
The part in red is the issue. in IE, the Website part drops down to the next line, even though there is plenty of space in the cell. Is there a trick to fixing this? Although the script is php, the problem is mainly html, I guess... My script contains php and html code to retrieve pics and their specs from MySQL. I try to represent this in a way that the pic is at the left, and the specs right of it, vertically lined. But I only get: pic - specs - pic - specs etc. I like to have pic - specs NEW LINE pic - spec etc. I'm rather new to this, and I spend many hours playing with dozens of variants, but I'm afraid I need a little help. Anyone? Thanks in advance. Erik <?php include "connect.php"; //verbinding maken $pic_query = mysql_query("SELECT * FROM vgtable1") or die(mysql_error()); echo "<table border=3 BGCOLOR=#FFFFCC cellpadding=3>"; while($info = mysql_fetch_array( $pic_query )) { ?> <td> <img src="<?php echo $info['pic'];?>"width=100 height=100><br><br> </td> <? echo "<td>"; echo "<table border=1>"; echo "<tr><td>ID:</td> <td>".$info['id'] . "</td></tr>"; echo "<tr><td>Spec1:</td> <td>".$info['spec1'] . "</td></tr> "; echo "<tr><td>Spec2:</td> <td>".$info['spec2'] . "</td></tr> "; echo "<tr><td>Spec3:</td> <td>".$info['spec3'] . "</td></tr> "; echo "</table>"; ?> <? } echo "</table>"; ?> I have 2 layout tables and in the right side i want to place text or image but it doesn't let me to make the text in right side and display the text down, here is the code: <td colspan="3" height="200" valign="top"><table border="0" cellpadding="0" cellspacing="0" height="213" width="100%"> <!--DWLayoutTable--> <tbody><tr> <td height="183" width="862"><table class="TD100" border="0" cellpadding="0" cellspacing="0" height="0" width="100%"> <tbody><tr> <td class="bakg-sida" background="images/left.jpg" height="0" valign="top" width="203"> </td> <td class="bakg-main" background="images/middle.jpg" valign="top" width="660"> </td> </tr> </tbody></table></td> and screenshot of a 1 table that does like that too: thanks in advance! Is it wrong to use tables to build your website's layout? For example, on one column you'd have the navigation, and on the other column you'd have the main website content. Is this method wrong? i used to use tables for the layout, now i'm trying divs..the thing is i'm not sure how should i think about the layout, i mean like tables i have rows, every row have cells, now with the divs i should think about it the same way? a container div to replace the main table, then another div to take place of a row, then divs as cells..an so on does that make any sense? i don't know if that was clear, but the question is: how should i think about it? i know the question sounds stupid but it seems that i just got used to tables & can't accept divs yet Hi folks... I've been working on a site upgrade today and I'm having an issue getting it to display properly in IE. It works beautifully in Firefox (go Firefox!), but nowhere close in IE 7. The text alignment is just way out of wack. I've validated the page in two different validators and it's 'error free'. The CSS page validated also. I would really appreciate any ideas on what might be wrong. You can view the work he http://www.steve-mann.com/ The CSS is he http://steve-mann.com/style.css Only the home page is 'complete', but the others are close. Again, none of them display properly in IE. Thanks! I ahve just made a site however these pages are not displaying properly in IE6 but are fine in Firefox (2). http://www.gkellypieandmash.co.uk/history.htm http://www.gkellypieandmash.co.uk/about.htm Both pages are valid XHTML 1.1 and CSS 2.1 (you can click on the link at the bottom to check) What IE6 unconformality (is that a word?) do i not know about which would fix this problem?? Thanks! Why can't I choose where I place my <p>'s?? This is the page: http://www.andersmj.dk/advice-on-webdesign.php Validator: http://validator.w3.org/check?uri=ht...-webdesign.php Hi, I need a favor. Can one of you go here http://www.everyman2.com/test.html I do a webcomic, and for some reason the image won't center in the maroon box. I don't know much (or anything) of html so it really doesn't make much sense to me. Can someone go and view the source? Thanks a million! Hi I searched through threads to make sure this topic is not posted before but I couldn't find any. I want to put several tables in one page with horizontal line in between them. however, after I post it on the website the tables are stuck together with no space. basically the order is messed up. Is there anyway I can get the format right? Thanks I am reworking my webpage http://www.webficsdesign.com/start.html I can not get my tables to lineup correctly. Here is the coding I am using. Please tell me what I am doing wrong and I will love you forever! <tr> <td width="147px" height="143px" background="images/08.gif" valign="top" style="background-repeat:no-repeat;background-position:left top;padding-top:90px;padding-bottom:90px;"> <div style="padding-right:15px;padding-left:25px;">NEWS NEWS NEWS<br> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR></div> </td> <td width="505px" height="143px" background="images/09.gif" valign="top" style="background-repeat:no-repeat;background-position:left top;padding-top:90px;padding-bottom:90px;"> <div style="padding-right:15px;padding-left:15px;">INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR></div> </td> <td width="148px" height="143px" background="images/10.gif" valign="top" style="background-repeat:no-repeat;background-position:left top;padding-top:10px;padding-bottom:10px;"> <div style="padding-right:15px;padding-left:15px;">SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR></div> </td> </tr> any help on what I am doing wrong would be great. I have just started to teach myself how to do framing like this, but I cannot figure out how to get everything to lineup correctly. Hi there, Theres a page on my website that appears fine when offline (without google adverts) but when online it messes up the page layout. Would appreciate any help, not sure if the CSS file is causing the problem or the html/css webpage. http://www.paid2review.co.uk/links.html Thanks for any help. Matt Hello everyone. About a week ago i created a database on my company server, with sql server 2005. Around 40 to 50 users will use this database and i was thinking of creating an html page in which the users will be able to see the table results. The problem i have is that i dont know how i can add the tables on the page. Is there any possible way to connect to the server and then through sql commands to appear it on the page? Thanx in advance for your answers and sorry if my question is stupid but i am quite new on those stuff I'm quite new to the world of HTML and actually know very little about this stuff. I'm trying to do a web page for my friends company but I'm stuck. I have made my body and "menu" parts to expand according to the text I enter but it screws my layout up Maybe some one could take a look and say what I have done wrong. For me it looks like body and menus are dependent from each other, if I enter text to menu1, body and menu2 also rescale themselves... Here is the link to the problem, you can see what I want by clicking on the link "Picture of the design I want" Hi, I'm in the middle of developing a infosite to work alongside our retail site. The infosite is going to maintain the basic layout of our current site (www.muddypuddles.com) with Header, footer, left menus and right buttons, which move with the size of the page. However the primary content in the middle of the page is going to become articles, etc. On our front page I'm going with a single horizantal box around 250px in height and I want the size of the box to expand depending on the resoultion of the page. Below that I am placing 2 vertical boxes side by side which I also want to expand depending on resolution. I think this is most likely CSS related, but can someone please advise me on how to float these boxes into position first of all, and then what is required to make these boxes expand with the screen size. Thanks in advance Hey guys I asked a similar question before about the best way to go with page layouts and the only response I got was to go with one that will properly change with resolutions and browsers, etc.. I am learning and want to develop practical and sound habits from early on. If any of you would be willing to throw me out some good pointers, etc.. That would be great. I'm looking to do a layout with a horizontal header section and below this 2 or 3 columns of varying widths. This is rough but hopefully you get the idea. In software programming languages you can apply layout to a software program and i'm trying to apply the same philosiphy to web sites. I've been using just <div> tags with settings of its attributes (width, height, floats & margins etc..) to get what a layout i want and recently just came across that you can use tables to contstruct a layout aswell. which idea is better and which is better design that allows future extensibility? cheers I'm trying to make a layout that takes up 100% of the page, but isn't fixed. So it moves whenever the browser is resized. However I can't get the code to work for the footer and the two inner divs. Is how I want it to look like. The white and light gray and the two content boxes. The black are the header and footer which need to be at the absolute top and bottom, respectively. The dark gray are both static images. The bottom dark gray one needs to be positioned at the same place as the footer background. The red are both content boxes that need to be centered in the middle of the light gray div and the white div. And lastly the blue is an image that needs to stay static right next to the light gray div. Anyone know how I would go about coding it? Or if anyone is willing to code me a simple block template I'd really appreciate it. Thanks =] got a very basic page as this stuff is super new to me, not sure where to put or ask about this ... when the page is resized or when the bookmarks tab comes on in firefox browser my graphics all move around , didn't use to do this but i'm not sure. happens when u resize the actual page. everything kinda lines up to fit in the new space --- i really dont know -->loaded page up temporarily http://www.legendofthegknight.com/test/index.html |
|||||||