|
HTML - Making A Table With Divs
Hi
I need to make a table to display data(obviously), but i only want to use divs. It needs 11 columns and a flexible amount of rows as i will be adding to it. I attempted to make one myself, but when i end and div tags, it goes straight to a new line. I dont want to use tables, it needs to be valid XHTML 1.0 transitional and cross-browser compatible. Can anyone help me? Thanks in advance, Chris Similar Tutorialsis it possible to have div #1 which is 500 x 500 and div #2 which is also 500 x 500 directly above div #2 (rather than below or next to it)? i am thinking of using the z-index to making this happen... am i on the right track? so div #2 will have a z-index which is greater than that of div #1 I want to make a table with two rows But i want to make sure that the data in the 2nd column is always align to the right.....Like this Data1 Data2 Data2 Data3 And not <tr><td>Data1<\td><td I want this side of the row to always be align to the right..>Data1</td></tr> Data2Data3 I know this is easy...But i am not quite sure how to do.... I want "Marriage Encounter Talks" to appear under Sunrise room from 3:00 - 5:00 and Ohio Book Resale Setup to appear under Mountain View Room from 2:00 - 5:00. How can I do that ? This is my code. PHP Code: <table border="1" cellspacing="3" cellpadding="5" width="75%" height="100%" summary="This table contains Tuesdays reservations"> <caption align="bottom">All times listed in central time</caption> <thead> <tr> <th>Time</th> <th>Sunrise Room</th> <th>Mountain View Room</th> <th>Arbor Hall</th> <th>Mitchell Theater</th> <th>Gold Room</th> <th>Blue Room</th> <th>Green Room</th> </tr> </thead> <tr> <th>8:00</td> <td rowspan="5">Marriage Encounter</td> <td rowspan="2">Breakfast Club of Ohio</td> </tr> <tr> <th>8:30</th> </tr> <tr> <th>9:00</th> </tr> <tr> <th>9:30</th> </tr> <tr> <th>10:00</th> </tr> <tr> <th>10:30</th> </tr> <tr> <th>11:00</th> <td rowspan="2"></td> <td rowspan="2">Ohio Conference of Librarians<td> </tr> <tr> <th>11:30</th> </tr> <tr> <th>12:00</th> <td rowspan="3">Marriage Encounter Luncheon</td> </tr> <tr> <th>12:30</th> </tr> <tr> <th>1:00</th> </tr> <th>1:30</th> </tr> <tr> <th>2:00</th> <td rowspan="5">Ohio Book Resale Setup</td> </tr> <tr> <th>2:30</th> </tr> <tr> <th>3:00</th> <td rowspan="5">Marriage Encounter Talks</td> </tr> <tr> <th>3:30</th> </tr> <tr> <th>4:00</th> </tr> <tr> <th>4:30</th> </tr> <tr> <th>5:00</th> </tr> </table> Im having an issue in some browsers with making a whole cell in a table a link. I have simplified my code to that below for ease of troubleshooting here. Using the code below, and assuming you have two image files named AlphaThumb.jpg (approx 80x100 px) and Alpha.jpg (A larger version of AlphaThumb.jpg) in a folder with the html and css files I achieve the desired result in IE7, IE8 & in Lunascape6 (Ver 6.3.4). However Firefox (Ver 3.6.13), Safari (Ver 5.0.3) & Opera (Ver 11.00) all have the same issue, in that the link doesn't work. If anyone has any ideas I'd be grateful for some input. Regards, Stoney ------------- The Html code ------------- <html> <link rel="stylesheet" type="text/css" href="Stylesheet1.css" /> <body> <table border="1" class="aggregatestable"> <tr> <a href="Alpha.jpg" target=_blank> <td class="productalpha"> </td> </a> <td class="productname">Alpha</td> <td>Some random text about our product Alpha.</td> </tr> </table> </body> </html> ------------ The css code ------------ td.productname { width: 100px; height: 80px; } td.productalpha { background-image: url(AlphaThumb.jpg); background-repeat: no-repeat; background-position: center; width: 100px; height: 80px; cursor: pointer; } Hi there I am trying to make a template whereby the whole table fills 100% height of the browser window. My problem is, is that i have a nested table containing 2 rows and 2 tds. The first row and td needs to be aligned to the top and the 2nd needs to align to the bottom - and to the bottom of the browser window. This is my code so far: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Homepage</title> <style type="text/css" media="all"> body { margin:0; padding:0; height:100%; } table { border-collapse:collapse; border-spacing:0; } td { margin:0; padding:0; } html { height:100%; } </style> </head> <body > <table width="100%" cellpadding="0" cellspacing="0" style="height:100%;"> <tr> <td width="50%" style="background-image:url(leftheader_image.gif); background-repeat:repeat-x; background-position:top right;"></td> <td width="980" height="244" style="background-image:url(header_image.jpg); background-repeat:no-repeat; background-position:top left; vertical-align:top;"><img src="spacer.gif" width="980" height="1" alt="" /></td> <td width="50%" style="background-image:url(rightheader_image.gif); background-repeat:repeat-x; background-position:top left;"></td> </tr> <tr> <td width="50%" style="background-image:url(leftbody_image.jpg); background-repeat:repeat-x; background-position:top right; background-color:#fbefd5; vertical-align:bottom;" ><table width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="50%" height="119" style="background-image:url(leftgrass_image.gif); background-repeat:repeat; background-position:top right; vertical-align:bottom;"></td> </tr> </table></td> <td width="980" bgcolor="#fbefd5" style="background-image:url(body_image.jpg); background-repeat:repeat-x; background-position:top left; background-color:#fbefd5; height:100%; vertical-align:top;"><table width="100%" style="height:100%" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><p>content</p></td> </tr> <tr><br /> <td width="980" height="118" style="vertical-align:bottom; background-image:url(grass_image.gif); background-position:top left; background-repeat:repeat-x;"> </td> </tr> </table></td> <td width="50%" style="background-image:url(rightbody_image.jpg); background-repeat:repeat-x; background-position:top left; vertical-align:bottom; background-color:#fbefd5; "><table width="100%"> <tr> <td width="50%" height="118" style="background-image:url(rightgrass_image.gif); background-repeat:repeat; background-position:top left; "></td> </tr> </table></td> </tr> </tr> </table> </body> </html> What i need is for the left grass image, the grass image and the right grass image all aligned to the bottom of the browser window, but all these images need to be set as backgrounds as i need the left and the right to repeat on the x and footer links will be overlayed to the grass image in the middle. The result i am getting at the moment is IE7 displays 100% further than the height of the browser window, resulting in a scroll and the grass image does not align to the bottom along with the left and right grass. This is near the top directly beneath the content td. In Firefox, all images are aligned to the bottom, but the grass image is pushed further down than the left and right and so is not lined correctly, resulting in a slight scroll. The left and right grass images are aligned at the bottom of the browser window, before needing to scroll to see the rest of the middle grass. I know that's a lot to take in, does it make sense? Thanks in advance. Hi everyone, I am working on a table for a future website and I need some help. I need to make the text at the top vertical, as in taking the word and turning it 90 degrees to the left. The best way for me to explain this is to show u the problem/test page. http://aquariachat.com/bigchangesare...chartfeb23.php I am making the chart/table in a simple html editor if that information is of any use. Thanks a lot, Drew Hello, I have a website constructed with tables since I haven't had the time to learn CSS. When the browser window gets resized, the table disappears and moves below my ad (aligned left). I want my table to NOT move even if the browser window is resized. I am able to achieve this by "converting tables to layers" but I don't like how it makes my site look and it messes up the format of some of my content. The code is: <table width="800" border="1" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"><div align="center"><a href="index.htm"><img src="images/banner.png"width="800" height="120" border="0"></a> </div></td> </tr> <tr> <td colspan="5"> </td> </tr> <tr> <td colspan="5"><div align="center"> </div></td> </tr> <tr> <td colspan="5"> </td> </tr> <tr> <td><div align="center"><a href="index.htm"><img src="buttons/home.png" alt="Home Page" width="67" height="15" border="0"></a></div></td> <td><div align="center"><a href="videos.htm"><img src="buttons/videos.png" alt="Videos" width="85" height="15" border="0"></a></div></td> <td><div align="center"><a href="gallery.htm"><img src="buttons/gallery.png" alt="Gallery" width="107" height="15" border="0"></a></div></td> <td><div align="center"><a href="about.htm"><img src="buttons/about.png" alt="About" width="80" height="15" border="0"></a></div></td> <td><div align="center"><a href="contact.htm"><img src="buttons/contact.png" alt="Contact" width="108" height="15" border="0"></a></div></td> </tr> <tr> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> </tr> <tr bgcolor="#FFFFFF"> <td height="223" colspan="5"><p class="style2"> </p> <p class="style3"> </p> <p></p></td> </tr> </table> Thank you! Hi I'm designing a simple website in NVU, but although it displays correctly in NVU and Firefox, for some reason the tables aren't centred in Internet Explorer (they stay on the left side of the browser). The site is at www.saturdaynightmusical.com Any tips on why this is displaying differently in IE would be greatly appreciated! Many thanks for your time. Heya I was just thinking If we have a 4*4 cell table. Quote: <table border=1> <tr> <td>1111111111<br><br><br><br>1111</td><td>22222222</td> </tr> <tr> <td>a</td><td>b</td> </tr> </table> In this table can be text of any length in every cell. Can the vertical "line" and horizontal line (in the middle) be kept as they are in div structure? Meaning here the column with letter a is as long as the column with numbers 1 and is also aligned perfectly with column b. Can this be done with div layout without using procents or pixels in width or height with crossbrowser perfection? Don't seem to see the solution :/ That's about the sum of it really - tried a tip I saw on this forum to wrap a table in 'divs' but it doesn't seem to have helped - I still get a funny vertical gap in IE7 that doesn't appear in FF. Any ideas? www.intuitionstudio.co.uk Cheers! I've been working for a long while on this script, and I can't get it to work. I'm mostly doing it to learn, because I stink at HTML and pretty much any scripts.. What I'm basically trying to do is make a page with two screens on at once, like a split browser. Since I have practically no experience in HTML, I still haven't figured out how to make the top bar (address bar) stay no matter what site I am on. Help.. please? Address bar code below, may need some work Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>ItsJareds</title>
<script language="javascript">
<!--//
function findworld(form)
{
server = '<frame src="' + form.server.value + '">'
document.write('<html>')
document.write('<frameset cols=* rows=" frameborder=0 border=0>')
document.write(server)
document.write('</frameset>')
document.write('</html>')
}
//-->
</script>
</head>
<body bgcolor="748269">
<div style="position:fixed">
<form name="worldselector">
<TABLE WIDTH="100%">
<right>
<TR>
<TD valign="middle"><font color="3B5E2B" size="4"><strong>Address: </strong></font></TD>
<TD valign="middle">
<input type="input" name="server" size="40">
<input type="button" value="Load Page" onclick="findworld(this.form)">
</TD>
</TR>
</right>
</table>
</form>
</body>
</html>
Hi there, I am building a website for my products and want to create some tap-like buttons for the product description. Please see the details on this sample site: http://www.christiedigital.com/AMEN/...stieHD10KM.htm So the content has been classfied into "Description", "Overview", "Specifcation", etc on the same HTML page. Does everyone know how to create this feature in HTML coding? Or is there any tool to make this feature? Any suggestions are very welcome. Thanks. Hi guys, I am building a site for a new company and they need a page with a form on it that a user can fill out, that gets sent to the company, which they use to send back a quote. So obviously the form will require fields for the users name and other important details. As for the actual info needed to make the quote, there are three different types of quote (so maybe three different forms would work?) The forms are as follows: Marine Type of boat: Length: Height to antifoul line: Hull: Material: Antifoul re-application: (yes/no) Marina location: Automotive Make: Model: Year: Type of strip: Condition: Rust: Blast location: Home location: Swimming Pool Type of pool: locaton: Size (m squared): Depth: Shape: Tiled: (yes/no) Re-paint: (yes/no) Blast location: This excel file also shows the forms required: http://www.mediafire.com/?33oxx0zf6tac8ap I would greatly appreciate it if someone showed me how i can make these forms using HTML. Thanks I was wondering if there was any specific code that i could use to mkae a thumbnail of an image that leads to a larger image, without having to make 2 separate images. On my HTML file i am trying to get the border to stay as it is and only get the middle bit to change when i click. The reason for this is that in the border there is alot of information which will be changed often and if i dont single pages it would require me to change each and everypage correct? So i was wondering weather i can make a panel to go in the middle which would change everyimime the user clicks on a new Link from the top bar. This Is What It Looks Like: Thanks Hello knowledgable HTMLforum gurus. I have a client that would like a blog feature on her site, so that she can update one of the pages with announcements, etc. Is there some free code anywhere that I can use to accomplish this? I'd like the code to be able to archive old entries and have a search function if possible... Also, I need to have the blog section fit into the same design scheme as the rest of the site that I will be creating, so outsourcing to blogspot or something like that is out of the question. Does anyone know of any freeware that can accomplish this? Thanks in advance, hous edit: please forgive the placement of this thread - not sure where this belongs. I know about tables, but are there advance programming for certain condition? I mean if I want certain cells to certain lengths and so on? Hi I've found a nice template of a website online (free). But i couldn't find a way to fully make the template RTL. Could anyone assist be with some basics? I could even upload the template. Thanks, I am very new to html coding and so I don't no if this is even possible. But what I want to do is have a user click on an image or a button and have another image or text or whatever appear on the same window. I no about the onclick action and understand a little bit about forms. However I am at a real wall on this one. thank you hey i wanna put an add next to my site chat box but i do the align thing and it goes under heres my codes without any changes <embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" bgcolor="#000000" width="600" height="500" name="chat" FlashVars="id=29774756&gn=CinemaSite" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small><a target="_BLANK" href="http://xat.com/web_gear/chat/embed.php?id=29774756&GroupName=CinemaSite">Get CinemaSite chat group</a> | <a target="_BLANK" href="http://xat.com/CinemaSite"> Goto CinemaSite website</a></small><br><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/CIMP/bT*xJmx*PTEyMTE1MTYzNzI2NDkmcHQ9MTIxMTUxNjQwMTU2NSZwPTUzMTUxJmQ9Jm49Jmc9MQ==.jpg" <!-- Begin: AdBrite --> <script type="text/javascript"> var AdBrite_Title_Color = '0000FF'; var AdBrite_Text_Color = '000000'; var AdBrite_Background_Color = '808080'; var AdBrite_Border_Color = '333333'; var AdBrite_URL_Color = '0000FF'; </script> <script src="http://ads.adbrite.com/mb/text_group.php?sid=707068&zs=3132305f363030" type="text/javascript"></script> <div><a target="_top" href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=707068&afsid=1" style="font-weight:bold;font-family:Arial;font-size:13px;">Your Ad Here</a></div> <!-- End: AdBrite --> what do i add to make the add on the right side of the chat ???? |
|||||||