|
HTML - Should I Replace My Tables?
I've been working on a website for a week or two, and had it all layed out in tables. A coworker passes by and says his friend, a professional web designer, says tables are old-school and I should use div tags instead. I've read a lot of discussion online about how horrible it is to use tables for layout because they are not "supposed" to be for layout (even though they WORK for layout). I have also read a lot about how div layouts like to break, something tables don't do (as much?). I use dreamweaver, and all its pre-made templates use tables, not divs. Divs also look like a lot of work, since there seems to be a ton of css that has to go into making the divs act like table cells (and I am VERY new to css!). The one thing that keeps going through my mind is, why go through so much trouble getting divs to act like tables when I can just write a table? Kind of like trying to genetically engineer oranges to look and taste like apples....
So, should I banish my tabled layout for a layout done with divs, even though my tabled layout looks fine and works fine? I really don't want to quite table layouts, but I also want to learn to do things the "right" way, and if divs are the only "right" way to build a page layout.... Help? Also, are there any good online tutorials on how to "properly" build a div-based layout, one that won't break in different browsers? ~Seij Similar TutorialsHi Normally, when you have more than one table in your code, the tables will be placed one under each other. Example: <table> ... </table> <table> ... </table> When you want the tables to be placed next to each other, you need to set the align attribute. Example: <table align="left"> ... </table> <table align="left"> ... </table> BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables". Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag? Thanks for your help praiser Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code. How I want it to look: How it looks now: I want the tables to line up at the top and re-size according to each other so they're always aligned at the top. Code: coming in next 2 posts I created a web site at www.suncityrnc.com using frames and it doesn't seem to be getting any respect from search engines like google. If I look at the google cache for my website it just shows my message for browsers that don't handle frames. That is, "This page uses frames, but your browser doesn't support them.". So I get it, crawlers don't like frames! Now I just want to know the best way to rewrite my web site without using frames. I don't want to use PHP or any fancy scripting languages that are going to depend on a server if possible (it's not my server). I would also like to maintain as much of the structure of the html files, and the look and feel of the web site as possible. I would appreciate any help, ideas, or direction anyone has on this topic. I don't want to start hacking until I can get some good advice. I already made that mistake once, when I decided to use frames. Thanks! What I have is a text box for a user to change the back ground & text for a generated page ------------------------------------------------------------------------------------------------------ <font color="#003300"> <b>Color for background</b><BR> </font><font face="Arial,Helvetica" color="#003300"><input type="text" size="6" maxlength="6" name="color1" value="ffffff"></font><font color="#003300"><BR> <b>Color for text </b><BR> <input type="text" size="6" maxlength="6" name="color2" value="000000"></font><font color="#003300"><br> <b>Color inside</b><BR> <input type="text" size="6" maxlength="6" name="color3" value="ffffff"><br> <b>Color outside</b><BR> <input type="text" size="6" maxlength="6" name="color4" value="000000"></br> </font> ------------------------------------------------------------------------------------------------------- I would like to change the text box with a drop down box with pre selected colors for the 4 options any help would be greatly appreciated above is the text Im using I hope this makes sense (and I'm posting in the right forum section). Here's what I'm trying to do. I'm trying to type a form where the user will type in a 4 7 digit number: <input type="text" name="id" value=""> <input type="submit" value="Submit"> Cool so far. But what I need is after they submit it, the value that is put in there is submitted to a customized link (not http). Example: If a user inputs 1234, it will be changed to link://1234@example.com So the question is, how do get it so that the value submitted from the form is inserted inbetween my link:// and @example.com? Once again, hopefully that makes sense. I'm not even sure what I should be searching for on the forums. Maybe replace string or something? I don't know and I apologize. Any help would be greatly appreciated... Hi guys! I want to change the scrollbar to something else in my IFRAME on my html webpage. I need it to work in FF and IE and I don't only want to change the colors etc, I want to change the complete look! I tried a few scripts but they change everything for me and I only want the old scroll to be replace with a new one. Does anyone have any suggestions? I tried this one but then it makes a lot of mess with other things in my Iframe. Maybe it's because I'm too bad on html but does anyone have any suggestions? http://www.java2s.com/Code/JavaScrip...omscollbar.htm I just need something simple and something that you doesn't need to be a engineer to get working =) Thanks in advance! All my code is filled with these <span> tags in my html page, but not all of my code. How can I remove these tags and make a better structured layed out web page. When I remove the <span> tags, I will need an alternative html tag to replace the <span> tag. My <span> tags store stuff about my web page, so I need a html tag that is a replacement and a structured way to put my data in the web page. Any expertise would be great. Thanks, Chris I am developing a site and the client would like to have images instead of radio buttons, how can I do the followings: 1) Replace the radio buttons for different images 2) When one radio button image is selected, changes to another image Thanks, Valeria I'm trying to replace a lot of text before that exists above the following tag <body id="{VALUE}"> in Dreamweaver. I can use the find&replace option to 'add before start of tag' but I want to actually remove the code/text before a certain tag. Does anyone know if this is possible? will I have to go down the regex route? Help would be much appreciated fellas. Thanks in advance! I'm in need of a software that searches text in html files and replaces them ignoring the html tags. As example replace 1 with <b>1.</b> it should ignore tags like color="111111" and not make color="<b>1.</b><b>1.</b><b>1.</b><b>1.</b><b>1.</b><b>1.</b>" out of it. hello, I'm new on this site. I am making a c# app with web surfing in mind. I asked on 3 c# forums about a question I have but I am not satisfied with their answers. So I came to you too. I want to be able to clean a page(get rid of some tags), that is loading in my webBrowser control, before is rendered inside it. i DON'T want to load it into a string, because if I do that, I must remake the page. I need something that can peek at some page,but not consume it, search for some specific tag, replace/delete it, then allow the "new" page to be finally loaded in my browser. How to achieve this, using html or javascrispt or whatever? I can't explain better than that. Thank you. Hello, I tried searching on the internet for my question, but strangely have yet to find anything. Hopefully something will turn up soon - but here is my question in the meantime: I have a webpage that has a flash sequence that you must click on to take you to the rest of the site. But for browsers that don't have flash (like phones), I want that flash sequence to be replaced by some html code - like an image that you can click to take you to the site. I feel like that's a pretty basic question - so if you know the answer, I would really appriciate your help! Thanks!! Hi, Quite some time ago I was faced with putting a website together for the first time for a local community group (my wife nominated me!). Rather than tell you all what it contains and how it looks, it is probably easier for me to give you the link which is the Friends of Clifton Park based in South Yorkshire, UK. This website consists of eight html pages. The first is the index, second is the welcome page and the rest are linked pages via links on the left. On every of the "linked" pages, only the main body changes, with the exception of each link showing in Caps and link disabled. The problem I'm having is that every single one of the linked html pages are the same, except the displayed text. 90% is the page set-up. So my question is: Is it possible to "import" the required text information when a link is clicked on straight into the main body of ONE html page? btw, you'll notice that the page height isn't fixed, it expands depending on amount of information in it. I have tried IFRAME but don't really seem to be getting anywhere as I can't seem to make the height auto-adjust. A specified height value has to be entered for each "page". This is no good as more information will be needed to be put on. So basically what I am trying to do is: Keep the index.html Change the welcome.html to display the main page (graphics/images, etc) Import text into main body into the welcome.html page when a link is clicked on. Thus reducing the need of duplicate html pages and just having text files containing the main body text. The main reason for wanting to do this is a) stop all the duplication of page set-up in each html file, and b) make it easier for the guy that wants to add information where needed, straight into notepad (txt file) and upload it to the website. I hope all the above makes sense and if anyone requires further information, I will only be to happy to provide it! Thank you. Hi everybody, I've invented a means of converting HTML to keywords. http://4nf.org/tool/ What do you think of it? Any kind of feedback is greatly appreciated! Thanks in advance and kind regards I've been having some issues with my site. It looks fine in IE but it doesn't look correct in Firefox, Opera and Safari. The tables are misaligned and I am at a total loss. Can anyone help me out. Thanks here is the link; http://wwwdotcapleeconsultingdot.com I have a table I created and I want to have a page that allows you to fill in text boxes to answer questions and then when submitted it will put the answers in the correct cell of the table. I have no idea how to do this and am limited in my html skill. If some one could point me in the right direction I would appreciate it greatly. http://www.roleplayingmaps.net/sheet.htm This is the table I have already created. Thanks for taking the time to read. We have the following code in our header at www.hometheatershack.com ... but I'm thinking it ain't right and am wondering if someone could look at it and tell me if I can improve on the code. Code: <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center"> <tr> <td rowspan="4" width="30%" align="left"><a href="/"><img src="/images/htslogo20.gif" border="0" alt="Home Theater Shack" /></a></td> <td rowspan="4" width="40%"></td> <tr> <td width="10" align="right" valign="bottom"> <!-- SVS Banner --> <a href='http://www.hometheatershack.com/openads/www/delivery/ck.php?n=adf57b41&cb=$includedphp' target='_blank'><img src='http://www.hometheatershack.com/openads/www/delivery/avw.php?zoneid=3&cb=$includedphp;&n=adf57b41' border='0' width='192' height='54' alt='SVSound' /></a> <!-- End SVS Banner --> </td> <td> </td> <td width="10" align="right" valign="bottom"> <!-- GIK Banner --> <a href='http://www.hometheatershack.com/openads/www/delivery/ck.php?n=a21b1e29&cb=$includedphp' target='_blank'><img src='http://www.hometheatershack.com/openads/www/delivery/avw.php?zoneid=6&cb=$includedphp&n=a21b1e29' border='0' width='192' height='54' alt='GIK Acoustics' /></a> <!-- End GIK Banner --> </td> <td> </td> <td width="10" align="right" valign="bottom"> <!-- Ultimate Banner --> <a href='http://www.hometheatershack.com/openads/www/delivery/ck.php?n=ac45af25&cb=$includedphp' target='_blank'><img src='http://www.hometheatershack.com/openads/www/delivery/avw.php?zoneid=7&cb=$includedphp&n=ac45af25' border='0' width='192' height='54' alt='Ultimate Home Entertainment' /></a> <!-- End Ultimate Banner --> </td> <td> </td> </tr> <tr> <td width="10" align="right" valign="top"> <!-- Fi Audio Banner --> <a href='http://www.hometheatershack.com/openads/www/delivery/ck.php?n=a7b0e02e&cb=$includedphp' target='_blank'><img src='http://www.hometheatershack.com/openads/www/delivery/avw.php?zoneid=9&cb=$includedphp&n=a7b0e02e' border='0' alt='Fi Audio' /></a> <!-- End Fi Audio Banner --> </td> <td> </td> <td width="10" align="right" valign="top"> <!-- SoundSplinter Banner --> <a href='http://www.hometheatershack.com/openads/www/delivery/ck.php?n=acf07dac&cb=$includedphp' target='_blank'><img src='http://www.hometheatershack.com/openads/www/delivery/avw.php?zoneid=8&cb=$includedphp&n=acf07dac' border='0' alt='SoundSplinter' /></a> <!-- End SoundSplinter Banner --> </td> <td> </td> <td width="10" align="right" valign="top"> <!-- Discount Merchant Banner --> <a href='http://www.hometheatershack.com/openads/www/delivery/ck.php?n=a11ec3d3&cb=$includedphp' target='_blank'><img src='http://www.hometheatershack.com/openads/www/delivery/avw.php?zoneid=10&cb=$includedphp&n=a11ec3d3' border='0' alt='Discount Merchant' /></a> <!-- End Discount Merchant Banner --> <br /><br /> </td> <td> </td> </tr> </table> Thanks! Sonnie hi all, i'm having problems with tables i want it to look like this: http://www.exsilentio.org/apa/test/want.jpg here's the site, i don't know why they're not next to eachother, and at one point they were, but when i made the window smaller they weren't next to eachother...i also tried making a big table to put those tables in and it didn't work...thanks Code: <html>
<head>
<title>top</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
#table1, #table2 {
float: left;
margin-left: 0.5em;
margin-right: 0.5em;
}
html, body {scrolling: auto;}
</style>
</head><center>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="992" height="151" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="images/top_01.gif" width="992" height="109" alt=""></td>
</tr>
<tr>
<td>
<img src="images/top_02.gif" width="143" height="18" alt=""></td>
<td>
<img src="images/top_03.gif" width="145" height="18" alt=""></td>
<td>
<img src="images/top_04.gif" width="144" height="18" alt=""></td>
<td>
<img src="images/top_05.gif" width="144" height="18" alt=""></td>
<td>
<img src="images/top_06.gif" width="144" height="18" alt=""></td>
<td>
<img src="images/top_07.gif" width="19" height="18" alt=""></td>
<td>
<img src="images/top_08.gif" width="253" height="18" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/top_09.gif" width="992" height="24" alt=""></td>
</tr>
</table></center>
<center><table id="big1" width="973" border="0" cellpadding="0" cellspacing="0"><td>
<table id="table1" width="720" border="0" cellpadding="0" cellspacing="0">
<td align="left"><img src="images/bottom_01.gif" width="720" height="7" alt=""></td>
<tr><td align="center"bgcolor="d6d6d6">dsafasdf<Br><br>asfdasdfsd<br></td><tr>
<tr><td align="center"><img src="images/bottom_07.gif" width="720" height="4" alt=""></td></tr></table>
<table width="19" cellpadding="0" cellspacing="0"><td> <img src="images/spacer.gif" width="19" height="5" alt=""></td>
<table id="table2" width="253" cellpadding="0" cellspacing="0" border="0">
<td align="right"><img src="images/bottom_03.gif" width="253" height="5" alt=""></td>
<tr><td align="center"bgcolor="d6d6d6">dsafasdf<Br><br>asfdasdfsd<br></td><tr>
<tr><td align="center"><img src="images/bottom_07.gif" width="253" height="4" alt=""></td></tr></table>
</table>
</body>
</html>
site Ok I'm trying to get a page to look like this I did it with images, so theres no text. So there's 4 images basically I tried to do a table like this Quote: <table border="0"> <tr> <td><a href="http://milkshakekicks.com/kicks/index.php?main_page=product_info&cPath=1&products_id=10&zenid=c1961df3cad20f9854cb47801f 85ee4d"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/picture-1.png" alt="" /></a></td> <td><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/picture-2.png" alt="" />, <img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/picture-3.png" alt="" />, <a href="http://milkshakekicks.com/kicks/index.php?main_page=product_info&cPath=1&products_id=10 amp;zenid=c1961df3cad20f9854cb47801f85ee4d"><img style="border: 1px solid grey;" src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/battle_homepage.png" alt="" width="209" height="179" /></a></td> </tr> </table> but got this Should I not do this with tables? |
|||||||