|
HTML - Table Colspan Issue
This might be a very simple problem to fix but I am struggling to find a solution.
Basically this is the code for my table: HTML Code: <table cellpadding="0px" border="0px" > <tr><td rowspan="6" width="290px" height="375px"><img width="286px" height="371px" src="test.png"></td> <tr><th>Title</th></tr> <td colspan="2" width="450px">Content 1 <td width="75px"><img width="75px" height="75px" src="test.png"> </td></tr> <td width="75px"><img width="75px" height="75px" src="test.png"> <td colspan="2" align="right" width="450px">Content 2 </td></tr> <td colspan="2" width="450px">Content 3 <td colspan="2" width="75px"><img width="75px" height="75px" src="test.png"> </td></tr> <td width="75px"><img width="75px" height="75px" src="test.png"> <td align="right" width="450px">Content 4 </td></tr> </table> Basically the problem I have, is I want the 'content 4' box to be the same as the 'content 2' box (Stretched to the full width of the table.). Does anyone know what I'm doing wrong, I'm sure it's really obvious. Any help will be greatly appreciated. Similar TutorialsHi, 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 Hope someone can help with this. I think I have a colspan problem, though I'm not entirely sure. Here's what is happening -> websiteproblem.jpg Here's the code for what is happening -> websiteproblemhtml.jpg And would anyone know why I am not able to post text over my background image (images/OHDGwebsitebanner7_06.jpg)?? Would this be easier to do in Macromedia Dreamweaver? Thanks for all of your help! Please help, I have taken my website from fireworks and exported it to Dreamweaver. In my editable html text area I can't change the H1 to a h2 tag with out the entire table changing due to colspan and rowspan automaticly being added by either fireworks or by dreamweaver. If I delete the colspan code the table collapes??? The tutorial I am following allows the instructor to change on his with ease. Firworks cs3 and dream cs3 Thanks you in advance. Yes im a begginner...lol Ok i have this pretty much setup they way I want it but the text
Quote: Please enter the hours your establishment is open for business. is all bunched up. How do I have that text all show on a single line but keep my boxes and eveything else where it is? Here is a pic so you can see what im talking about... Here is my page. It is ok in IE. I want exactly as in IE. But in Firefox it is displaying the columns differently. In 2nd row the col2 (Actually 2 and 3 colspan) starting from 3rd column where it shud start from 2nd col (As in IE). (I cannt use fixed width). How to fix this. <!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>Untitled Document</title> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" bgcolor="#999999"> cols 12</td> <td width="7%" bgcolor="#CCCCCC">col 3</td> <td width="10%">col 4</td> <td width="8%">col 5</td> <td width="8%">6</td> <td width="6%">7</td> <td width="6%">8</td> <td width="6%">9</td> <td width="6%">10</td> <td width="6%">11</td> <td width="7%">12</td> <td width="6%">13</td> <td width="8%">14</td> </tr> <tr> <td width="4%" bgcolor="#996666">col 1</td> <td colspan="2" bgcolor="#99CCFF">cols 23</td> <td>col 4</td> <td>col 5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td colspan="2" bgcolor="#999999">cols 12</td> <td bgcolor="#CCCCCC">col 3</td> <td>col 4</td> <td>col 5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td colspan="2" bgcolor="#999999">cols 12</td> <td bgcolor="#CCCCCC">col 3</td> <td>col 4</td> <td>col 5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td bgcolor="#996666" width="4%" >col1</td> <td colspan="13" bgcolor="#FFCCCC">cols 234567891011121314</td> </tr> </table> </body> </html> If I specify widths for all cols It is OK. Then If I give a value like 'fdgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfg' in first row in Col12 2nd row col1 width increasing. It shud be fixed. I hope u understand. Thanks in advance. I'm trying to create a table that looks like this: Code: ============ || || || || || || ======= || || || || || ============ I use this code: Code: <table border='1'> <tr> <td>Text</td> <td rowspan='2'>&nbsp;</td> </tr> <tr> <td colspan='2'>Text</td> </tr> </table> But it comes out looking like this: Code: ============ || || || || || || =======----- || | || || | || ============ with 2 of the lines continuing. I can't seem to get it like the first picture. Any help is appreciated. Ok, this is the strangest quirk I think I have seen in IE. It seems that when I combine a right-aligned TD with a UL in the following row in a TD with a colspan of "2", where the content of the right-aligned TD is a word with no spaces, IE goes into spasms. In Opera, Google Chrome, Firefox, and Safari, all is well. Yet in IE, right-padding seems to get automatically added to the right-aligned TD. If I either remove the UL, get rid of the first column in the first row, or break up the long word, it displays fine. Yet, if all those things remain in place, IE just doesn't seem to be able to get its act together. Anyone? Here is my code: HTML Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<head>
<title>Stupid IE</title>
<style type="text/css">
td{
font-family:Garamond;
}
table.Experience{
width:635px;
margin-bottom:14px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
tr.expHeader{
font-weight:bold;
font-size:10pt;
}
td.expDate{
width:130px;
}
td.expCo{
width:205px;
}
td.expLoc{
text-align:right;
width:505px;
}
td.expList{
font-size:11pt;
text-align:justify;
}
td.expList ul{
margin-top:3px;
list-style-type:square;
margin-bottom:6px;
}
td.expList ul li{
margin-bottom:2px;
}
</style>
</head>
<body>
<table class="Experience" cellpadding="0" cellspacing="0">
<tbody>
<tr class="expHeader">
<td class="expDate">Here is a td</td>
<td class="expLoc">Averyveryreallylonglongwordthatislonger</td>
</tr>
<tr>
<td class="expList" colspan="2">
<ul>
<li>
This is a bullet item. Such as those that you may see in various lists around the world.
The most famous bullet item, the semi-bollesque bullet field of 1997, gained notoriety
for the fact that it was the first publicly known bullet item with the ability to break
the sound barrier.
</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table class="Experience" cellpadding="0" cellspacing="0">
<tbody>
<tr class="expHeader">
<td class="expDate">Here is a td</td>
<td class="expLoc">This time I broke it up a little bit. See what happens?</td>
</tr>
<tr>
<td class="expList" colspan="2">
<ul>
<li>
This is a bullet item. Such as those that you may see in various lists around the world.
The most famous bullet item, the semi-bollesque bullet field of 1997, gained notoriety
for the fact that it was the first publicly known bullet item with the ability to break
the sound barrier.
</li>
</ul>
</td>
</tr>
</tbody>
</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.. there is a problem can go through the URL below and open it in IE and any other browser like mozilla or chrome etc the mid section is not working properly it seems in IE as more spaced while in mozilla etc seems less spaced how to solve this issue. www.ims-sc.org please fix the peoblem. Hi, First, please excuse me if this has been answered before. I wasn't able to find any similar posts that has a solution and thus I'm making this new thread. What I have is a simple table with two sections just like this: Code: <table>
<tr>
<td width='50%' valign='top'> Content goes here... </td>
<td width='50%' valign='top'> Content 2 goes here... </td>
</tr>
</table>
Inside those two sections I have a fieldset in each of them (yes, I know this might sound weird, but that's how I need it to be). The question is, how can I make the height of both <td> (or alternatively the fieldset value) to be equal, in a situation when the data is a dynamical one and I don't know its size initially. It looks ugly if one of the rows is longer than the other and I would like to justify them in some way. I tried setting height attribute but to no avail. Any thoughts how this can be achieved? Thank you in advance for your help! Hi there. Can anybody help me fix this issue. At this test url you will see a simple table layout that I have built in Dreamweaver http://www.mediaminx.com/development/ The css can be viewed here http://www.mediaminx.com/development/pages/test.css The problem is not Firefox as this renders the layout perfectly - as does 3 other popular browsers. The problem is IE - it just wont render the layout correctly. All the table cells are out of proportion and the css just isnt controlling. Note that when the middle cell isnot split into may cells ie will render the table correctly - as in 3 columns with the middle one at 760pix and the two outer set to auto and the height set to 100%. But as soon as I start splitting that middle column it throws IE out? Any ideas out there please? 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>
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? I think I've totally given up on this, but thought I still pick all of your brains. I'm working with a CMS that has hardcoded tables so that even when you have border="0", a border still shows up on the live page. It's absolutely driving me nuts. Here's what I'm aiming at: I want to place 5 photos going down the right-hand side of the page. The only way I have figured out how to do this is through a table, but the border shows and makes the entire page look like crap. Any other ideas on how I can accomplish this? Thanks! If I have a table that has 2 columns and the second column has 1 row (rowspan="2") and the first column has 2 rows, how can I keep the rows in the first column aligned top regardless of the height of the second column? Thanks~ my site at http://www.freewebs.com/fallingrain11/1.html im trying to get all the tables the same color but i cant get the last bit of it to color for me the line of code that makes that part of the table i think is ... <td align="left" Width="17%" valign="top" tr> i tried setting the color in .td2{} and tried to call it <td class=td2; ... .... .....> Hiya, I'm altering an existing template for somebody, and I'm having trouble getting it to validate because of the damn tables. I really don't use tables much in favor of a css based layout, so I have very little experience in trying to figure out what the validator is trying to communicate to me. It seems what it tells me contradicts itself! Arggg.. If anyone could provide some insight into this tables mess it would be beyond appreciated. Thanks! -Zach (I've removed some of the superfluous stuff to make it a little simpler) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title></title>
</head>
<body >
<div id="mainwrap">
<div id="header">
<div id="headermsg"></div>
<div id="outer">
<ul>
<li> <span class="xb1"> <a href="express"> <b class="hidden">AA
</b></a> </span> </li>
<li> <span class="xb2"> <a href="full"> <b class="hidden"> BB </b></a> </span> </li>
<li>
<div class="xb3"> <a href="group"> <b class="hidden">CC </b></a> </div>
</li>
<li>
<div class="xb4"> <a href="past"> <b class="hidden"> DD </b></a> </div>
</li>
</ul>
</div>
<!-- tab specific menu goes here -->
<div id="submenu1"> <a href="display/menufilter/madhus" title="menu filter">menu
filter</a> </div>
<div id="submenu2"> <a href="account/home/at/madhus" title="my account">my
account</a> <a href="services/login/at/madhus" title="log in">log
in</a> </div>
<!-- end tab specific menu -->
</div>
<!-- end header -->
<div id="wrapper">
<!-- Begin page layout table -->
<table id="maintable" border="0" width="100%">
<!-- headBoard menu goes here -->
<tr>
<td class="tdHead" colspan="3" valign="top"><!-- header row -->
<div id="headBoard"><div class="headboardtitle">Hello</div></div></td>
</tr>
<tr>
<td id="leftCol" valign="top"><div class="intro2"> </div>
<div id="main">
<div class="description">
<p>Street Address
<input type="text" name="street" value="" style="width: 200px" id="street"/>
<br />
City
<input type="text" name="city" value="" style="width: 260px" id="city"/>
<br />
State
<input type="text" name="state" value="" style="width: 124px" id="state"/>
Zip
<input type="text" name="zip" value="" style="width: 100px" id="zip"/>
</p>
<p style="background-color: #f8e081;"> <i>optional</i> <br />
<textarea name="comments" cols="20" rows="7" style="float:right; margin-right: 20px;" id="comments"></textarea>
Landmarks, cross streets, Special instructions <br />
<br />
<br />
<br />
<br />
<br />
Company
<input type="text" name="company" value="" style="width: 235px;" id="company"/>
<br />
Suite
<input type="text" name="suite" value="" size="13" id="suite"/>
Floor
<input type="text" name="floor" value="" size="13" id="floor" />
<br />
<input type="checkbox" name="Leave with doorman" id="doorman"/>
Please leave with doorman if not home <br />
<input type="checkbox" name="Call Before Delivery" id="call"/>
No phone/intercom, please call before delivery </p>
<a href="#">delete</a> </div>
<div class="customize2"> <a href="#"> New Address </a> </div>
<a href="#"> <b class="basketitem"> </b> </a>
</div>
</td>
<td id="centerCol" valign="top"><!-- Center Column -->
<div class="intro2"> </div>
<div id="main2">
<div class="description">
<p> Street Address
<input type="text" name="street" value="" style="width: 200px" id="street2"/>
<br />
City
<input type="text" name="city" value="" style="width: 260px" id="city2"/>
<br />
State
<input type="text" name="state" value="" style="width: 124px" id="state2"/>
Zip
<input type="text" name="zip" value="" style="width: 100px" id="zip2"/>
</p>
<p style="background-color: #f8e081;"> <i>optional</i> <br />
<textarea name="comments" cols="20" rows="7" style="float:right; margin-right: 20px;" id="comments2">
</textarea>
Landmarks, cross streets, Special instructions<br />
<br />
<br />
<br />
<br />
<br />
Company
<input type="text" name="company" value="" style="width: 235px;" id="company2"/>
<br />
Suite
<input type="text" name="suite" value="" size="13" id="suite2"/>
Floor
<input type="text" name="floor" value="" size="13" id="floor2"/>
<br />
<input type="checkbox" name="Leave with doorman" id="doorman2"/>
Please leave with doorman if not home <br />
<input type="checkbox" name="Call Before Delivery" id="call2"/>
No phone/intercom, please call before delivery </p>
<a href="#">delete</a> </div>
</div>
<div class="customize"> <a href="#"> Save Changes </a> </div>
<a href="#"> <b class="basketactionbuttons"></b> </a> </td>
</tr>
</table>
</div>
</div>
<!-- end page layout table -->
<div id="footer">
<p> <a href="display/contact/madhus" class="novisitedlink">Contact Us</a> | <a href="display/printmenu/madhus" class="novisitedlink">Print
Menu</a> | <a href="display/faq/madhus" class="novisitedlink">FAQ</a> </p>
<p class="smalltext">Powered by <a class="novisitedlink" href="http://www.letsorderonline.com/r/madhus">LetsOrderOnline.com</a></p>
</div>
</body>
</html>
|
|||||||