HTML - Html Nested Tables
Hello guys,
I want to create a page with nested html tables. I have attached an image of exactly what I want. Can you please help me with that? Similar TutorialsHi, I am using CSS with nested tables. There are two <td> fields in the innermost table, and are having links inside them. When I open the page in IE, and move the mouse over to the first cell, the whole cell becomes active. But the second cell becomes active only if I take the mouse on the text. Why this inconsistency? Can anyone help? Thanks. Please refer attached html and css files hi everybody, i have a problem displaying an html page that contains nested tables, all in a div. now the testing page that i present is a simple html, which works just fine in FF, chrome, safari and opera. sadly, it doesnt in IE7 (didnt test other IE versions). the goal is to make the scroll of the div reflect the width of the tables. i dont know what is causing this, maybe there's something missing in my code, or just an IE bug, perhaps... Anyway, i appreciate you reading this and thanks for your help, if any. Hello, Can anybody help me out? I have a nested table as such: =========================================== <table cellspacing="0" cellpadding="3" border="1"> <tr> <td>Joe <table> <tr> <td>A </td> </tr> </table> </td> </tr> </table> =========================================== How can I get "Joe" and "A" on the same line without changing the table structure? (Can't change structure cuz this is how my server side code spits it out. But I can add styles and attributes.) I've tried all manner of floating, margins, padding, aligning, hspacing, vspacing, and nothing seems to work. Thanks for any help. I have some nested tables (collapse/expand kinda table). How can I align the columns of each nested table, if all are expanded I want to see all the columns underneath symetrical. I have attached the screenshot of what I am getting with the following code: HTML Code: <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .collapsed { display: none; } table#container { background-color:#FFFFFF; border: solid #000 3px; width: 400px; } table#container td { border: solid #000 1px; } table#sub { background-color:#FFFFFF; border: solid #000 0px; width: 400px; } table#sub td { border: solid #000 1px; } .toprow { font-style: italic; text-align: center; background-color: #FFFFCC; } .leftcol { font-weight: bold; text-align: left; width: 1%; background-color: #CCCCCC; } </style> <script language="javascript" type="text/javascript"> //***collapsible rows function outliner(evt) { evt = (evt) ? evt : (window.event) ? window.event : ""; var oMe; if (evt.srcElement) { oMe = evt.srcElement; } else if (evt.target) { oMe = evt.target; } if (evt.srcElement) { //for IE var child = document.all[oMe.getAttribute("child",false)]; } else { //for Firefox var child = document.all[oMe.getAttribute("child",false)]; } //get child element //if child element exists, expand or collapse it. if (null != child) child.className = child.className == "collapsed" ? "expanded" : "collapsed"; } function changepic(evt) { evt = (evt) ? evt : (window.event) ? window.event : ""; var uMe; if (evt.srcElement) { uMe = evt.srcElement; } else if (evt.target) { uMe = evt.target; } var check = uMe.src.toLowerCase(); if (check.lastIndexOf("expand.gif") != -1) { uMe.src = "images/collapse.gif"; } else { uMe.src = "images/expand.gif"; } } </script> </head> <body onclick="outliner(event)"> <table id="container" border="1"> <thead> <tr class="toprow"> <td /> <td>Parameter</td> <td>Value</td> <td>DataType</td> </tr> </thead> <tr> <td class="leftcol"> </td> <td>name</td> <td>Mark</td> <td>String</td> </tr> <tr> <td class="leftcol"> <a><img border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)" src="images/expand.gif" width="9" child="s2" p21="p21" p22="p22" p22="p23"></a> </td> <td>composite</td> <td>100,200,red</td> <td>CompositeType</td> </tr> <tr> <td colspan="4" bgcolor="cyan" class="collapsed" id="s2"> <table id="sub"> <tr> <td> </td> <td>X</td> <td>100</td> <td>Int32</td> </tr> <tr> <td> </td> <td>Y</td> <td>200</td> <td>Int32</td> </tr> <tr> <td class="leftcol"> <a><img border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)" src="images/expand.gif" width="9" child="s3"></a> </td> <td>color</td> <td>134,122,234</td> <td>Color</td> </tr> <tr> <td colspan="4" bgcolor="cyan" class="collapsed" id="s3"> <table id="sub"> <tr> <td> </td> <td>R</td> <td>134</td> <td>Int32</td> </tr> <tr> <td> </td> <td>G</td> <td>122</td> <td>Int32</td> </tr> <tr> <td> </td> <td>B</td> <td>234</td> <td>Int32</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> Hi I need help in tables with 100%. Actually i am keeping a table with 100% fihed width in a <td>, but when i am minimising the IE or Firefox browser the columns are reducing , how to solve the problem How can I make textbox in cell[2,2] get its right border displayed and aligned with upper cell??? <table style="padding-right: 20px" cellspacing="0" cellpadding="0" width="1000px"> <tr> <td width="25%"> <span id="Label9">label</span><br /> <input name="TextBox10" type="text" id="TextBox10" style="border-width:1px;border-style:solid;width:100%;" /> </td> <td width="25%"> <span id="Label10">label</span><br /> <input name="TextBox11" type="text" id="TextBox11" style="border-width:1px;border-style:solid;width:100%;" /> </td> <td width="25%"> <span id="Label11">label</span><br /> <input name="TextBox12" type="text" id="TextBox12" style="border-width:1px;border-style:solid;width:100%;" /> </td> <td width="25%"> <span id="Label12">label</span><br /> <input name="TextBox13" type="text" id="TextBox13" style="border-width:1px;border-style:solid;width:100%;" /> </td> </tr> <tr> <td> <table cellspacing="0" cellpadding="0" style="width: 100%"> <tr> <td style="padding-right: 15px" width="50%"> <span id="Label18" style="display:inline-block;width:100%;vertical-align: top; text-align: left">label</span><br /> <input name="TextBox19" type="text" id="TextBox19" style="border-width:1px;border-style:solid;width:100%;" /></td> <td align="right" width="50%" > <span id="Label19" style="display:inline-block;width:100%;vertical-align: top; text-align: left">label</span><br /> <input name="TextBox20" type="text" id="TextBox20" style="border-width:1px;border-style:solid;width:100%;" /></td> </tr> </table> </td> <td> <span id="Label20">label</span><br /> <input name="TextBox21" type="text" id="TextBox21" style="border-width:1px;border-style:solid;width:100%;" /> </td> <td colspan="2"> <span id="Label21">label</span><br /> <input name="TextBox22" type="text" id="TextBox22" style="border-width:1px;border-style:solid;width:100%;" /> </td> </tr> </table> hey guys, Just wanted to know if this is at all possible. I have php pages that create tables through html that show data from my database. I want to know if i added like a print button on the page then get whatever is in the table and sent it to a pdf file to print out for a user. are there any example anyone could post or if this is in anyway remotely possible HTML Code: <table border="0" cellpadding="0" cellspacing="0" width="600"> <tbody> <tr> <td rowspan="10"> <img src="images/blank-1.gif" width="27" height="1035" /> </td> <td> <img src="images/blank-2.gif" width="445" height="43" /> </td> <td> <img src="images/s-trip-logo.gif" width="128" height="43" alt="S-Trip!" /> </td> </tr> <tr> <td width="425px"> <a href="http://www.edgeacademy.ca"><img src="images/edge-logo.gif" alt="EDGE Academy" width="425" height="115" /></a> </td> </tr> <tr> <td width="425px"> <img src="images/travel-for-credit.gif" width="425" height="34" alt="Travel for Credit \ Costa Rica \ England & France" /> </td> </tr> <tr> <td> <img src="images/book-now.gif" alt="Book now and save up to $500" width="148" height="150" /> </td> </tr> </tbody> </table> this is what it's producing: http://imageshack.us/photo/my-images...104at123t.png/ I'm trying to get the "book now and save" .gif to go up beside the EDGE logo. I'm a newbie at tables and am frustrated at this. When I "inspect element" the logo's <td> is saying the width is 445px when the width in the html is 425px. Hi im new here, and im going to start off with a table related question what I am trying to do is have table with a image in the back ground, this I can do fine, the other thing I want to have with in that first table is another table (5 x 16) For some reason when i try this it will work as two table one after the other when table one has a image but works fine when there is no image, does any one have any ideas as to why this is happening. or type the code our for me to see where im going wrong Thanks for looking, 09ricardo23 Hi html world, My name is Ken G (globalsolutions). I hope I am posting in the right place. I have an issue with one of my pages I created. Since I cannot put a link to the page, may I post the html code? The page looks almost alright. The page was screwed up so I took out the <td> and the <tr> tags, kinda straightened out allot of the mistakes. Now The header will not show up on the page. The page is an one time offer with 45 + products, so the page is quite long and it has 3 images that it uses for the frame border. I had to add 1 in more than once to extend the page. I have in put a background image graphic and the table is white, at the bottom I have sometimes more sometimes less black area on each side of the frame that I cannot get to go away. I tried for some time to fix this, and to no avail. I would like to learn how to fix this problem, so I can move on to new ones, lol I have allot more pages to build.Again I Hope I posted in the right area. Thanks in advance A table with 3 colunms in each 2 rows and only one column in the 3rd row, hw to write html scrip for this? I create html pages for my small business, and I am experiencing great frustrations. I am creating a calendar, and I have tried restricting the cell widths to specific px and % sizes and have tried the same in using style attributes, but nothing I try will prevent the cell from expanding with the text and distorting the calendar format. Is there a way to absolutely restrict the width of a column/cell in a table? I am trying to create a HTML table with 1 row and 2 columns. Each column contains an already made table. I want to be able to scroll both columns down together but only scroll the right one across. I have attempted to do this with the following code: <div style=' height:500px; width:screen.width; overflow-y:scroll; overflow-x:hidden'><table> <tr> <td>".$left_column_table."</td> <td > <div style=' width:screen.width-200px; height: 500px; overflow-x:scroll; overflow-y:hidden'>". $right_column_table."</div> </td> </tr> </table> </div> The problem with this code is that the horizontal scroll bar isn't visible if the vertical scroll bar is scrolled up. How do I make the horizontal scroll bar stay on top so that it is always visible? I have tables containing text in them but the background does not appear its just a white error background the text appears however. Heres my html i don't know whats wrong. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Pink Pirates</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- .style12 {font-family: Tahoma; color: #999999; font-weight: bold; } .style13 {font-size: 9px; color: #666666; } .style14 {color: #CCCCCC} --> </style> </head> <link href="css.css" rel="STYLESHEET" type="text/css"> <body> <center> <table width="776" border="0" cellpadding="0" cellspacing="0" background="images/index_28.jpg"> <!--DWLayoutTable--> <tr> <td width="59" rowspan="2" valign="top"><img src="images/sides_01.jpg" width="59" height="459"></td> <td height="363" colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="660" height="69" valign="top"><img src="images/index_02.jpg" width="230" height="69"><img src="images/index_03.jpg" width="201" height="69"><img src="images/index_04.jpg" width="229" height="69"></td> </tr> <tr> <td height="150" valign="top"><img src="images/index_06.jpg" width="371" height="171"><img src="images/index_07.jpg" width="289" height="171"></td> </tr> <tr> <td height="17" valign="top"><img src="images/index_08.jpg" width="660" height="17"></td> </tr> <tr> <td height="27" valign="top"><a href="index.php"><img src="images/index_09.jpg" alt="Home Page" width="104" height="27" border="0"></a><a href="team.php"><img src="images/index_10.jpg" alt="Our Team" width="101" height="27" border="0"></a><a href="videos.php"><img src="images/index_11.jpg" alt="Demo Videos and Screenshots" width="78" height="27" border="0"></a><a href="/forums/"><img src="images/index_12.jpg" alt="Community Message Boards" width="142" height="27" border="0"></a><a href="about.php"><img src="images/index_13.jpg" alt="About Our Clan" width="100" height="27" border="0"></a><a href="signup.php"><img src="images/index_14.jpg" alt="Join Our Team" width="135" height="27" border="0"></a></td> </tr> <tr> <td height="40" valign="top"><img src="images/index_15.jpg" width="660" height="40"></td> </tr> <tr> <td height="28" valign="top"><img src="images/index_16.jpg" width="660" height="28"></td> </tr> <tr> <td height="11" valign="top"><img src="images/index_17.jpg" width="660" height="11"></td> </tr> </table></td> <td width="57" rowspan="2" valign="top"><img src="images/sides_05.jpg" width="57" height="459"></td> </tr> <tr> <td width="231" height="163" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="231" height="122" valign="top"><img src="images/index_18.jpg" width="231" height="28"><img src="images/tdw_22.jpg" width="231" height="60" border="0"></a><img src="images/cathead_25.jpg" width="231" height="34"></td> </tr> <table> <tr> <td height="193" valign="top">text goes here blah</ </div></td> </tr> </table> </td> <td width="429" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="429" height="28" valign="top"><img src="images/index_19.jpg" width="429" height="28"></td> </tr> <tr> </tr> <tr> <td height="34" valign="top"><img src="images/catheadnews_26.jpg" width="429" height="34">dfdfdfdfdfdfd</td> </tr> <tr> <td height="193" valign="top"><div style="margin-left:10px; margin-right:10px"><span class="style12"></span><br> <span class="style13"></span><br> <span class="style14"> </tr> </table></td> </tr> </table> <table width="776" border="0" cellpadding="0" cellspacing="0" background="images/index_30.jpg"> <tr> <td width="136" height="32"></td> <td width="509"> </td> <td width="131"></td> </tr> <tr> <td height="12"></td> <td valign="top"><div align="center">Copyright PinkPirates.tk. All rights reserved. </div></td> <td></td> </tr> </table> </center> </body> </html> Ok guys, here is my problem. I want to start off first by saying I know tableless layouts are the way to go. With that said I inherited this site and only have to add some functionality. The problem is if you look at http://innonmainmanasquan.com/test/rates-302a.php in IE there is separations in the table, I have edited till I am blue in the face and have no Idea why it is doing this. FF displays it just fine. I have been trying to figure this out for the past 8 hours and still no dice. The code is below if someone could at least point me in the right direction that would be awsome. HTML Code: <html> <head> <title>Inn On Main Manasquan - A Unique Jersey Shore Bed And Breakfast</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> <!-- .style5 {color: #FFFFFF} --> </style> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <?php $page = "rooms"; $room = "302"; include('get.info.php'); ?> <div class="main"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr valign="top"> <td align="center"> <table id="Table_01" width="762" height="551" border="0" cellpadding="0" cellspacing="0"> <tr valign="top"> <td> <a href="index.php"><img src="images/Manasquan-Inn-Logo.gif" width="412" height="54" alt="home" border="0"></a></td> <td colspan="4" background="images/Jersey-Shore-Nav-Background.jpg" valign="middle"><div class="nav"><a href="location-north.php">Location</a> | <a href="accommodation.php">Rooms</a> | <a href="reservation.php">Reservations</a></div></td> </tr> <tr valign="top"> <td colspan="5"> <img src="images/Jersey-Bed-Breakfast-Establ.gif" width="762" height="25" alt=""></td> </tr> <tr valign="top"> <td width="762" height="259" colspan="5" valign="top"> <!-------------INSERTION HERE-------------> <table id="Table_02" border="0" cellpadding="0" cellspacing="0"> <tr valign="top"> <td> <img src="rooms/images/room_302-1_01.png" width="410" height="259" usemap="#Map" border="0"/> <map id="_Map" name="Map"> <area shape="rect" coords="281,210,307,235" href="rates-302a.php" alt="Image 1" title="Image 1" /> <area shape="rect" coords="312,209,336,236" href="rates-302b.php" alt="Image 2" title="Image 2" /> </map> </td> <td background="rooms/images/room_302-1_02.gif" width="352" height="259"> <div class="center7"> <p> <span class="style5"> <strong> Room 302 </strong> <br> </span> <?php echo stripslashes($returned['description']); ?> <br /> <b> <center> <?php echo stripslashes($returned['cost']); ?> </center> <br /> <center> <i> Click link for availability and best rates. </i> </center> <center> <a href="http://www.webervations.com/magic-scripts/resbook.asp?memberid=richjo" target="_blank"> <u> Check Availability </u> </a> </center> </b> </p> </div> <div class="center8"> <center> <strong> <u> Rooms </u> </strong> <br> <!--------------ROOM LINKS BELOW-------------> <a href="rates-201.php">201</a> - <a href="rates-202.php">202</a> - <a href="rates-203.php">203</a> - <a href="rates-204.php">204</a> - <a href="rates-205.php">205</a> - <a href="rates-206.php">206</a> <br> <a href="rates-207.php">207</a> - <a href="rates-301.php">301</a> - <a href="rates-302a.php">302</a> - <a href="rates-303.php">303</a> - <a href="rates-304.php">304</a> - <a href="rates-305.php">305</a> </center> </div> </td> </tr> </table> <!--INSERTION OVER------> </td> </tr> <tr valign="top"> <td colspan="5"> <img src="images/Jersey-Shore-Inn-Bottom.gif" width="762" height="25"></td> </tr> <tr valign="top"> <td colspan="2" background="images/Bottom-Left.gif" width="762" height="187" valign="top"><div class="bottom"> <div align="center"><img src="images/inn_facade.jpg" width="190" height="106" border="1"><br> <?php $query="SELECT * FROM bottomhome"; $result = mysql_query($query) or die(mysql_error()); $resultarray = mysql_fetch_assoc($result); echo stripslashes($resultarray['artist']); ?></div> </div></td> <td colspan="3" background="images/Bed-Breakfast-Manasquan.gif" width="289" height="187" valign="top"><div class="bottom"><img src="images/Inn-On-Main-Bed.jpg" width="130" height="106" hspace="10" vspace="5" align="left"><strong>Our Rooms </strong><br></span> <?php $query="SELECT * FROM bottomhome"; $result = mysql_query($query) or die(mysql_error()); $resultarray = mysql_fetch_assoc($result); echo stripslashes($resultarray['rooms']); ?><br> <a href="inn-packages.php">Click Here for More Info »</a></div></td> </tr> <tr valign="top"> <td> <img src="images/spacer.gif" width="412" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="61" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="34" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="136" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="119" height="1" alt=""></td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="5"> <tr valign="top"> <td align="center"><span class="style4">Inn On Main - 152 Main Street - Manasquan, NJ - (732) 528-0099 - </span><a href="mailto:info@innonmainmanasquan.com"><span class="style4">info@innonmainmanasquan.com</span></a><br> <br><a href="http://www.tripadvisor.com/"><img src="http://www.tripadvisor.com/img/triplogo162w.gif" border="0" alt="TripAdvisor.com"></a> <span class="bottom"><br> Read unbiased opinions about <a href="http://www.tripadvisor.com/">hotels</a> and <a href="http://www.tripadvisor.com/">vacations</a> at TripAdvisor.</span> <br> <img src='http://counter.dreamhost.com/cgi-bin/Count.cgi?df=jcnh74-countername.dat&pad=F&ft=0&dd=C&istrip=T'></td> </tr> </table></td> </tr> </table> </div> </body> </html> CSS Code: body { background-image: url(images/Inn-On-Main-Background.gif); font-family: "Times New Roman", Times, serif; font-size: 12px; overflow:hidden; } .main{ text-align: center; padding-top: 30px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-bottom: 5px; overflow:hidden; } .main a:link{ color:#CCCCCC; text-decoration: none;overflow:hidden; } .main a:hover{ color: #999999; text-decoration: underline;overflow:hidden; } .main a:visited{ color:#CCCCCC; text-decoration: none;overflow:hidden; } .center{ color: #FFFFFF; padding: 0px; margin-top:10px; margin-left: 430px; font-size: 12px;overflow:hidden; } .packpic{ padding-top: 0px; padding-right: 0px; padding-bottom: 30px; padding-left: 0px; overflow:hidden; } .center2{ color: #FFFFFF; padding: 5px 20px 20px; margin-left: 480px; vertical-align: top; text-align: center; font-size: 12px; overflow:hidden; } .center3{ color: #FFFFFF; padding: 20px; margin-left: 480px; vertical-align: top; text-align: center; font-size: 12px; overflow:hidden; } .center4{ color: #FFFFFF; padding: 0px 20px; margin-left: 480px; vertical-align: top; text-align: center; font-size: 12px; overflow:hidden; } .center7{ color: #FFFFFF; padding: 0px; margin-left:10px; font-size: 12px; overflow:hidden; } .center8{ color: #FFFFFF; padding: 0px; margin-left: 100px; font-size: 12px; overflow:hidden; } .center6{ color: #FFFFFF; padding: -9px 20px -5px; margin-left: 480px; vertical-align: top; text-align: center; font-size: 12px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; overflow:hidden; } .nav{ color: #FFFFFF; text-align: center; padding: 5px; overflow:hidden; } .bottom { color: #082156; padding: 8px; font-size: 12px; overflow:hidden; } .bottom a:link{ color:#666666; text-decoration: none; overflow:hidden; } .bottom a:hover{ color:#666666; text-decoration: none; overflow:hidden; } .bottom a:visited{ color:#666666; text-decoration: none; overflow:hidden; } .style2 { font-size: 16px; font-weight: bold; overflow:hidden; } .style3 { font-size: 14px; font-weight: bold; overflow:hidden; } .style4 {color: #003366}.rates { color: #FFFFFF; padding: 80px 0px 0px; background-color: #666666; overflow:hidden; } .bg01 { background-image: url(images/innonmain_country.jpg); background-repeat: no-repeat; overflow:hidden; } .tbl{ width:762px; overflow:hidden; } Any help would be very much appreciated!!!!! Thanks All! can the anchor tag be used in HTML tables, such that if an <a> tag is used in one cell of the table, then its target is another cell of the same table. very much like frames, but can it be done using tables. if so, how? Hello, i was wondering if it is possible to send emails with html tables in them. I have attached an image of the type of table i would like to create. thanks Hey all, I am not even sure if this is possible, but I have wasted most of today trying to find out. Anyways, I am trying to create a very basic webpage (for local use) that will allow me to add records to a table that I can then come back to at a later date. Essentially, I want a mini spreadsheet in a HTML file. Is this possible? I know that I could do this using PHP, but I just want this for local use, so I do not want / need to upload it anywhere. Plus, I am not linking to any database, I am hoping just to have the table saved into the HTML file. I currently have a JS script that will add rows to my table (with predetermined information - not 100% what I am wanting), but once I close the window, that information is not saved. If anyone could at least point me in the right direction, that would be good (hopefully this all makes sense ) Hi, not very good at HTML. Need help. Currently have laid out my site design all within a table. Inside that table there are two tables on the top side by side out of which one is aligned to the right. Below these two tables I have other tables all aligned to the left. PROBLEM The top table aligned to the right, it is 160 width pixels by 900 pixels length. I want to keep the other tables below it exactly where they are but as this table grows in length, the other tables keeps getting pushed down. Hope I am clear. Pls help. Am willing to post my html layout if need to. Tnks. |