HTML - Table / Template Question
Thank goodness for a forum like this! A newbie is at work here and needs help.
I am working on my wife's website and I am struggling. I am basically laying out a template in tables. I am sure this is not the best way to do it, but I really do not know of any other way. Here is my problem: I have an image on the top and then (2) columns below it. One column (on the right) is full of images) and the one on the left will be the editable region. But when the editable region gets too large is starts to move the images on the right (pushes them down). I am at a loss, I really want to fix that right column of images from ever moving and give wifey the opportunity to type to her hearts content and make the editable region a mile long if she wishes without moving the right column of images. Since I am bad at explaining stuff like this here is the link the site if you need to view the setup: http://www.magpiesong.com/ Any help anyone could give me would be awesome! I am using Dreamweaver 3 (Yeah, it is old). I did this with my site (tennis4you.com) and someone took my template and fixed the table on the left, so I think it can be done, I just do not know how they did it. Also, there is a horizontal line between the right column of images and the top banner image. I would like that line to go away, but I do not know if that is possible or not. I appreciate your time! Thank you, Scott Baker Similar TutorialsGreetings, I'm familiar with coding, but not a genius by any means. I've ran this by a few HTML guys and neither have had any luck. I am trying to come up with a template for a webpage. I would like the basic layout of: This page My goal is to have the frame layout the same with the following: Top Left frame - Logo Bottom Left frame - undecided, probably contact information Left frame - navigation links Bottom frame - content I'd like the top 3 frames to stay stationary (even when going to another internal link), and the bottom page able to scroll and change content when necessary. I'm able to see the layout fine in Firefox, but not IE 6.0 One of the HTML guys suggested using a table instead of frames to get the same effect. We were able to view it in IE, however could not get the top 3 cells to stay stationary while the bottom moved. Someone mentioned iframes, but I don't know anything about them or how to implement them. Could someone look at the 2 sets of code and see if the above mentioned idea is possible (and obviously how to make it work if so)? I don't care if its frames or table, as long as it works, hehe. Frame Code: Code: <html> <head> <title> The Page Name </title> <meta name="keyword" content="blah" /> <meta name="description" content="I hope this works" /> <meta name="robots" content="all" /> </head> <FRAMESET ROWS="75,*"> <NOFRAMES> <BODY BGCOLOR="#FFFFF0"><CENTER>Your browser does not suport frames. </CENTER> </NOFRAMES> <FRAMESET BORDERCOLOR="RED" COLS="200,*"> <FRAMESET ROWS="23,23"> <FRAME MARGINWIDTH="1" MARGINHEIGHT="1" NAME="logo" SRC="logo.htm" SCROLLING="no"> <FRAME MARGINWIDTH="1" MARGINHEIGHT="1" NAME="counter" SRC="counter.htm" SCROLLING="no"> </FRAMESET> <FRAME MARGINWIDTH="1" MARGINHEIGHT="1" NAME="menu" SRC="menu.htm" SCROLLING="no"> </FRAMESET> <FRAME FRAME MARGINWIDTH="35" MARGINHEIGHT="1" NAME="main" SRC="main.htm"> </FRAMESET> </body> </html> -------------------------------------- Table Code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>table</title> <style ="text/css"> body{ margin: 0px; } </style> </head> <body> <table style="text-align: left; width: 100%; height: 100%;" border="1" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="width: 200px; height: 37px;">a</td> <td colspan="1" rowspan="2">a</td> </tr> <tr> <td style="height: 37px;">a</td> </tr> <tr> <td style="vertical-align: top;" colspan="2" rowspan="1">a</td> </tr> </tbody> </table> <br> </body> </html> I appreciate any and all feedback. Thanks. Hello, I would like to add a table behind everything on this blogger template and add a background to it. I'm not so sure of how to do this. I'm new to blogger XML templates. Please excuse me, I'm a little rusty. It's a free template called WhiteMagic and it has CSS in it as well. I could not save this file other than XML. Looks like its way to big to be posted on here. Sorry for any inconvienence but is there any other way that I can show this code? Thanks in advance I have a table and after I select the question (the ball) I would like the answer to come up in another column in that table. Is that too much? Keep'er simple please. Thanks. how to make a table which they will auto go to next line after 3 table inserted i want to make a php script which use " foreach glob " to find valid file in the directory and display as table. for example : if the directory contain 7 file, the table should be display as [] [] [] [] [] [] [] not display as [] [] [] [] [] [] [] or [] [] [] [] [] [] [] Does anybody know how to do that It is very basic but some how I don't get it. in my table tag I have <table width="100%" border="1" cellspacing="0" cellpadding="0"> but I don't like the border showing up like the way it is. I want it to be flat regular black line, and then I want to partition this table in the middle so that the Table of Contents returned by my sql query shows up in equally on both sides... in a table 1. INTRODUCTION 3. BASIC ALGEBRA 2. SIMPLE ALGEBRA 4. ADVANCED ALGEBRA Right now I have the following code: Code: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <cfoutput query="qry"> <tr> <td >#numbering#. #Table_Of_Contents#</td> </tr> <cfset numbering = numbering + 1 /> </cfoutput> </table> ANy help is appreciated.. I have a little bit of a problem... Those of you with bigger resolution screens will see what I mean (I have a 20" screen)..... If you go here http://webtvdeluxe.com/whatsnew.php?..._from=&ucat=1& , you will see that the right the side of my design is not touching the bottom of the browser window. I thought that I solved this problem by making the height 100%, but it didn't work. Also you only see this when there's not that much information on the page (you know....making it longer) like it is now. My question is...... How can I can make it so that the table touches the bottom of the window at all times. Or maybe one of you can look at my source code and see what I am doing wrong. Thanks in advance. i have the following code and all I want to do is fix it so that the text within the border is centered and I know it has to do with the red text. I simple want the border to stay at the 60% width but when I do that it aligns the text flush left and I want it to stay in the center as specified by <table align = "center;"..... <html> <body> <p style = "text-align: center;"> <img src = "entre.gif"/> <hr style = "color: green; height:3;width 50%"/> <table align="center" width = 60%; style="border:1px solid black;"> <tr> <td> <p><b>Chicken Parmigiana</b>.........................<span style = "color:red"> $12.75</span></p> <p><b>Chicken Francese</b>.......................<span style = "color:red"> $12.75</span></p> <p><b>Chicken Cacciatore with Mushrooms</b>.............<span style = "color:red"> $12.75</span></p> <p><b>Chicken Marsala with Mushrooms</b>..............<span style = "color:red"> $13.75</span></p> <p><b>Chicken Milanese</b><i>(sauce,no Cheese)</i>...............<span style = "color:red"> $12.00</span></p> <p><b>Eggplant Parmigiana</b>...................<span style = "color:red"> $10.75</span></p> <p><b>Eggplant Rollatini</b>..........................<span style = "color:red"> $11.75</span></p> <p><b>Suasage & Peppers</b>.......................<span style = "color:red"> $12.00</span></p> <p><b>Veal Milanese</b><i>(Sauce, no Cheese)</i>...................<span style = "color:red"> $12.50</span></p> <p><b>Veal Parmigiana</b>......................<span style = "color:red"> $13.25</span></p> <p><b>Veal Parmigiana ala Siciliana</b><i> (with Eggplant)</i>........<span style = "color:red"> $14.00</span></p> <p><b>Veal & Peppers</b>......................<span style = "color:red"> $12.75</span></p> <p><b>Veal Cacciatore with Mushrooms</b>................<span style = "color:red"> $13.50</span></p> <p><b>Veal Pizzaiola with Mushrooms</b>..................<span style = "color:red"> $14.25</span></p> <p><b>Veal Marsala with Mushrooms</b>..................<span style = "color:red"> $14.25</span></p> <p><b>Veal Sorrentina</b>...................<span style = "color:red"> $14.75</span></p> <p><b>Veal Francese</b>....................<span style = "color:red"> $13.75</span></p> <p><b>Chicken Sorrentina</b>....................<span style = "color:red"> $13.75</span></p> <p><b>Shrimp Marinara or Fra Diavolo</b>.............<span style = "color:red"> $14.50</span></p> <p><b>Shrimp Scampi</b>..................<span style = "color:red"> $14.50</span></p> <p><b>Shrimp Parmigiana</b>..............<span style = "color:red"> $14.50</span></p> <p><b>Shrimp Oreganata</b>..............<span style = "color:red"> $14.50</span></p> <p><b>Shrimp Francese</b>................<span style = "color:red"> $14.50</span></p> <p><b>Scungili Marinara or Fra Diavolo</b>..............<span style = "color:red"> $14.50</span></p> <p><b>Calamari Marinara or Fra Diavolo</b>..............<span style = "color:red"> $13.75</span></p> <p><b>Clams Posillipo</b>....................<span style = "color:red"> $13.75</span></p> <p><b>Scungilli Salad</b>..................<span style = "color:red"> $14.25</span></p> <p><b>Fried Calamari</b>...................<span style = "color:red"> $14.25</span></p> <p style = "text-align: center;"> <br/><i>All of the above served with your choice of Spaghetti <br/>Ziti or Salad and Italian Bread</i></p> </td> </tr> </table> I'm in the process of coding a webpage and I haven't done this in almost 7 years.... Here is my unfinished webpage...... http://webtvdeluxe.com/home.php What I am trying to figure out is how to move everything up so that the banner is touching the top. I don't want that space between the top of the window and the banner. I want to close that gap pretty much. I thought it was as simple as doing a Quote: valign="top" in the td part of the table, but that doesn't seem to work and I can't figure out what I am doing wrong. If one of you can look at my source code and give me a soltuion to my problem.... that would be great. Thanks in advance. Im a extreme newbie to html. So be kind. Here is what I want to do. I have a table with 6 icons in 6 cells in column 1. In column 2 I have merged all 6 cells to form 1 cell. I want the user to be able to change the text in the column 2 merged cells depending on which icon they roll over in column 1. Where do I start?? Thanks, Frank M Comments on this post tr84 agrees: I have two questions. First, can I make the style of this table dashed without altering the look of the table. Second, how would I center the text within each table cell. Code: <html> <body> <table border="1" align ="center" style="font-size:x-small" cellpadding="2"> <tr> <td> <b>Monday</b> Buy any two sandwiches <br/> and get the third FREE </td> <td> <b>Tuesday</b> Choose any appitizer <br/> for just $3 with any <br/> order of $10 or more </td> </tr> </table> </body> </html> Within the <table> tag, there is an attribute called frame. Can someone list for me the different values for the frame attribute. I know there is <table frame = rhs | lhs but I don't know what else there is other than rhs and lhs. Thanks hi, I'd like to say that I'm extremely new to xhtml and CSS, so please bare with me. My question is simple, consider I have this code HTML Code: <table class="mainTable" border="0" cellspacing="30"> <tbody> <tr> <td> <p><b><a class="button" href="l1.html" target="_blank">Link1</a></b></p> </td> <td> <p><b><a class="button" href="l2.html" target="_blank">Link2</a></b></p> </td> <td> <p><b><a class="button" href="l3.html" target="_blank">Link 3</a></b></p> </td> <td> <p><b><a class="button" href="l4.html" target="_blank">Link 4</a></b></p> </td> </tr> </tbody> </table> 1) what does target="_blank" mean? 2) My intention is to place this table in the upper center of the screen. How can I center the table ? 3) The height on each cell in this table is huge, how can I decrease the height of the cells? Thanks Ok... I'm looking to create a border on the left and right of a table I have. I already have the image, but I'm curious as to how to impliment it, just on the left and right side.. Basically it'll make a drop shadow to the background of the page. The code for index.php is this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Web Hosting, Reseller Hosting, Dedicated Servers, Web Design - Blitzkrieg Computer Technologies</title> <meta name="description" content="Blitzkrieg Computer Technologies offers Reseller Website Hosting, Dedicated Server Hosting, Shared Website Hosting, Domain Name Registration, and Web Design at affordable prices with 24/7 support and industry-known service."> <meta name="keywords" content="web hosting, domain names, cheap web hosting, website hosting, web page hosting, web design, ecommerce web hosting, internet access provider, web hosting provider, web hosting services, internet web hosting,dedicated web hosting, award winning web hosting, domain hosting, domain registration, registrar, cheap domains, cheap registrar, cheap domain registration, website name, dedicated hosting, dedicated server, dedicated servers, dedicated web hosting, dedicated,cheap dedicated, cheap dedicated hosting, cheap dedicated servers, cheap servers, cheap dedicated linux hosting, cheap dedicated windows hosting, dedicated windows hosting, dedicated linux hosting, dedicated red hat hosting, dedicated centos hosting,dedicated windows server hosting,dedicated windows server 2003 hosting, managed dedicated hosting,managed colo, managed colocation"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> a:link {color: #D2D2D2;} a:visited {color: #D2D2D2;} a:active {color: #D2D2D2;} a {text-decoration: none;} </style> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body background="images/bgtex.jpg"><font size="2"> <table cellpadding="0" cellspacing="0" border="0" style="width:75% " align="center" valign="top"> <tr> <td valign="top" style="width:100%; background:url(images/top.gif) " height="144" > <table cellpadding="0" cellspacing="0" border="0" style="width:100% " align="center"> <tr> <td valign="top" style="width:50% " height="144"></td> <td valign="top" width="766" height="144"> <table cellpadding="0" cellspacing="0" border="0" width="766"> <tr> <td valign="top" width="766" height="140"> <div style="margin-top:10px "><a href="?page=home"><img src="images/m1.gif" alt="" border="0"></a><a href="?page=sharedhosting"><img src="images/m2.gif" alt="" border="0"></a><a href="?page=resellerhosting"><img src="images/m3.gif" alt="" border="0"></a><a href="?page=dedicated"><img src="images/m4.gif" alt="" border="0"></a><a href="?page=vps"><img src="images/m5.gif" alt="" border="0"></a><a href="?page=design"><img src="images/m6.gif" alt="" border="0"></a><a href="?page=contact"><img src="images/m7.gif" alt="" border="0"></a></div> <div style=" margin-left:21px; margin-top:24px "><img src="images/logo.jpg" alt="" border="0"><img src="images/p1.jpg" style="margin-left:249px " alt="" border="0"></div> </td> </tr> </table> </td> <td valign="top" style="width:50% " height="144"></td> </tr> </table> </td> </tr> <tr> <td valign="top" style="width:100%; background:url(images/2_bg.gif) " height="3" > </td> </tr> <tr><td background="images/8_w1.gif"><font size="2" color="#D2D2D2"> <center> <a href="?page=about">About Us</a> | <a href="?page=contact">Contact Us</a> | <a href="?page=login">Customer Login</a> | <a href="?page=aup">Acceptable Use Policy</a> | <a href="?page=tos">Terms of Service</a> </center></font></td></tr> <tr><td valign="top" style="width:100%; background:url(images/2_bg.gif) " height="3" ></td></tr> <tr> <td valign="top" style="width:100%; background-color:#686868" height="410"> <table cellpadding="0" cellspacing="0" border="0" style="width:100% " width="766" > <tr> <td valign="top" style="width:50% " height="410"></td> <td valign="top" width="766" height="410"> <table cellpadding="0" cellspacing="0" border="0" width="766"> <tr> <td valign="top" width="766" height="410"> <div style=" margin-left:13px; margin-top:22px; margin-right:0px; line-height:15px " class="s"> <font color="#D2D2D2" size="3"> <?php if (isset($_GET['page'])) { switch ($_GET['page']) { case "home": include ('home.php'); break; case "thanks": include ('thanks.php'); break; case "sharedhosting": include ('sharedhosting.php'); break; case "hosting": include ('hosting.php'); break; case "ip": include ('ip.php'); break; case "domain": include ('domain.php'); break; case "resellerhosting": include ('resellerhosting.php'); break; case "domain": include ('domain.php'); break; case "custom": include ('custom.php'); break; case "design": include ('design.php'); break; case "speedtest": include ('speedtest.php'); break; case "vps": include ('vps.php'); break; case "about": include ('about.php'); break; case "construction": include ('construction.php'); break; case "cpanel": include ('cpanel.php'); break; case "tos": include ('tos.php'); break; case "contact": include ('contact.php'); break; case "login": include ('login.php'); break; case "testimonials": include ('testimonials.php'); break; case "quote": include ('quote.php'); break; case "emailhosting": include ('emailhosting.php'); break; case "dedicated": include ('dedicated.php'); break; case "entrydedicated": include ('entrydedicated.php'); break; case "smallbizdedi": include ('smallbizdedi.php'); break; case "enterprisededi": include ('enterprisededi.php'); break; case "aup": include ('aup.php'); break; case "customdedicated": include ('customdedicated.php'); break; default : include 'home.php'; break; } } else { include 'home.php'; } ?></font><br><br><br> </div> </td> </tr> </table> </td> <td valign="top" style="width:50% " height="410"></td> </tr> </table> </td> </tr> <tr> <td valign="top" style="width:100%; background:url(images/bg2.gif) repeat-x top " bgcolor="#FFFFFF" height="17"> <table cellpadding="0" cellspacing="0" border="0" style="width:100% " width="766"> <tr> <td valign="top" style="width:50% " height="17"></td> <td valign="top" width="766" height="17"> <table cellpadding="0" cellspacing="0" border="0" width="766"> <tr> <td valign="top" width="766" height="17" style="background:url(images/7_p1.jpg) no-repeat top right "> </td> </tr> </table> </td> <td valign="top" style="width:50% " height="17"></td> </tr> </table> </td> </tr> <tr> <td valign="top" style="width:100%; background:url(images/bottom.gif) " height="65"> <table cellpadding="0" cellspacing="0" border="0" style="width:100% " width="766"> <tr> <td valign="top" style="width:50% " height="65"></td> <td valign="top" width="766" height="65"> <table cellpadding="0" cellspacing="0" border="0" width="766"> <tr> <td valign="top" width="766" height="65"> <div style=" margin-left:16px; margin-top:25px "><font size="2" color="#696969"><center> Copyright © 2003-2009 Blitzkrieg Computer Technologies. All Rights Reserved.<br></center></div> </td> </tr> </table> </td> <td valign="top" style="width:50% " height="65"></td> </tr> </table> </td> </tr> </table> </font> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-3505975-1"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html> Hello all, I Just have a basic question here, it goes like this, when i make HTML Tables, how do i make it so that when i put stuff in a column, the column beside it doesn't stretch? For example take this: HTML Code: <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table> Then if i change this: HTML Code: <td>row 2, cell 1</td> <td>fff<br> ffff<br></td> Then "row 2 cell 1" would have also gone down 2 lines, you with me? Basically what i am trying to say is, how do i add text to a column without the corresponding column beside it stretching? I Want them to be independent of one another. Thanks. I seem to be having some issues with getting my table to appear as Id like it. This is a small sample but right now everything is just ontop of everything else..I would like the whole " sunday" stuff to be to the left of all the "monday" stuff. How would I set that up? Thanks for the help PHP Code: <p><strong>Weekly Events</strong></p> <table style="70%;"> <col style="width:20%; color:#000000; background-color:#CCCCCC;" /> <col style="width:80%; color:#000000; background-color:#CCCCCC;" /> <tbody> <td><strong>Sunday</strong></td> <tr> <td>Event</td> <td><input type="text" name="sunday_event" size="40" maxlength="40" value="<?php if (isset($_POST['sunday_event'])) echo $_POST['sunday_event']; ?>" /></td> </tr> <tr> <td>Description</td> <td><textarea name="sunday_desc" cols="31" rows="6" value="<?php if (isset($_POST['sunday_desc'])) echo $_POST['sunday_desc']; ?>" ></textarea></td> </tr> <tr> <td>Time</td> <td><input type="text" name="sunday_time" size="40" maxlength="40" value="<?php if (isset($_POST['sunday_time'])) echo $_POST['sunday_time']; ?>" /></td> </tr> <td><strong>Monday</strong></td> <tr> <td>Event</td> <td><input type="text" name="monday_event" size="40" maxlength="40" value="<?php if (isset($_POST['monday_event'])) echo $_POST['monday_event']; ?>" /></td> </tr> <tr> <td>Description</td> <td><textarea name="monday_desc" cols="31" rows="6" value="<?php if (isset($_POST['monday_desc'])) echo $_POST['monday_desc']; ?>" ></textarea></td> </tr> <tr> <td>Time</td> <td><input type="text" name="monday_time" size="40" maxlength="40" value="<?php if (isset($_POST['monday_time'])) echo $_POST['monday_time']; ?>" /></td> </tr> I'm taking up HTML editing as a class elective in college and find it very louring in it's creative aspects. I'm messing around with Tables currently and for the life of me i cannot get the table to align directly to the top of the page. There's like a 10px space on the top. I've tried the valign=top or valign=texttop and nothing will make it touch the top of the page with out leaving a space. can some please tell me what i'm missing? Thanks for the help! here's my html code: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Untitled 1</title> </head> <body bgcolor="880000"> <table bgcolor="yellow" border="0" cellpadding="0" cellspacing="0" valign="top" width="800"> <tr> <td style="height: 23px"></td> </tr> </table> </body> </html> This may seem like a silly design question, I just CANNOT figure this out. this site, www.chrisdelia.com is made up of tables that are 100% table width. I want to replace the green area with an image that is 300x300 px and have the gray area go 100% across, but i just cannot seem to figure it out. inside the gray area also is an iFrame on each page, where the content goes, always. am i an idiot for overlooking the easiest thing ever? Hi, i have a problem with html tables. Im working on a myspace layout for my band. the table layout looks great in IE but not in Firefox. i can give you a link to the page http://www.myspace.com/northeytest and even the coding if you need to see it The problem is that i have two tables under two different <div> classes. both div calsses are set the same, that are set to an absolute position, a left margin of -400px (each table is 800px in width) and a left positioning of 50%. the only difference is the second one has a margin at the top of 942px. In IE, this works fine, but in firefox, the table is halfway off the page on the left hand side unless i change the margin to 105%. please help me edit: also, im new, so hi im also just starting out with learning html code hi, I have a table that I set its bg to an image. the width and height of the table is 100%, padding 0 and boarders are 0 and I still see while bacground arround the table. how can I expand the table to cover my full screen? thanks I need a bit of help with some images within the cell of a table. In this cell I have a background image that I am hoping will adjust to fit the varying heights of my table on different pages (some pages have more info and are therefore taller - for lack of a better description). In this same cell, and on top of the background image, I have the navigational image and it all seems to work exactly the way I want it to, with one exception. The exception is that when I view the page, the navigational image is much to low in the cell. I have done a bit of reading and unless I am just flat out not looking in or for the right information, I can't find anything that looks like it could be a solution. You can see what I am trying to explain here. You can see just how low the navigational list is and I would like to have it moved more towards the top of the cell. I am pretty sure that I can move it up if I use a lt of " " but I don't think this would be the best way to go. I am sure there is a way to do this so if any of the experts here have a suggestion as to how to fix this or where to look for information about moving the images around in a cell I would greatly appreciate any help. Thanks, Vance |