|
HTML - Rowspan To Read Vertically?
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)? Similar Tutorialsi 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. 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 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 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'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! Hey guys been having a few problems finding resources on how to vertically align text. what it is is that i have a division i wish to display text in vertically... Any ideas? div{vertical-align: -50%} thats what i came up with but still no joy... I have a table that is saved from Photoshop. It's a table with a load of cells inside. How can I vertically center the table? Not its content, I mean the actual table itself so it centers itself no matter the resolution of the screen it's being displayed on. Thanks, Simon Hai there, just a quick question - How do I center an image vertically (as in right in the middle, I don't want to have to mess around with each image to the exact pixel spacings) All I want to know is the code to put this: </A> <A HREF="http://rh.pretsell.co.uk/xlrstats/"> <IMG SRC="http://i28.servimg.com/u/f28/15/38/25/28/xlrsta16.png"> In the middle so it makes the forum look better Thank you! Hello all, I need some help, and I'm hoping someone can assist me . I'm trying to create a html document - an offline webpage. Basically, I want parts of the page to remain static, which contain a logo and some navigation links, and the one part of the table to be a scrolling box. The reason is this: That one cell is going to contain some very large images - 1000 pixels wide by maybe 2000, 3000 high. So while the width can obviously fit on a standard monitor, the height will not. Now, the images themselves are pictures of long flowcharts. Therefore, it's fine for the user to scroll down to navigate the flowchart. But the static navigation links and the title should remain - well, static - while the user is able to scroll up and down that ONE cell containing the flowcharts. Here's a picture to clarify things. As you can see, the bolded cell is the one in question. (apologies for the shoddy drawing) If anyone solves that problem, I have one slightly tougher one for you to solve, but more on that later. Can anyone help me? :sad: I've been trying for 2 days to get my text to vertically-align middle in IE, but it just won't listen. I'm building the site www.acadianacomputerrepair.info; the title and menu items need to be aligned to the middle of their div containers, but they want to clip to the top. I'm setting the parent div's to display as tables and the child as a table-cell. It works great in firefox and perfect, even in IE, on a simple html test page, but I can't get it to work for the site, in IE. I don't know what else to try. Can someone help? Hi, I'm absolute noob when it comes to building websites, so please be gentle. See, for example, this page of my website: http://home.planet.nl/~lever170/hk/hk.html The page is a frame with the photo's on the right and the BACK link on the left. I would like to vertically center the page with BACK so that the vertical line lines up with the thumbnails regardless of screen size. The code for the BACK page is as follows: Code: <html> <body style="background-color:#333333" link="white" alink="white" vlink="white"> <br> <br> <br> <br> <br> <br> <center> <table cellspacing="5" border="0" cellpadding="0"> <tr valign="top" align="left"> <td> <br><br><br><br> <a style="text-decoration:none" href="javascript: history.go(-1)">BACK</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </p> </td> <td bgcolor="#FFFFFF"><img src="http://home.planet.nl/~lever170/1pix.gif"><BR></td> </tr> </table> </center> </body> </html> How do I vertically center this? Hey, I want an image in the dead center of a frame. All I have so far is: <center><img src="images/banner_ani.gif"></center> I don't know how to vertically align the image. Could someone please fix it for me or tell me how. I tried googling everywhere but all I could find was stuff that involved CSS. Thanks Hi, I've got an image 25x25px which i'm trying to vertically align in a 35px high list element. The css attached to the image is: width: 25px; height: 25px; border: 0px; vertical-align:middle; and the css attached to the list element is: font-size: small; height: 35px; border-style: ridge; border-width: 0px 0px 2px 0px; I'm trying to find a way of getting the browser to vertically align through css. I'm not trying to use padding, etc on the image, because i'm worried that when a user enlarges the text, or its rendered by different brwosers, etc, the image will mis-align itself. I thought vertical align was the right attribute, because i thought it vertically aligned all inline elements. but when i've attached it to the image, nothing has happened. http://www.tendervendors.com/contact.php I'm trying to vertically align the little picture of a house, in the navigation bar. I'm greatful for any help you can give, Matthew Millar Hi everyone, this is my first post. I am hoping to find someone who can help me. I need to make it so a table on my page is centered veritcally (the same way the center tag centers it horizontally) so that it will always be in the center of the page regardless of screen resolution or if the person resizes their browser window - is such a thing possible? If javascript is needed that is fine. Thanks An old chestnut this one, but I can't find reference to this particular technique when searching the forums. http://www.freemanpeer.com is the address and I'm using the technique found here (http://exanimo.com/examples/css/vert...ated-shim.html) to vertically center, however it's sticking fairly rigidly to the top of the browser. Any ideas anyone? Thanks in advance, Jez. Hello I have two tables in my JSP ; the first table has 3 columns, and should be displayed on top of the page and is used to display elements of a form. Another table should be displayed below that table, has dynamic number of columns. This page opens as a child window from main window The problem is that the tables are displayed beside each other if I have not specified width of table. If I do specify it (like I set it to 100%) the second table is not shown . Could you please help me and tell me how to have two tables displayed vertically inside my page ? Thank you so much Evrim how do i center the body of this page: www.discoveryfilmsuk.com/ i want to align to the middle of the page, vertically and horizontally |
|||||||