|
HTML - Rowspan Ruining Cell Dimensions
I need to accomplish a layout like this:
Code: <table> <tr> <td colspan=2 rowspan=2>? by ?</td> <td width=7 height=7>7x7</td> </tr> <tr> <td height=7>?x7</td> </tr> <tr> <td height=7 width=7>7x7</td> <td height=7>?x7</td> <td height=7 width=7>7x7</td> </tr> </table> <!-- expected: _____________ | ? x ? |7x7| | |7x?| |7x7|?x7|7x7| actual (ie): __________________ | ? x ? |7x ?/2 | | |7x ?/2 | | ?/2 x7| ?/2 x7| 7x7 | --> Any idea how to overcome this ie oddity? Similar TutorialsI just finished my website and inserted so flash in it before I inserted the flash everything was fine after I inserted the flash a lot of space was created under it I used the layers method because I need my flash to be on top of something. But for some reason alot of extra space is created. I tried this on a different website on mine too and the same thing happened. Here is the link have a look at it. Notice the extra space under the stickman the white space between the stickman and the footer if you can't tell then open any different page like the updates because that doesn't have the stick man. I will upload the code after maybe, but check to see what could be wrong http://differentworld.comze.com thanks, Ali I'm trying to code a simple Table-based layout with some CSS. I validated my CSS fine, but when I went to validate my XHTML, I realized that I forgot my DOCTYPE declaration. When I added it in, my layout went completely screwy and I can't figure out why. If someone can help. The details I can offer up front are that I am trying to use XHTML Transitional, so I am using the following DOCTYPE: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> My layout is supposed to look like this: http://akito.clavis-sama.com/ But when I put in the DOCTYPE, it ends up like this: http://akito.clavis-sama.com/index2.html It's actually rather frustrating. Any clues/tips? [Also, yes I know there are some other Validation errors, I was going to use the validation to help me find them, but I can't get that far without a working DOCTYPE.] i am supposed to make a resume in a table, so i have used this template and i can see how colspan works for width, but i cannot get rowspan to work: 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" xml:lang="en" lang="en">
<head>
<title>HTML Practice Tables</title>
<style type="text/css">
/* embedded style sheet */
.centerme{
text-align:center;
}
.format{
margin: 0 auto;
width: 1000px;
border: solid 3px #0000FF;
}
caption{
color: #003300
}
.courses{
text-align:right;
background-color:#CCCCCC;
}
th.days{
background-color:#99FF66;
}
.fullwidth{
width:100%;
}
</style>
</head>
<body>
<div class="centerme">
<table class="format" cellspecing="2" border="1">
<caption>Beandip</caption>
<colgroup width="25%" class="courses"></colgroup>
<colgroup width="75%" span="5"></colgroup>
<thead>
<th colspan ="6">top colspan</th>
<tr>
<!-- these go together on the samw line -->
<th rowspan="10" class="courses">Education</th>
<th scope="column" class="days">resume info for 1st column</th>
</tr>
<tfoot>
<tr>
<th colspan ="6">bottom colspan</th>
</tr>
</tfoot>
</thead>
<tr>
<!-- this is for the rows going left to right -->
<th scope="row" class="courses">Professional Experience</th>
<td>my resume info here for 2nd column</td>
</tr>
<tr>
<th scope="row" class="courses">Volunteer Experience</th>
<td>volunteer info</td>
</tr>
<tr>
<th scope="row" class="courses">References</th>
<td colspan="5">references info</td>
</tr>
</table>
</div>
</body>
</html>
how can i get the side rows to span down? this is eventually what the resume layout will look like (only in tables): http://www.scribd.com/doc/27538087/S...e-Table-Format I was playing with the effect rowspan has on a table. I am including three sets of code. The first one is the original table. The second and third one are attempts to use rowspan. First of all I used table width = a percent so that the table would show on all monitors without using the scroll bar. In the second table coding, I added rowspan, I don't know why the next row moved up into that row. So, in the third table coding, I added an implicit colspan="13" because I wanted just 13 columns. 1. I am wondering whether one can use a table width as a percent and also use rowspan? 2. Why does the added rowspan force the next row up into that row? I'm not missing the </tr> tag so the next <tr> should start a new row. 3. Somehow I must be missing the details of using rowspan correctly. I can get around my problem by changing things but I want to understand the use of rowspan in tables. Thank you. Pabu There's something I want to do with a table but I can't quite figure it out. Here's a basic table for demonstration purposes: Code: <html>
<body>
<table>
<thead>
<tr>
<th>Item Header</th>
<th>Link Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>
<a href="#">Link 1</a>
<br />
<a href="#">Link 2</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Ultimately what I want to do is put each link (Link 1 and Link 2) in their own rows then make the whole content area clickable with "display: block;" and then have the background change color with a:hover... but I want each of those links to still be connected to "Item 1" so that if a user clicks "Item Header" to sort the column alphabetically, both links will remain connected to the Item 1 "master row" (if you will). Here's a really quick example of what I mean (done hastily in Gimp 2.6): (Note: The blue area is what would would happen once the link is highlighted with the mouse) I'm sure it's probably really simple and likely involves rowspan in someway, but I've tried a couple of things and just can't get it to do what I want. Any help would be appreciated. Hi, The link is to my HTML that has 1 table showing what I am trying to do and 6 tables of related things that I CAN do -- but I can't get what I want. I am thinking it can't be done (why?). I searched, but didn't find anything. I hope the HTML makes my objective clear. Thanks, Dave http://dkcromley.inoutbox.com/table3x3.html Good afternoon! Where has the sun gone I'm freezing! Is it possible to have a table with rowspan with the text in the rowspan to read vertically (like taking an entire sentence after its been typed and rotating it 90ccw)? 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. Hi got this problem with rowspan in a table I'd like it too look like the picture, but can't can anyone help me Hi, New to this forum, so apologies if this has been answered before--couldn't find the solution anywhere. I'm working on a page (http://www.dinacheney.com/index.htm), and the rowspan effect is working well on FF. On IE, the chalkboard image gets cut off and the image doesn't line up properly. Is this just rowspan weirdness and I need to rewrite the page using divs or css? Or is there something simpler I can do? All advice is much appreciated!!! Thanks in advance! Hi everyone: Any help appreciated. Objective: To have three equally sized and spaced images arranged horizontally, with their size set automatically by the size of the window. Development: I'm using a Mac, and I don't have ready access to a PC to experiment. What I tried: Code: <table> <tr> <td><img src = "a.png" style = "width: 100%" /></td> <td><img src = "b.png" style = "width: 100%" /></td> <td><img src = "c.png" style = "width: 100%" /></td> </tr> </table> <p class = "caption">A caption for the 3 images</p> <p class = "legend" >A legend for the three images</p> What happened: This works perfectly in Safari and Firefox (Mac) and Firefox under Vista, but in Internet Explorer under Vista , the images are HUGE - the unscaled size of the originals. What I think is the reason: IE is taking 100% to be relative to the width of the body element, not the td element. What I don't want to have to do: Use fixed sizes or calculate the sizes on the fly. What I'm trying now: removing the table and using a div, and inside that, setting the image width to 33% and floating one right and one left. What's the trick to get around this IE "gotcha" please? Thanks from a newbie. Hi I have been starring at thie code too long and now i need to look for help! i want to have my page fill out for any screen dimension. therefore i have tried to use percentages. the page looks perfect in dreamweaver but when i view in a browser the navigation.jpg image is out of line and it does not fill out the full page Any help would be much appreciated HTML 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=utf-8" />
<title>inafrenzy.com</title>
<style type="text/css">
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
}
#apDiv1 {
position:absolute;
left:543px;
top:32px;
width:333px;
height:57px;
z-index:1;
}
</style></head>
<div id="apDiv1"><img src="images/banner.png" width="300" height="38" /></div>
<table width="100%" height="35%" border="0" cellpadding="0">
<tr>
<td width="15%" align="center" valign="middle"> </td>
<td width="70%" align="center" valign="middle"><img src="images/navigation.png" alt="navigation" align="left" /></td>
<td width="15%" height="163" align="center" valign="middle"> </td>
</tr>
</table>
<div></div>
</html>
the page is at http://www.inafrenzy.com/site/ thanks Hello folks. I am wondering if i can control the dimensions of my web page. I do not want that web page to be usual full screen, but i would like to be for example only 400x300. Is there any way how to control this? Thank you so much for any input. Janek hi, i have a jsp page, in this page i am displaying data retrieved from mysql database. Now the problem is i must color table cell based on cell value. how to implement this.please give me an sample or working code foe this problem.( any code is accepted) preferably html or javascript. i.e if cell value is "late" then display that cell in red color else display the cell in green color please help me. Thanks ad Regards Akash Hi all, I want to get rid of that extra white space at the bottom. It's not looking good wth my theme. Here is my link http://mallickart.com/photo.html THANK YOU SO MUCH, FRIENDS!!!!! Greetings! Let me start this out by getting this out of the way - I know I should not be using tables for layout anymore But with this project I have good reasons as to not using them. Learning curve being one and time being another But I am headed that way! So here is the issue I have a simple layout and nested within is this little table for content and navigation Worked fine in FF, but IE7 is giving me some unexpected results with no explanation I can find. Here is the example page http://www.mountainroseherbs.com/test/blank.html Top left (blue) is the navigation image and cell - set height should be static and remain at the top Bottom Left (red) is a nav *footer*, I guess, but it remains at the bottom and the cell above it needs to be able to stretch indefinitely - with the images sitting on the bottom. Right (Orange) is the content area - dynamically stretching with the *red* following it. In FF this works great! Not so much in IE7 - in fact it skews the height of even the *blue* which is set!? Thanks so much in advance for your help on this, I am at my wits end! Nate~ Hello, I am using a template to make a webpage. The background for one of the cells is not covering the entire area. I have looked and looked at this and can not figure it out. Therefore I thought I would ask some pros. Thanks!! Hi everyone. So I got my template set up to the way I like it and everything is rolling good. I inserted a picture into one of the cells in the table and it shifts everything over. Here is my code: <td width="625" colspan="1" bgcolor="white"> <font type="Arial" size ="5" color="blue"> <b>Floorplan</b><br> <center> <a href="floorplanlarge.jpg"><img src="floorplansmall.jpg" border="0" /></a> </center> </td> I have been working on fixing this for the last hour and am out of ideas on what is going on. The picture is smaller than the cell width range. My picture width is 311 pixels and the cell width is 625 pixels. I dont know if there is code whether its HTML or CSS to prevent the cell from widening. Any help would be appreciated. Also if you need me to provide more detail I can. Thanks. i set up a large gap for cellpadding with my site and im wondering if i can undo that for 1 object, i want 1 object to be style="float:right; and in the top right area of the screen is there anyway i can undo the cellpadding effect for that object ? |
|||||||