|
HTML - Space Between Rows Of A 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.
Similar TutorialsCan anyone tell me why there is a space at the bottom of my page between the images in the middle and the bottom image? The page looks fine in Firefox and I cannot figure out why there is a space in IE7. Any suggestions would be greatly appreciated. Thanks Frank http://www.spartafitness.com/home.htm OK, so I have a dynamic table that can be filtered. The full table has just over 250 rows. My problem is that even by setting their display property to 'none', it still causes the rows to take up what seems to be a pixel of space. So, if several consecutive rows are hidden, it causes noticeable white space to appear and it can make it look really bad. In some cases over 100 consecutive rows are hidden and it causes a very large blank space to show. Oddly, I ran into this problem only when working in Firefox. It performs fine in IE. Here are some captures. Take note the number in the SEQ column shows what row it is: Before being filtered: After being filtered in IE: After being filtered in Firefox: I can't find anywhere else online where anyone has even had this particular problem. Can anyone help? I'm stumped. One possible solution I thought of was absolutely positioning all of the display:none rows on top of each other but I didn't know if that could work or not. Huge thanks to anyone who has a solution. I can post the JavaScript for the filtering if anyone thinks it may help. 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! 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. 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. 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! Ok, so I have a table, with multiple pics in it. One under the other... the issue is in firefox there is a space between the columns of each table.... but its fine in Internet Explorer. Check my code: Code: <!DOCTYPE HTML PUBLIC "-//w3c/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style> </style> </head> <body> <body style="background-image: url(background.jpg); background-repeat: repeat-y; background-color: black; background-position: center"> <div align="center" id=background> <table id=titletable width="768" border="0" cellpadding="0" cellspacing="0"> <tr cellpadding="0" cellspacing="0"> <td><img src="images/title1.jpg"/></td><td><img src="images/title2.jpg"/></td><td><img src="images/title3.jpg"/></td><td><img src="images/title4.jpg"/></td><td><img src="images/title5.jpg"/></td> <td><img src="images/title6.jpg"/></td><td><img src="images/title7.jpg"/></td><td><img src="images/title8.jpg"/></td> </tr> <tr> <td colspan="8"><img src="images/banner.jpg"/></td> </tr> </table> </div> Ok, I am creating a calculator with html and javascript. I am using a table to format the buttons and text displays. The code is posted below with the table itself. It is supposed to be 3 cells height and 1 cell width but it turns out as 2 cells width and 2 cells height. I can't figure out the error in my code so can someone please figure out what is wrong with my tags: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type=text/css>
input
{
background-color: black;
color: white;
}
th
{
background-color: black;
color: white;
}
td
{
background-color: green;
}
</style>
<script type="text/javascript">
var a;
var b;
var c;
var d;
var e;
function inputtext(inputtext)
{
a=document.getElementById("inputcalculation").value;
b=inputtext;
c=a+b;
document.getElementById("inputcalculation").value=c;
}
function Evaluate()
{
d=document.getElementById("inputcalculation").value;
e=eval(d);
document.getElementById("outputcalculation").value=e;
document.getElementById("inputcalculation").value="";
}
</script>
<title>Help-In-Math Calculator</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="11" style="background-color: black">
<center>
<input type="text" id="inputcalculation" value="" />
</center>
</th>
</tr>
<tr>
<td colspan="11" rowspan="5">
<center>
<input type="button" value="1" onclick="inputtext('1')" /> <input type="button" value="2" onclick="inputtext('2')" /> <input type="button" value="3" onclick="inputtext('3')" /> <input type="button" value="+" onclick="inputtext('+')" />
<br />
<input type="button" value="4" onclick="inputtext('4')" /> <input type="button" value="5" onclick="inputtext('5')" /> <input type="button" value="6" onclick="inputtext('6')" /> <input type="button" value="-" onclick="inputtext('-')" />
<br />
<input type="button" value="7" onclick="inputtext('7')" /> <input type="button" value="8" onclick="inputtext('8')" /> <input type="button" value="9" onclick="inputtext('9')" /> <input type="button" value="X" onclick="inputtext('*')" />
<br />
<input type="button" value="0" onclick="inputtext('0')" /> <input type="button" value="." onclick="inputtext('.')" /> <input type="button" value="00" onclick="inputtext('00')" /> <input type="button" value=÷ onclick="inputtext('/')" />
<br />
<input type="button" value="EVALUATE" onclick="Evaluate()" style="background-color: blue"/>
</center>
</td>
</tr>
<tr>
<td colspan=11>
<input type="text" id="outputcalculation" onfocus="blur()" />
</td>
</tr>
</table>
</body>
</html>
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> I have an image above a table and I want the image to be physically touching the table border, however there are about 5 pixels of white space above the table. I can't figure out how to remove them. Here's the code. Any help would be greatly appreciated. <img src=logo.jpg> <table border=1 bordercolor="#3C5581" cellspacing=0 cellpadding=0 width=740> Hello, I made a goofy little website at adamvonwillis.com and if you look at the home page you will see a gap between the first and second rows. The rows need to be touching. If anyone could look at the code and help me out I would be very greatful! Thank you! Hey; I'm trying to build this menu in a table. Each row has an image, which I'm using for a rollover. Altogether, the table should be 202 x 285 pix. The problem is, 5 pixels of blank space are being added under every image, (in the same row as the image), and I'm not sure why. Altogether, it's making my table 45 pix too large. Any help would be appreciated. HTML: <div id="menu"> <table border="0" cellpadding="0" cellspacing="0"> <tr><td ><img alt="Home" src="images/regHome.jpeg" /></td></tr> <tr><td><img alt="Program Information" src="images/regInformation.jpeg" id="Image2" onmouseover="MM_swapImage('Image2','','images/rollOverInformation.jpeg',1)" onmouseout="MM_swapImgRestore()" /></td></tr> ...etc</table></div> CSS: #menu { margin: 0 auto; text-align: left; color: #000000; font-family:Arial; position:relative; float:left; font-size: 18px; top:144px; !top:140px; height:271px; !height:100px; _height:100px; width:202px; !width:10px; _width:10px; float:left; background-color:#00FF00; } Hi Can anyone solve this problem. Here is my 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Hide/Show Test!</title> <style> .myclass1 { background-color:#CCCCCC; display:block; } .myclass2 { display:none; } </style> </head> <body> <script> function hideNshow(){ var e1=document.getElementById('A1C1_1'); if(e1.className=="myclass1") { e1.className="myclass2"; } else { e1.className="myclass1"; } e1=document.getElementById('A1C1_2'); if(e1.className=="myclass1") { e1.className="myclass2"; } else { e1.className="myclass1"; } } </script> <!-- <input type="button" name="myBtn" value="Click Me!" onclick=" hideNshow();"/>--> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td><a href="#" onclick=" hideNshow();">Row1/Cell1</a></td> <td >Row1/Cell2</td> <td>Row1/Cell3</td> </tr> <tr id="A1C1_1" class="myclass2"> <td>Row2/Cell1</td> <td>Row2/Cell2</td> <td>Row2/Cell3</td> </tr> <tr id="A1C1_2" class="myclass2"> <td>Row2/Cell1</td> <td>Row2/Cell2</td> <td>Row2/Cell3</td> </tr> <tr> <td>Row3/Cell1</td> <td>Row3/Cell2</td> <td>Row3/Cell3</td> </tr> <tr> <td>Row4/Cell1</td> <td>Row4/Cell2</td> <td>Row4/Cell3</td> </tr> <tr> <td>Row5/Cell1</td> <td>Row5/Cell2</td> <td>Row5/Cell3</td> </tr> </table> </body> </html> It is working fine in IE. When I click the link It displays the hidden rows and hides when I click the link agian. But in Firefox it is giving error. It is adding empty rows. How to prevent that. Thanks in advance. Hi, I'm having a basic problem with a HTML table. It displays exactly how I want on Firefox 3.5.15 but on Internet Explorer 8 is does not. Can anyone point out what I need to do to get this table displaying in IE as it does in Firefox? Below is my HTML table and I suspect IE 8 is ignoring 'rules = rows'; <?php echo '<TABLE bordercolor=#000000 cellspacing=0 cellpadding=10 border=0 rules=rows frame=box width="90%">'."\n"; echo '<tr>'; echo '<td><B><font size=1>Test Name</font></B></td><td><B><font size=1>Date</font></B></td><td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 1</font></td><td><font size=1>01/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 2</font></td><td><font size=1>02/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 3</font></td><td><font size=1>03/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 4</font></td><td><font size=1>04/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 5</font></td><td><font size=1>05/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '</TABLE>'."\n"."\n"; ?> Thanks! Hi, Is there any way such that i can use ordered list to number the rows of a table?? Nikhil For some reason, I have a lot of extra space at the top of my page. What could be causing this and how do I fix it? Hi folks, I'm an amateur webpage designer. I've recently set up a page and am trying to see if there's a solution to something I've noticed when I view my page. In Internet Explorer and icab, it shows the way I would like, but in Safari and Firefox, I see a problem. My webpage is: http://www.worldwideaccessiblewashrooms.com At the top, I have the webpage title in a table. In Safari and Firefox, there is more space on the bottom of the text inside the table than on the top. I used a straightforward table html: <center> <table bgcolor="#f2e891" border="0" style="border: 3px solid black;"> <tr> <td><h2>Worldwide Wheelchair Accessible Washrooms</h2></td> </tr> </table> </center> Is there a way I can change this so that there is equal space above and below the text inside the table box? Thanks![/url] Hi. The following example code displays the way I want it to in Firefox, with the top row about one pixel deep. But in IE 7 and MS email viewers (outlook, outlook express) it doesn't, with the top row being maybe 15 px deep. I've tried coding it all kinds of ways but I can't get the same effect as in Firefox. Does anyone know how to get round this? (The reaso for using inline style and tables is that it's for a subscriber-only email newsletter. and that's what works.) Would be grateful for any suggestions ! Thanks Dedge ******************************** Code: <TABLE width="520" cellSpacing=0 cellPadding=0 border=1> <tr><!--Row to set column widths--> <td valign="middle" align="center"> <IMG src="spacer.gif" width="1" height="1" alt=""> </td> <td valign="middle" align="center"> <img src="spacer.gif" width="256" height="1" alt=""> </td> <td valign="middle" align="center"> <IMG src="spacer.gif" width="8" height="1" alt=""> </td> <td valign="middle" align="center"> <IMG src="spacer.gif" width="255" height="1" alt=""> </td> </tr> <tr> <td><IMG src="spacer.gif" width="1" height="30" alt=""></td> <td style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 13px; LINE-HEIGHT: 15px; PADDING-BOTTOM: 3px; MARGIN: 4px 0px; VERTICAL-ALIGN: middle; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #000066; TEXT-ALIGN: center">Left-Hand Heading</td> <td><IMG src="spacer.gif" width="1" height="1" alt=""></td> <td style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 13px; LINE-HEIGHT: 15px; PADDING-BOTTOM: 3px; MARGIN: 4px 0px; VERTICAL-ALIGN: middle; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #000066; TEXT-ALIGN: center">Right-Hand Heading</td> </tr> </TABLE> I am hoping someone with "fresh" eyes will be able to spot why I have a 1 pixel space pushing the bottom of my table down. It's a project I inherited, so it's not my code, but it should be obvious to me as to why it's not formatting correctly (but for the life of me, I cant see it). Anyone? Top part of code (if it's of any use): Code: <table border="0" cellpadding="0" cellspacing="0" bordercolor="0">
<tr>
<td width="453" valign="top" background="images/homeBackground.jpg" class="BackNoRepeat"> </td>
<td width="742" align="right" valign="top"><table width="742" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="300" align="left" valign="top"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><img src="images/topLogo.jpg" width="300" height="128" /></td>
</tr>
<tr>
<td align="left" valign="top"><img src="images/imgOpening.jpg" width="163" height="124" /></td>
<td align="right" valign="top"><img src="images/rolloverMenu1.jpg" width="137" height="20" /><br />
<a href="recipes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/homeRecipesBTN_ov.jpg',1)"><img src="images/homeRecipesBTN.jpg" alt="Recipes" name="Image15" width="137" height="28" border="0" id="Image15" /></a><br />
<a href="nutrition.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/homeNutritionBTN_ov.jpg',1)"><img src="images/homeNutritionBTN.jpg" alt="Nutrition" name="Image16" width="137" height="25" border="0" id="Image16" /></a><br />
<a href="webstore.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','images/homeWebstore_ov.jpg',1)"><img src="images/homeWebstore.jpg" alt="Web Store" name="Image17" width="137" height="36" border="0" id="Image17" /></a><br />
<img src="images/home3.jpg" width="137" height="15" /></td>
</tr>
</table></td>
<td width="442" background="images/mainBackground-right.jpg"><table width="441" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="441" align="left" valign="top"><img src="images/topRight.jpg" width="442" height="71" /></td>
</tr>
<tr>
<td><table width="442" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="235"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0','width','235','height','135','id','opening animation','align','','src','images/home','quality','high','bgcolor','#FFFFFF','name','opening animation','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','images/home' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="235" height="135" id="opening animation" align="">
<param name="movie" value="images/home.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="images/home.swf" quality="high" bgcolor="#FFFFFF" width="235" height="135" name="opening animation" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>
</noscript></td>
<td width="207" rowspan="2"><img src="images/main-top-right1.jpg" width="207" height="181" /></td>
</tr>
<tr>
<td height="47"><img src="images/main-top-right2.jpg" width="235" height="46" /></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
this is where the space happens...and then the following code: Code: <tr>
<td colspan="2"><img src="images/home5.jpg" width="742" height="69"></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"><table width="742" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="224" align="left" valign="top"><img src="images/home6.jpg" width="224" height="57" /></td>
<td width="251"><form action="" method="post" >
<table width="93%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="29%" align="right">Username:</td>
<td width="34%"><input name="textfield" type="text" size="15" style="font-size:.75em"/></td>
<td width="37%" rowspan="2"><input type="image" name="imageField" src="images/loginBTN.gif" /></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input name="textfield2" type="password" size="15" style="font-size:.75em"" /></td>
</tr>
</table>
</form></td>
<td width="267" align="right" valign="top"><img src="images/home7.jpg" width="267" height="57" /></td>
</tr>
</table></td>
</tr>
</table>
<div id="greenLineBack"></div>
<div id="footer">© Copyright 2007. All Rights Reserved.<img src="clear.gif" width="50" height="1"/><a href="#">RECIPES</a> | <a href="#">NUTRITION</a> | <a href="#">WEBSTORE </a></div></td>
<td width="454" valign="top" background="images/mainBackground-right.jpg" class="BackNoRepeat2"> </td>
</tr>
</table>
On every other page, my table around my content works, but on the main page: http://www.snowwhitedesign.com there is a lot of white space below my image. My entire image is broken down into 3 x 3 images, 9 total in the grid. All images have different heights and widths I constructed the table by first creating the larger table with the blue border, and then created separate vertical tables within each vertical <td> since the images are of different heights. Also, how can I get rid of that small border line running right through the middle of my image? thanks! |
|||||||