|
HTML - Simple Table Issue
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>
Similar TutorialsOkay 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? hi, i tried looking through forums but couldnt find an answer. i hope u can please help! i have a photography ad up on a site that i use html for, its simply a block of code hosting a list/tall page of pics, one line/pic goes like this... <img src="http://img715.imageshack.us/img715/3126/img7899small.jpg"><br> the other lines in the text are the same code. problem is they all try to load up simultaneously causing a slow ad to see anything, potentially losing observers attention span. do u know if theres some code i can add to each line so each pic loads up fully before the next one begins to load and this starts at the top? this will help keep attention due to somin at the top loading straight away, thanks! I have a simple 2 column 2 row table that looks like the code below. I want to expand cell 2's height without expanding cell 1's height. I need this to be dynamic due to different users seeing different heights in cell 2. Cell 3's height can change all it wants to...I just dont want cell 1's height to change!! <html> <head> <title>Height Issue</title> </head> <body> <table> <tr> <td width="100px" height="100px"style="background-color: ##00FF00">cell 1</td> <td rowspan="2" width ="100px" height="200px"style="background-color: #00FFFF">Cell 2</td> </tr> <tr> <td width ="100px"height="100px"style="background-color: #FFFF00">Cell 3</td> </table> </body> </html> Hello HTMLforums.com community! I am doing some minor web design for an NPO (non-profit organization) in my community. There are some pages that exhibit this strange spacing between the headers and body as you will see on the following pages: http://www.gadshillcenter.org/progra...grams_main.php http://www.gadshillcenter.org/progra...enservices.php http://www.gadshillcenter.org/progra...connection.php This same thing happens with all other program_??.php pages. However, it does not happen on the following, seemingly identical templates: http://gadshillcenter.org/report/report_main.php http://gadshillcenter.org/newsevents...herreading.php http://gadshillcenter.org/newsevents...blications.php There doesn't seem to be borders on any of the pictures, so I see no reason for the indent that pushed the picture and top-left edge down one row. I use Microsoft Office Sharepoint Designer 2007. If you would like to view the code for any pages, just ask! Any ideas why? I could ENTIRELY reformat the pages, put them into tables and what-not, but that would take a while. Is there any way around this? Thank you all! Sincerely, Andrew Hello World! (Where did that tradition start anyways?) Yes, I am fairly new at web design, and am using the method of "search-Google-whenever-you-have-a-problem-as-you-go" to learn HTML. I am pretty happy with the results I am getting in Dreamweaver, but there is one nagging thing that is throwing a kink into my designs. I have the majority of the content that is unique to each page within a table cell (<td>). Since I wanted to have the background color of the cell match exactly to an image that tops off the page body, I decided to have the background be one pixel of that color that repeats across the whole table cell. Originally, I just defined the background in the starting tag using "style=" then specifying the background. (Dreamweaver made sure I had it right using its Code Hinting). The background shows up perfectly when in the Dreamweaver editing view, but when looking at the page in any other view (Live view, preview in browser, etc.), the background of that cell is just white. I tried defining the background with a CSS ID, which has worked on other parts of the page, but no beans. What am I doing wrong? Is the fact it is only one pixel that has to repeat an issue? Here is the code: <td width="100%" height="103" colspan="8" align="center" id="page_background_beige" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1; border-bottom-style: none; border-bottom-width: medium;"> <!-- TemplateBeginEditable name="Body" --> //In here goes all of the content of the page <!-- TemplateEndEditable --></td> The CSS: #page_background_beige { background-image: url(Background_Pixel.png); background-repeat: repeat; } Thanks, Wookieguy (Heh, I know tables are a fairly sloppy way to do things, but this is a fairly simple site anyways.) hey forum. first timer here with what i think should be a simple fix...but i'm frustrated and out of patience. can anyone tell me why i can't get rid of the blank space above "bedrooms" in the left column here? http://jimbwayne.com/kdtest/interiordesign.html same issue with the middle column, actually. i'm stumped. any intel would be much appreciated. thanks in advance. jim I have a Very simple page laid out using <div>'s and at the bottom, IE6 is displaying some of my text (a text link) twice, and wrapping it to the next line? ANY help at all would be a life saver. http://www.jhilgert.com/em/index.html thanks in advance for any help. 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? 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 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. 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> 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 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? 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>
Hello, I have a site that I am trying to work on and have an issue with a table that has been devided to allow for a sliced graphic and I cannot get the cells to come together even though I have put cellpadding and cellspacing to "0". you can view it he http://www.silkwebsolutions.com/malyshbeck/ it is the same in Firefox and IE. I have tried collapsing the border for table and td and nothing works. Any help would be greatly appreciated. Thanks, S this is the last time im gonna nag any1 over stupid stuff if i could just get some help on this last issue i wont bother the forum members with my nonsense anymore, i ordered 2 html books on amazon.com and a java book my site is 100% ready to go public except this 1 issue i have .... I cant get my tables to properly work arround my flash menu ? you can see here if you minimize the window the table lets my flash menu move into my text it use to not do this but i dont know what i did... http://www.freewebs.com/fallingrain11/outcome.html the code im using for this is below :: <tr><td bordercolor="#7FFC00"; align="left" Width="17%" valign="top"> <div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <a href="javascript:void" > <object cellpadding="100"; classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="143" height="395"> <param name="BGCOLOR" value="#0"> <param name=movie value="irawr-flash-menu-vertical.swf"> <param name=quality value=high> <embed src="irawr-flash-menu-vertical.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="143" height="395" bgcolor="#0"> </embed> </object> </a></div> Hey all.. I have an image that is not lining up in IE6, but does fine in FF... Here's the code: Code: <table height="400px" bgcolor="#efefef" width="192px" cellpadding="0" cellspacing="0"><tr><td height="20%" > <img src="images/module_header.gif" height="23px" width="190px" align="top" /> <a href="linkgoeshere.html" border="0" /> </a> </td></tr> <tr> <td> <center> <img src="images/module_header.gif" height="23px" width="190px" /> <a href="http://bbsnews.net/bbsn_weather/current.php?config=&forecast=zandh& pands=28792&Submit=GO" title="Commercial Free Weather at BBSNews.net"> <img valign="top" src="http://bbsnews.net/bbsn_weather/current.php? forecast=hourly&pands=28792&config=png&alt=hwicc&hwvttf=BOGSTAND& daysonly=1&hwvbg=efefef&hwvtc=black&hwvusettf=1" border=0 width=166 height=77></a> </center> </td></tr></table> </td></td></table> And here's an image of what I mean.. The two module headers at the top should be to the right... above the other items. Help would be much appreciated.. 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> |
|||||||