|
HTML - Can't Put A Simple Table Up On My Site
Don't know what I'm doing wrong here. I'm new to this. Please help
Here in my page: HTML Code: <html>
<head>
<title>My Spanish Adventure.com</title>
<meta name="kwrd" content="spanish toutor"/>
<meta name="kwrd" content="spanish lessions telephone"/>
<style type="text/css">
body{background:#cccccc;
color:black;
font-family:Garmond;}
h1,h2,h3 {color:#0033CC;
font-family:cursive;
font-size: 32px}
</style>
</head>
<img src="msppic.jpg"/>
<h1> My Spanish Adventure.com</h1>
<body>
<table>
<tr>
<td> Welcome to Spanish Interactives' "My Spanish Adventure.com" A web site which allows you to have conversations with fluent spanish speakers on the telephone. In these sessions you will be able to truly create a situation where you will have to work to maintain a conversation with someone who will rarely break into english to help you through it. <p></td>
</tr>
</table>
With this program you will
<ul>
<li> Be able to schedule phone conversatons with spanish speakers who are fleuent in both spanish and english (or some prefer that the person only know spanish)
<li> Be sent pamphlets to help guild you through the conversations. For example, we might have you set up a phone conversation in which we recreate you ordering food from a street vendor, or discussing todays events with a friend
<li>have to oportunity to have a free converstion in which you can talk about what ever you want
<li>set up conversations where you decide the level of dificulty. You can request the speaker to speak very slowly and to only use rudimentry words to a fast pace normal converstional style.
<li>May ask the speaker to never bail out a conversation with english translations, or to frequently define words for you in English.
</ul>
</body>
</html>
Why does't the table show? Similar TutorialsMy sites forums http://fleecho.com/forums.html There is a line that sticks out to the right it is right below the menu... Anybody know how to fix that? I have a site that is rather large with several pages and files. It is an internal site for the company I work for. Some of the people who send me content to put on the site want to be able to make these updates themselves. None of them know much, if any, HTML or CSS. Is there any tool out there that can make it possible for them to updtate the site without adding a bunch of unecessary code to what is already there? I was looking into CMS applications (this was suggested to me last time I posted about this), but they seem to be applications that you have to build the site with, rather than take a site that already exists and modify. Thanks for any help! Hi ! I was wondering if anybody know how i make a table at the absolute top of a site. In dreamweaver it creates a space between the browser and table. A example is the top menu of this page http://www.nettkatalogen.no I need to create something similar to the top menu in yellow at this page. thx how can i make the user add his own url to a table in the site? Hi there, I have a table layout on the main page of site I'm working on, and have one row with two cells. The cell on the left contains a php include page which auto updates with news, however, as the news gets longer and the cell container auto resizes to fit the height..it also messes with the height of the cell on the right, leaving empty spaces (the black space right under "recruitment status") I'm stumped as to how to deal with is, any suggestions are much appreciated. Thanks the site: http://guild-paragon.com/indexframe edit: decided to put an iframe in there to hold the height, there's prob better alternatives out there though hey guys - I was trying to add a little more kick to my website today and making the text appear in little windows I guess you would say - (I know the site is not complete and links are intentionally broken) if you look on the right of the page you will notice I added 2 table cells to round off the white - now the problem I can not figure out how to bring the white area over to the rounded edges whether I need to make the cell wider or if I need to add another cell - any help is appreciated. source: Http://www.medicalpracticeexams.com/index.asp Thanks Okay I have a table that has two rows and eight columns. I want to make a third row with only ONE column so that the third row is the length of the table. How do I go about doing that? 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 am trying to 'revise' a website for my boss. I am just going through the website and fixing broken links, re-wording, taking new pictures, etc. The problem is very small but it is bugging me. At the bottom of the page there used to be an image of the address of the business. It was wrong so I just decided to change it and add a table with background color and white text to match the theme of the top of the page. After doing this, the table doesn't completely touch the other tables and I would like it to completely touch the side of the left table. I know my explanation is a little confusing so I am supplying an image. I have circled the problem... Here is a part of the code that I think might be useful... (website at http://www.yournetexperts.com/index.html) HTML Code: <TABLE BORDER="0" cellpadding="0" CELLSPACING="0" bordercolor="#330000" width="100%"> <TR> <TD WIDTH="503" HEIGHT="17" BGCOLOR="#330000" VALIGN="bottom" align="center"> <font face="Trebuchet MS" style="font-size: 8pt" color="#FFFFFF">1308 Pierce St, SiouxCity, IA 51105 • P.O. Box 3122, Sioux City, IA 51102 • (712) 258-2771 </font></TD> </TR> </TABLE> I am a newb to html so any help would be appreciated. This should be a pretty easy one, I think that I've just been staring at this for too long. The question is, why is the first row in this table so tall? I am expecting it to be around 400px tall, but it's about 950px. HTML Code: <html>
<head>
<style>
table.container{
width: 1400px;
}
table.subcontainer{
border: 1px solid #000;
text-align: center;
width: 100%;
}
td.container{
background: #DDD;
line-height: 4px;
vertical-align: top;
}
</style>
</head>
<body>
<table class="container">
<tr>
<td class="container" rowspan="2" width="200"><table class="subcontainer">
<tr>
<td height="1000">Toolbar<br />1000 x 200</td>
</tr>
</table></td>
<td class="container" width="400" rowspan="2"><table class="subcontainer">
<tr>
<td height="200">400 x 200</td>
</tr>
</table><br />
<table class="subcontainer">
<tr>
<td height="400">400 x 400</td>
</tr>
</table><br />
<table class="subcontainer">
<tr>
<td height="400">400 x 400</td>
</tr>
</table></td>
<td class="container" colspan="2" width="800"><table class="subcontainer">
<tr>
<td height="400">800 x 400</td>
</tr>
</table></td>
</tr>
<tr>
<td class="container" width="400"><table class="subcontainer">
<tr>
<td>400 x 200</td>
</tr>
</table></td>
<td class="container" width="400"><table class="subcontainer">
<tr>
<td>400 x 200</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Does anyone know how to fix this simple HTML table problem in IE 6 (works in Mozilla). To see the problem, just view it in IE 6. The page is simple but heavily commented. This is from a more complex dynamic web app. I would really like to avoid: - Simplifying the table structure - Removing the DOCTYPE header. If I remove that, the problem completely disappears. Any ideas? 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"> <body style="height: 100%; margin: 0;"> <table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0"> <tr style="height: 100%;"> <td style="background-color: #DDEEFF; vertical-align: top; height: 100%; width: 20%"> <!-- This cell properly extends to the full height of the page including scrolling. --> <table style="height: 100%;" cellpadding="0" cellspacing="0"> <tr height="100%"> <td height="100%" style="background-color: #EEFFDD; vertical-align: top;"> This is the sole cell within an embedded table inside of the outer table's left cell.<br/> <br/> This cell has a green background.<br/> <br/> On Mozilla, I get the desired behavior where the inner cell extends to the bottom of the outer cell. If you scroll down, the whole height of the page is green.<br/> <br/> On IE, the embedded cell only extends to the height of the first page. The background is green on this page. However, if you scroll down, the cell ends and you can see the blue background of the outer cell.<br/> <br/> How do I get IE to behave like Mozilla where the inner cell/table takes up the entire outer cell?<br/> </td> </tr> </table> </td> <td style="background-color: #FFDDEE; width: 80%; vertical-align: top;"> This is the right cell.<br/> This has a lot of contents that requires vertical scrolling...<br /> <br /> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> </td> </tr> </table> </body> </html> 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> Hi, I'm really new to HTML and CSS, but I'm trying to teach myself. Maybe you can help with this problem: I have a table on my homepage that contains 3 columns. I want the first column to have multiple rows (each at 75px high), but I want the 2nd and 3rd column to only have 1 row, and have variable height. I used a colspan tag in the HTML, which seemed to work, in Safari. But I'd like it to look the same in all browsers. In Safari, my first column, top cell, is displayed at the top of the table. And in Firefox and Chrome, that first cell is displayed at the bottom of the table. How can I get the cells to start at the top of the table (each 75 px high) and build from the top-down. For example, This is a screen-shot of what I'd like to have in all browsers: http://toddk.org/table-css-help.png Here is my site: http://toddandjill.com/ CSS: http://toddandjill.com/tkstyles.css These are the CSS properties for my table (also in the CSS file above): HTML Code: .home-table {
margin: 20px auto 0px auto;
border-spacing: 8px 0px;
}
.home-table .row1 {
width: 316px;
height: 0px;
NOborder: 3px dotted;
vertical-align: text-top;
}
.home-table .row2 {
width: 316px;
height: 75px;
border-bottom: 2px dotted #c1c1c1;
vertical-align: text-top;
}
Any help would be greatly appreciated, thanks!! Todd This is driving me nuts. Try this code in IE6. Why are the three red rows on the left showing a height of considerably more than 60pixels when the code asks for exactly 60? Firefox shows this correctly. Code: <html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="195" valign="center" bgcolor="#AAAAAA"><p> </p></td>
<td rowspan="5" width="415" valign="top" style="padding: 20px;" bgcolor="#FFFF66"><p>Middle column</p></td>
<td rowspan="5" width="290" height="440" valign="top" bgcolor="#AAAAAA"><div align="center">Right column</div></td>
</tr>
<tr>
<td width="195" height="60" valign="center" bgcolor="#FF0000">Row 1</td>
</tr>
<tr>
<td width="195" height="60" valign="center" bgcolor="#FF0000">Row 2</td>
</tr>
<tr>
<td width="195" height="60" valign="center" bgcolor="#FF0000">Row 3</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF66"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFFF66"> </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? the website is http://jamesthecoach.com/ If you look at the first lines of the body text "win the battle within.", I just need to move everything in that column up so that there's only about a half centimeter space between the Get Extraordinary header image and the body text. I've been trying to fix this all day, and for the life of me I can't figure it out. If anyone can help me out, I would totally appreciate it and am willing to pay $10 via PayPal if anyone can help me figure this out within the next 48 hours. Thanks! Hello All, I've been having trouble with this table because I have interior cells adding to the confusion. I've included the current code, what you will see is three item images with their descriptions on the right side. You will also see a "view cart" button on the far right of the page. What I want is a simple 2 row 2 column set up for all four components. "Item 1" in the TOP LEFT cell. "Item 2" in the Bottom Left. The "view cart" feature in the TOP RIGHT cell. And finally "Item 3" in the BOTTOM RIGHT cell. I know I only need a few <td> or <tr> lined up in the right place but I've tried everything. THANK YOU IN ADVANCE!!!! <!--// Document Style //--> <style> .product-image { border:none; } .product-title, .product-price, .product-shipping { font-weight:bold; } .data-cell { padding:0px 50px 0px 10px;vertical-align:top} .align-cart { padding-left:280px; top:30pt;} </style> <!--// Document Table //--> <table class="data-cell"> <tr class="product"> <td><img src="images/stainless_thumbnail.gif" width="65" border="0" align="absmiddle" class="product-image"/></td> <td class="data-cell"> <div class="product-title"> <div align="center">Item 1 Name</div> </div> <div class="product-price"> <div align="right">Price: $10.00</div> </div> <div class="product-shipping">Shipping: $3.00</div><br/> <div class="googlecart-add-button"></div> </td> </tr> <tr class="product"> <td><img src="Item2_image.jpg" width="65" border="0" align="absmiddle" class="product-image"/> </td> <td class="data-cell"> <div class="product-title"> <div align="center">Item 2 Name</div> </div> <div class="product-price"> <div align="right">Price: $10.00</div> </div> <div class="product-shipping">Shipping: $3.00</div><br/> <div class="googlecart-add-button"></div> </td> </tr> <tr class="product"> <td><img src="Item3_image.gif" width="66" border="0" align="absmiddle" class="product-image"/> </td> <td class="data-cell"> <div class="product-title"> <div align="center">Item 3 Name</div> </div> <div class="product-price"> <div align="right">Price: $10.00</div> </div> <div class="product-shipping">Shipping: $3.00</div><br/> <div class="googlecart-add-button"></div> </td> </tr> </table> <!--// Document Script "View Cart" //--> <script id="googlecart-script" type="text/javascript" src="http://checkout.google.com/seller/gsc/v2/cart.js?mid=xyz" currency="USD" post-cart-to-sandbox="fale"> </script> Hello, I just made my new site for my company and I tried to keep it extremely simple. I used wordpress to do the basic layout automatically and made some simple edits with some basic html i picked up along the way this week. There seems to be two problems though: 1) the form is inside a table which doesnt seem to align properly within any of the popular browsers (firefox/IE/chrome) .... it should look like 1 image instead of 3 separate pieces 2) i eventually got the form to align slightly better but the spot where I "Enter my zip code" doesnt align with the background image behind it.....sometimes it doesnt even say "enter zip code" which is very bad for a user experience. in firefox it doesnt say it, but in chrome it does say it....either way, both are aligned very poorly..... I put my code into this site: http://w3schools.com/html/tryit.asp?...=tryhtml_intro ...and after editing it, i've come to find that it works perfectly within that html editor and looks exactly how i want it to look. but then when i put the code back into my wordpress site, the alignment messes up again...... so i did some research and found out that wordpress has "deprecated" some of the html tags and that they dont work anymore...if i understand correctly. so now i have to find a way to pick new tags or use CSS...this is just so confusing and i thought maybe somebody here might be able to offer me some assistance to help me fix up this form/table problem. my site's url is: http://www.allautoinsurance.org my code that I'm editing is on the right sidebar, where the alignment messes up: <div style="text-align: center;"><span style="font-size: 14pt; font-family: Georgia; color: rgb(0, 0, 0);"><span style="font-size: 14pt;"><span style="font-size: 14pt;">Our free online service instantly browses the best rates in your zip code area at the click of a button. We've helped thousands of people quickly and easily save money on their auto insurance:</span></span></span><br /> <br /> <form action="http://network.mossaffiliatemarketing.com/z/61/CD62/&subid3= "method="post"> <table border="0" cellpadding="0" cellspacing="0" width="225"> <tr> <td colspan="2"><img src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/top.jpg"></td> </tr> <tr> <td class="background1" valign="middle" height="54" width="153"> <style> .background1 { background-image: url(http://www.allautoinsurance.org/wp-c...tom_left.jpg); background-repeat: no-repeat; } </style> <input type="text" name="subid1" value="ENTER ZIP CODE" style="margin-left:30px; margin-bottom:5px; width:110px; border-width:0px; font-size:14px; font-family: Arial, Helvetica, sans-serif;" onClick="javascript:this.value='';"> </td> <td> <input type="image" src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/bottom_right.jpg"></td> </tr> </table> </form> </div> <div style="text-align: left;"><span style="font-size: 12pt;"><span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 1)</span> Input your zip code and click the button above to begin browsing the auto insurance providers in your area</span></span></span><br /> <br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 2)</span> Select the auto insurance provider you're most comfortable with by clicking their picture<span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;"> </span></span></span></span><br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;">Warning</span>: Dont <span style="font-style: italic; font-size: 12pt;">always </span>go with the cheapest in the area</span></span></span><br /> <br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 3)</span> Continue with the providers process if they meet your requirements</span></span></span></span><br /> </div> <div style="margin-left: 40px;"><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"></span></span></div><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"><br /> <span style="font-size: 12pt;">***We've been showing people how to get insurance quickly and easily for years. We respect your privacy, it is just as important to us as it is to you.</span></span></span> .....thanks for any help, i really appreciate your time and effort. if this code doesnt look smart at all its cuz i used some free WYSIWYG editor to generate it. i actually am very confused lol. thanks again. Best, Kyle P I am wondering if it is possible to create an INDEX.HTML to redirect to another website? I would like it to display the redirected site, but if possible keep to the original address.. e.g. A site named www.mysite.com, with an INDEX.HTML to redirect to www.othersite.com, which displays OTHERSITE with www.mysite.com in the address bar. Hope I explained ok, any responce would be much appricated! Thanks! Hey. So I'm pretty good at stuff in general, my problem is that I do not have extensive experience with HTML/CSS so I don't know the best way to do this, or where to look for a way to do this. Basically, I want my layout to be like this: http://people.virginia.edu/~eee2a/Welcome.html in that I want there to be gray space on the side and a middle that scrolls. super simple right? I just don't know how to do it, and I don't know the best keywords to use on google for it. Thanks. |
|||||||