|
HTML - Aligning Rows With A Nested Table
Hi. I'm working on a fairly complicated web form and need to align input boxes horizontally across a lefthand column, a multi-row nested table, and a righthand column. This works OK (as long as cellpad and cellspace are set to 0) except that at one point I need to put text in the right-hand column instead of an input box, and this throws the alignment out. The simplified code below shows what I mean. As given below the boxes are aligned properly. But if you comment out the version A row and substitute the version B row, the alignment goes.
Can anyone explain why this happens, and whether there's a way round it ? The form in question does have to be a table, by the way. Would be grateful for any suggestions ! Thanks Dedge <form> <table width='100%' cellspacing='0' cellpadding='0' border='0'> <tr> <td>Item name</td> <td rowspan='5'> <table cellspacing='0' cellpadding='0' border='0'> <tr> <td><input name='i1' id='i1' size='1' maxlength='1'></td> <td><input name='i2' id='i2' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i3' id='i3' size='1' maxlength='1'></td> <td><input name='i4' id='i4' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i5' id='i5' size='1' maxlength='1'></td> <td><input name='i6' id='i6' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i7' id='i7' size='1' maxlength='1'></td> <td><input name='i8' id='i8' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i7' id='i7' size='1' maxlength='1'></td> <td><input name='i8' id='i8' size='1' maxlength='1'></td> </tr> </table> </td> <td>Item name</td> <td><input name='ia' id='ia' size='1' maxlength='1'></td> </tr> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ib' id='ib' size='1' maxlength='1'></td> </tr> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ic' id='ic' size='1' maxlength='1'></td> </tr> <!--VERSION A--> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ic' id='ic' size='1' maxlength='1'></td> </tr> <!--END OF VERSION A--> <!--VERSION B--> <!--<tr> <td>Item name</td> <td colspan='2' align='right'>SOME TEXT</td> </tr>--> <!--END OF VERSION B--> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ie' id='ie' size='1' maxlength='1'></td> </tr> </table> </form> Similar TutorialsI am trying to get three colums of work, picture on the left, text middle, pictures on the right. should I be working with nested tables? attached a pix to show what I mean, Hello, I've been looking at this problem for a few hours now and can't see what i'm doing wrong. I just want to nest 2 tables inside 1 row of another table. Problem can be seen and you can view source at http://www.lakesdt.com/testindex.html Can anyone tell me where i've gone wrong? I'm using Notepad++ so that can confirm all my <tr> and <td>'s seem to match up. Any help much appreciated! Also open to suggestions for a better way to implement this, and also as each link on the left will load a page in the right is there a neater way to do this without reloading the whole page again? Best regards, Matt I've been working in Flash for too long now or something, a little bit rusty with HTML. This recent website I've been working on for a friends restaurant is giving me some trouble. Im working without dreamweaver or imageready or anything like that, just code. And for some reason I cant get the table to fully line up. I know its probably going to end up being such a minor detail that Im missing, but ive spent a while now with no luck. Hoping someone can view this code and tell me what im not seeing: Http://www.lindesignz.com/mazzeh (p.s. I know I broke it up more than it needs to be. its for future graphic edits.) Hi all, im sure this is an easy one for alot of you in here but here goes.... Ive got a table which is say 40 pxls high, ive split it into 2 columns and on the left I have text links and on the right im trying to put an H1 tag. Anyway when I convert my text into an H1 tag its like its been top aligned in the table and obviously I want it to sit vertically in the centre. Ive tried changing alignment options in dreamweaver with no effect. The text links in the left hand column display normally also. Thanks! Gah, I've been sitting here trying to do this for hours and my head is utterly boggled! This is the kind of thing I want, I've tried aligning the text within the table to the bottom and then wrapping it around the image but obviously I'm just a huge, epic failure. Eck. (I don't know if you can catch the longshore-drift of my beautiful art--oh, how I kid you --but the black box represents an image and the lines are text!) Any help would be much appreciated! Thanks lovelies. Hi, I'm new to HTML. I have not yet started using CSS. I'm just using basic html. I'm having problem creating a nested table as shown in the attachment without using CSS style sheets. I appreciate anyone's suggestions in this. I pasted the code that tried below. <h3> 5) - Nested Table </h3> <table align="left" width="350" bgcolor="#ffff00" border="1"> <tr height="75" align="left"> <td height="100" > </td> <td height="75"> test2 </td> <td height="75"> </td> </tr> <clear="left" /> <tr> <td> <table align="left" bgcolor="f5f5dc" border="1"> <tr> <td width="100%" height="75"> a nested table </td> <td width="100%" height="75"> With this text at the top </td> </tr> <tr> <td width="100%" height="75"> </td> <td width="100%" height="75"> </td> </tr> </table> </td> </tr> <tr height="75" align="left"> <td></td> <td></td> <td></td> </tr> </table> Thanks in advance Hi guys & girls, I've got a table nested within a table row. There's a small gap I can't close at the top of the table (see image, attached). Within the table I have cell padding, but it's much more dramatic than I want at the top and bottom. Is there any way to fix these problems with HTML and inline CSS (it's going to be an HTML e-mail). This is for a client and due tomorrow, so any help would be awesome. Thank you. HTML Code: <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="line-height:16px;">
<table width="600" border="0" bordercolor="#000000" cellspacing="0" cellpadding="0" style="border-top:1px solid #000000; border-left:1px solid #000000; border-right:1px solid #000000; border-bottom:1px solid #000000;">
<tr>
<td><img src="images/ACP9040057_email_ClinicalPsychologist_01.jpg" width="600" height="88" alt="For What Matters Most"></td>
</tr>
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0" style="padding:0; border:0">
<tr>
<td align="center" valign="top"><table width="570" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="359" align="left" valign="top"><p><font face="Arial, Helvetica, sans-serif" style="font-size:12px; text-align:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue porta tincidunt. Nullam et turpis lorem, sagittis adipiscing nunc. In orci orci, iaculis et sollicitudin ac, adipiscing vel magna. Nullam et orci in dui tristique ultricies. Donec ligula turpis, blandit eget egestas sed, semper eu elit. Nulla in dolor sapien. Suspendisse id nisi porttitor purus ullamcorper dictum. Mauris posuere libero massa.</font></p></td>
<td width="171" align="center" valign="middle"><table width="140" border="0" cellspacing="0" cellpadding="15">
<tr>
<td align="left" bgcolor="#b1c1c9"><font face="Arial, Helvetica, sans-serif" style="font-size:12px; font-weight:bold; line-height:16px; text-align:left;">Qualifications:</font><br />
<font face="Arial, Helvetica, sans-serif" style="font-size:12px; font-weight:normal; text-align:left;">To qualify you must be a U.S. citizen age 18–39 and enrolled in the United States or Puerto Rico.</font></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><font face="Arial, Helvetica, sans-serif" style="font-size:12px; font-weight:normal; text-align:left;">Give yourself the opportunity to concentrate on your education instead of the worries of accumulating debt. <a href="#">Click here</a> now to find out more.</font></td>
<td align="center" valign="top"><a href="#"><img src="images/go_button.jpg" width="171" height="60" alt="Go Button" border="0"></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr><td><img src="images/ACP9040057_email_ClinicalPsychologist_05.jpg" width="600" height="9" alt=""></td></tr>
<tr><td align="center" valign="top" style="padding:0;"><table width="570" border="0" vspace="0" align="center" cellpadding="10" cellspacing="0" style="line-height:10px; text-align:left; display:block; border-collapse: collapse;">
<tr><td align="left" valign="top"><p><font face="Arial, Helvetica, sans-serif" style="font-size:10px; line-height:10px; text-align:left;">If you no longer wish to receive email communication from the U.S. Air Force, please click <a href="#" target="_blank">here</a>.
<font face="Arial, Helvetica, sans-serif" style="font-size:10px; line-height:10px; text-align:left;">Your address will be removed from this email list.</font><br /><br />
Or send a request to:<br />
ddd<br />
ddd<br />
ddd</font></p></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
HI Every Body, Can you please help to resolve this issue. I am trying to create nested tables using the following code but no luck . In IE 7.0.6 the Nested tables are getting displayed as two seperate table. <HTML> <Head> <Title> MY First Application </Title> </Head> <Body> <Table border=1 Height=750 width=540 BORDERCOLOR=Red > <Tr> <Td> This is my first row/column </Td> </Tr> <Tr> <Table border=1 Height=130 Width=540 > <Tr> <Td> This is my firstcolumn in nested table</Td> <Td>This is my second column in nested table</Td> </Tr> </Table </Tr> </Table> </Body> </HTML> PLease let me know the solution Thanks in advance. Regards, Eswar I created a layout in Photoshop CS3 and used the slice tool, which generated a table for me based on the slices. The problem is, I need the table to be aligned at the very top of the page without a space, without having to set the table height to 100%. Is there a way this can be done? Hi this is my first post. I am frustrated with how the bulleted "inspection" list is not aligned to the top. This is the code I'm working with: Code: <div id="table"> <table> <tr> <td><h4>Auto Repairs</h4> </td> <td><h4>Maintenance</h4></td> <td><h4>Inspections</h4></td> </tr> <tr> <!--Auto Repairs--> <td> <ul> <li><strong>Brake Repair & Brake Pads</strong></li> <li>Custom Exhaust</li> <li>Check Engine</li> <li>Battery</li> <li>Alternators</li> <li>Starters</li> <li>Timing Belt</li> <li>Waterpump</li> </ul> </td> <!--Maintenance--> <td> <ul> <li>30, 60, 90k-mile Service</li> <li>Oil Changes</li> <li>Tune Ups</li> <li>Transmission Service</li> <li>Power Steering Flush</li> <li>Antifreeze/Coolant Service</li> <li>Brake Fluid Flush</li> </ul> </td> <!--Inspections--> <td> <ul> <li>Free 30-Point Inspection</li> <li>MD State Inspections</li> <li>Emissions</li> <li>Diagnostics</li> </ul> </td> </tr> </table> Thanks for helping me. Hi, I'm needing to align an html table with x and y values. However, I've never done this before, where do I need to put the values in the code? Thank you! I am trying to get this table to align properly but to no avail so far. Also, I'd like to be able to put a form in the middle of the pictures. Here is the code for the section I am referring to: Code: <table border="10"><tr><td><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"></td><br></tr><tr> <td align="left"><img src="bal.gif"><img src="bal.gif"></td> <td align="right"><img src="bal.gif"><img src="bal.gif"></td></tr><br><tr> <td align="left"><img src="bal.gif"><img src="bal.gif"></td> <td align="right"><img src="bal.gif"><img src="bal.gif"></td></tr><br><tr> <td align="left"><img src="bal.gif"><img src="bal.gif"></td> <td align="right"><img src="bal.gif"><img src="bal.gif"></td></tr><br><tr> <td><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"></td></tr> </table> Im hoping someone can help me out on this one im just getting back into coding so im a little rusty but i am somewhat stumped by this issue i have a table that the text refuses to align to top middle unless its divided up into a new cell. The best it will do is align middle left of the cell but refuses to go to the top. The site that it is on with the issue is www.gamersjoy.com the table in question is the center table with updates, as you can see everything is pushed halfway down and aligned to the left Any help would be greatly appreciated as it is slowing me down from finishing my project thanks in advance Tcanuth Hi, I am new to web design and am trying to design company website without using a site builder. I have built up my container with 3 boxes inside. In the largest I want text on the right and a 1 column 2 row table on the right - to be adjacent to each other but I can't get it to work. I don't want the text to wrap around the table. Please help. hey, simple question here i just cant get it to work though. i want to align some text to the bottom and to the right of a table <table width="100%" cellspacing="0" border="0" cellpadding="18" height="75%"> <tr> <td bgcolor="000000" width="10%"> <img src="graphics/spacer.gif" width="100" height="1"> </td> <td bgcolor="ffffff" width="90%" valign="top"> <h2>Welcome to the Darwin Soccer Clubs Official Website</h2> <hr color="black"> <p>Here we strive to bring you all the latest news from the club by keeping you updated on the results from all our games throught out the season, the roster so you will never forget when your teams, where your teams playing and who there playing. <br><br> Also check out the new <a href="p4potw.html">Player of the week</a> page to see if you have made it to number one!</p> <p align="right" valign="bottom"> THIS IS THE PART I CANT GET TO WORK</p> </td> </tr> i dont no why.. and try not to think about the other writing in the table this is for my studies i am doing. cheers </table> I am working on a layout for a website, I'm not new at all to HTML, it's just been a while. I have a banner taking up the first row of the table(colspan=2), and for the 2nd row, I have a menu and a text region. This 2nd row always has a small space between it and the 1st, even if cellspacing=0. Is there any way to do this with a simple <table>??? Someone told me that using a table would be less effective than using <div>, is this true? If so, how would I do this using <div>. Thank you for any suggestions. Hi there, I'm a bit of a noob to HTML, and I'm working on creating a site for my webcomic. The main portion of the layout has a simple table with a header and footer at the top and bottom rows. It's supposed to look like Instead it looks like The code for the table is this: Quote: <table align="center" cellpadding="0" cellspacing="0" border="0" width="725"> <tr> <td width="725" valign="bottom" border="0"> <img src="/images/header.png" width="725" height="33" /></td> </tr> <tr> <td width="725" bgcolor="0099CC" align="center"> <p>***todays_comics***<p>***first_day*** ***previous_day*** ***next_day*** ***last_day*** </td> <tr> <td width="725" valign="top" border="0"> <img src="/images/footer.png" width="725" height="33" /></td> </tr> </table> Whenever I put the code into an HTML test bed, it works fine, but for some reason refuses to work when I upload it to my FTP. It's driving me crazy. If you could help, I'd really appreciate it. Thanks. Hi All, Am a bit of a newbie here. I'm having a little problem with a table that I created on Wordpress. After creating the table, the image below shows how it looks like on the Wordpress editor: But, once published, the row alignment is a bit off. Here's the url: http://runfest.my/?page_id=346 Appreciate some advice on what went wrong and how I can fix it. Thanks a bunch! Afternoon everyone, I have a table with many rows and a checkbox in the first cell of each row. I want the user to be able to click anywhere on the row and activate the checkbox, so I'm using a label tag in front of each row. The following code works in IE7, but not Firefox or Chrome. Any ideas how to make it work cross-browser? Code: <table>
<label for="X">
<tr>
<td>
<input type="checkbox" id="X"/>
</td>
<td>
THIS TEXT SHOULD ACTIVATE THE LEFT CHECKBOX
</td>
</tr>
</label>
</table>
Thanks! I am working on an application within a website. Most of the HTML for the entire site, I did not create myself, just some HTML and CSS for a specific application. Even in that application, I imported some of the text (which contains HTML tags) from a previous application. So, I only did a small portion of the HTML/CSS. My problem is that when users print out this page in IE6, some of the rows of the main table are missing from the printout. For example, this page: http://www.northcarolina.edu/pe_test/sample_pe.php Does any one have any knowledge of a bug that would cause IE6 not to print some rows? Does any one see any reasons why some rows in the tables (the ones with class='workplan') would skip rows when printing? Thank You. |
|||||||