|
HTML - Tables - Rowspan - Can This Be Done?
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 Similar TutorialsI 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 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 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. 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 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! Hi Normally, when you have more than one table in your code, the tables will be placed one under each other. Example: <table> ... </table> <table> ... </table> When you want the tables to be placed next to each other, you need to set the align attribute. Example: <table align="left"> ... </table> <table align="left"> ... </table> BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables". Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag? Thanks for your help praiser Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code. How I want it to look: How it looks now: I want the tables to line up at the top and re-size according to each other so they're always aligned at the top. Code: coming in next 2 posts Can someone give me a tutorial on tables please? I would very much apprieciate it. I don't really know anything on tables so please start basic. I hope to see a response soon. Is there a way to put together tables so they look like this: I'm starting a forum here, and I really want to get it up soon. But I can't because I'm having trouble w/ the header. On the header there's supposed to be text on top of it, but it's not. It's on the side. Can anyone help? Thank you. Here's the code:
Code: <a name="top"></a> <table cellspacing="0" cellpadding="0" border="0" width="696px" align="center"> <tr> <td bgcolor="#ddeef7"> <table border="0" cellspacing="1px" cellpadding="6" width="100%"> <tr> <td width="74%" bgcolor="#ffffff"> <table border="0" width="100%" cellpadding="0" cellspacing="0"> <tr> <td valign="top" rowspan="2"><a href="index.php"><img src="./images/oxygen/logo.png" alt="Ne-YoFan.com Online Community" border="0" /></a></td></tr> <tr> <td align="right" valign="top"><font class="smalltxt">Last active: 14-6-2008 at 08:10 PM<br /></font></td> </tr> <tr> <td align="right" valign="bottom"><font class="smalltxt">Logged in as <a href="member.php?action=viewpro&member=Erika">Erika</a><br />[<a href="misc.php?action=logout">Logout</a> - <a href="u2u.php" onclick="Popup(this.href, 'Window', 700, 450); return false;">U2U</a> - <a href="memcp.php">User Control Panel</a> - <a href="cp.php">Administration Panel</a>]</font></td> </tr> </table> i dont know if this belongs in here, but i was wondering if you could please tell me the code for the rounded square outlines around the text like this http://profile.myspace.com/index.cfm...endid=35605078 any help will be appreciated I have a L shaped image that I want to put into a table as a whole rather than cut into to two oblongs. As I am not an expert I wondered if this would mean that the space surronding the L shapped image will not be accesble when place in the table.. I want to put txt into the recess against the right angle formed by the L I think that the <td><img src="Lshape"/></td > way that the table structure works that the L will have a rectangle around it and that this will prevent things butting close to it.. is there a way around it.. Apart from cutting the L shape into two pieces and putting a table within a table thanks Larry Hey, i'm trying to make a simple site, and right now i have one page with a table centered. That all works good, and when you change the size of your webpage, the table always stays centered. My problem is i would like to do this with DIV, because CSS allows more positing control. Yet, when i put a DIV table somewhere when i change the size of my webbrowser the table just disapears off to the site instead of staying centered (even thou its not set to stay centered) I geuss a better question would be how can i control where the table is, but keep it relitive to the size of the window? With CSS or with HTML. Thanks. Is there anyway that in Internet Explorer I can stop it auto-resizing? I think that is the problem I'm having, I'm not sure though. The problem is this: http://i37.photobucket.com/albums/e8...66/problem.png The cell on IE adds onto the top and bottom of the image for seemingly no reason. The image on the broken cell is a link as well. I tried making the image the background of the cell and having a transparent image as the link over the top but it brings up the same problems. There's no border around the image and no cell padding. The code used for that specific cell is: Code: <TD height="74" style="background-repeat:no-repeat;" COLSPAN=2><a href="MYLINK" target="_blank"><img src="http://i37.photobucket.com/albums/e85/pxi666/seashell/seashell_layout_09.png" width="411" height="74" border="0"></a></TD> Any ideas on what could be causing this? Thanks a lot in advance, Ollie Ok I'm trying to get a page to look like this I did it with images, so theres no text. So there's 4 images basically I tried to do a table like this Quote: <table border="0"> <tr> <td><a href="http://milkshakekicks.com/kicks/index.php?main_page=product_info&cPath=1&products_id=10&zenid=c1961df3cad20f9854cb47801f 85ee4d"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/picture-1.png" alt="" /></a></td> <td><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/picture-2.png" alt="" />, <img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/picture-3.png" alt="" />, <a href="http://milkshakekicks.com/kicks/index.php?main_page=product_info&cPath=1&products_id=10 amp;zenid=c1961df3cad20f9854cb47801f85ee4d"><img style="border: 1px solid grey;" src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/battle_homepage.png" alt="" width="209" height="179" /></a></td> </tr> </table> but got this Should I not do this with tables? Has anyone heard of this software?: http://www.table2css.com/ I've been told that my site at http://www.ColoradoProcessServers.net was done with tables, and they're late 90's era stuff, which is why I'm having such trouble trying to get rid of white space above and below the row of logos on my page. Or would it be very hard for me to learn how to do a proper job of this myself, without attending college? ( don't have time or money ) Or might it not cost much to pay someone to work with me? I could send them code from the style.css and each page, and they could send it back converted without the tables, then I test it? |
|||||||