|
HTML - Rowspan Problem In Table
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 Similar TutorialsThere'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. 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 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 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 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. 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? 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! Hello, I am newbie, just has started my adventure with html. I tried to make an easy static site, without any additional thingd, but it occured a problem. 1. I mean, as I put table in table because I did know how to to id in different way, to make buttons on the left stay up while text on the right is moving- if I do normal table with 2columns and on the left lets say 5rows for buttons, on the right I unite all rows to make one big sort of box for contents, as I go down and try to write something morre, the rows from the letf were enlarging too If the size of explorer or firefox is nor full screen, the text in contents is going away (like now in lycos server, where screen is not full, but "cut" by advertise) 2. I have highlighted buttons, but not always works, why? (i mean it works, but darker buttons are charging so slow- maybe it is so because i saved them in pgn instead in gif, and each one is about 50kb?) -probably it is not this- because I have just changed into gif, and it is still the same 3. Another problem, as I post the site, I have notice, that in firefox I can not navigate with buttons, while in explorer yes, is it a fault of my coding, or of server where I put website? Here I post my website: http://members.lycos.co.uk/aniaacolgate/ Could someone take a look on the code, and will be so kind to correct me? It is a basic easy site of very begginger I just wanted to make a shape like this: - top: a banner - buttons in horizontal and vertical way - under buttons: contents (sincerly would like to put frames, but do not know how to put them there, is on the left there r buttons Thank you so much in advance for reply Sorry for mistakes in language I have a table problem where in table (A) and any tables under gets longer, links and content in table (B ) doesn't stay aligned to top, the whole content in table (B) and any others appears away from the top, even in the middle so the top part becomes blank I'd like the content in A as well as B stay on the top and no blank spaces appear on the top of them I'll appreciate any quick fix for this issue kind regards Here's the problematic table I have Quote: <table width="79%" height="100%" border="0"> <tr> <td width="63%" scope="col">A</td> <td width="37%" rowspan="3" >B<br /> </td> </tr> <tr> <td> </td> </tr> <tr> <td scope="row"><table width="100%" border="0" > <tr> <td width="230"> </td> <td width="230"></td> <td width="230" border="0"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table></td> </tr> </table> I am having a problem getting a table to render properly in IE (including version 7): Test Page Why does extra padding show up to the right of the "+ Select" button? I want the table to collapse to the size of the content, but I can't find ANY combination of CSS that forces IE to do this. Firefox renders the page OK. OK Look I Have This Code: HTML Code: <table align="center" width="1010" border="1" cellpadding="0" cellspacing="0" name="table"> <tr> <td background="http://www.imageshack.com/up/mywyjwz3m4.png" width="1010" height="952" style="background-repeat:no-repeat;;background-position:center"> <img src="full.jpg" style="position:absolute;left:0px;top:0px;"> </td></tr> Now, What I Wanted To Know If With This Code: HTML Code: style="position:absolute;left:0px;top:0px;" Can I Move The Object Just In The Table If I Will Give Him For Example: HTML Code: left:0px;top:0px; So It Will Be Like That: And No Like That: Please Help Me! Hi.. i've got a table that doesnt do what i want it to do.. Page : http://www.yeltzin.net/test/index2.html One cell dont display the background (cell changes from time to time), and the page dont finish "loading".. The size of the cells/pictures have been triple-checked.. I tried narrowing it down and here is the part of the code i still have : PHP Code: index2.html --------------- <html> <head><link rel="stylesheet" type="text/css" href="styles.css"></head> <body> <table class="indextable"> <col style="width: 287px;"> <col style="width: 286px;"> <col style="width: 285px;"> <tbody> <tr> <td colspan=1 class="r1c1">row 1 cell 1</td> <td colspan=2 class="r1c2">row 1 cell 2</td> </tr> <tr> <td colspan=1 class="r2c1">row 2 cell 1</td> <td colspan=2 class="r2c2">row 2 cell 2</td> </tr> <tr> <td colspan=2 class="r3c1">row 3 cell 1</td> <td colspan=1 class="r3c2">row 3 cell 2</td> </tr> </tbody> </table> </body> </html> styles.css --------------- table.indextable{ table-layout:fixed; border-collapse:collapse;} td.r1c1{ background-image:url('R1C1_.jpg'); height: 184px;} td.r1c2{ background-image:url('R1C2_.jpg'); height: 184px;} td.r2c1{ background-image:url('R2C1_.jpg'); height: 182px;} td.r2c2{ background-image:url('R2C2_.jpg'); height: 182px;} td.r3c1{ background-image:url('R3C1_.jpg'); height: 180px;} td.r3c2{ background-image:url('R3C2_.jpg'); height: 180px;} Hi, I have a table layout (I know I should be using CSS ... but it was a quick site!) I have table width 100% and then 2 columns with td both set to 50% There are many text and images / tables & tr & td within both of the above. I have ensured no table or td within the 50% ones have any width measurements. However, when I minimise the window it doesn't seem to be keeping them 50/50 the left column seems to stay the same size. From the looks of it (images etc) it should re-size far more before it stops. Can anyone advise of typical things i should be looking for in my code that may be causing this? Cheers, d Attached are 2 images of the footer of my website, one (displayed properly) in every browser except IE7 and the other (screwed up) in IE7. As you can see, I have 4 columns, inside which are links to a forums section. In IE7, column 2 is shifted over to the right and sits on top of column 3. The section is styled in CSS...I have attachments for the HTML and CSS code for the section. I'm hoping that one of the guru's here can suggest a fix (please let it be easy ). Thanks for the help. Rick Hi, I have a problem with my tables. I made 1 table with 3 TD/tables in them. And have text them. The problem though is that in the first two tables the text begins in the middle. I want it to start at the top like the third does which also contains most text and fills up the whole 3rd table. How can I solve it? Thanks. on my home page i am using a table in this table i am including different files like header in first row ,nevigator,main part,and fottter throught following coding in php PHP Code: <html> <head> <Title> TECHOBOY::Home </Title> </head> <body> <table > <tr><td > <?php include("header.php"); ?></td></tr> </table> <table > <tr><td > <?php include("nevigator.php"); ?></td></tr> </table> <table> <tr valign="top"> <td valign="top"> <?php include("del.php"); ?> </td> </tr> </table> <table> <tr><td> <?php include("counter_footer.php"); ?></td></tr> </table> </body> </html> and i am having out put as follow in this image now as shown in above pic my DISCUSSION table is centered due to its besides main table .what i want is i want to make that discussion table to align top. can any one tell me how to do that? i am really waiting for your reply thansk you in advance I've created my site using mainly Netscape and Mozilla. It looks fine, even though the code is a little messy. But one page won't display properly in IE, only in Mozilla: http://kukla.tv/cbs.html The top tables are constrained to the browser width in both browsers, but not the large bottom table (the list of films). I even made the bottom table 997 pixels rather than 100% of page width, but it still does not wrap the text in IE, only in Mozilla. What do I need to do? Thanks, Mark When I enlarge my window my 2 tables that are next to each other move up and down on my page and end up different heights. Is there a way to keep them even with each other when a different window size is used? I tried changing the 100% widths to fixed numbers but then my background image doesn't fill the whole screen. Is there some code I can add to freeze the size of these tables without loosing 100% background image? |
|||||||