...
PDA

expanding tables

RandomJim
06-02-2009, 10:15 PM
Hi guys,

I can normally cope with them but im stumped on how to do this...

Ok im trying to make the section where "main.jpg" (line 22) is to extend with more text. but i cant do it without distorting the other images on the left :( :confused:



<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<center>
<body bgcolor="#62614d" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (index.psd) -->
<table id="Table_01" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="images/index_01.jpg" width="766" height="71" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="71" alt=""></td>
</tr>
<tr>
<td rowspan="10">
<img src="images/index_02.jpg" width="40" height="679" alt=""></td>
<td colspan="4">
<a href="#">
<img src="images/logo.jpg" width="238" height="41" border="0" alt=""></a></td>
<td rowspan="8" hight="1000" background="images/main.jpg" valign="top" style="padding:10px,10px,10px,10px;">
test<br>test<br>test<br>
</td>

<td rowspan="10">
<img src="images/index_05.jpg" width="74" height="679" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="41" alt=""></td>
</tr>

<tr>
<td colspan="4">
<img src="images/index_06.jpg" width="238" height="139" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="139" alt=""></td>
</tr>
<tr>
<td rowspan="8">
<img src="images/index_07.jpg" width="69" height="499" alt=""></td>
<td>
<img src="images/01.jpg" width="147" height="79" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/index_09.jpg" width="22" height="85" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="79" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_10.jpg" width="147" height="6" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/02.jpg" width="148" height="80" alt=""></td>
<td rowspan="6">
<img src="images/index_12.jpg" width="21" height="414" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_13.jpg" width="148" height="5" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/03.jpg" width="148" height="80" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="images/index_15.jpg" width="148" height="249" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="38" alt=""></td>
</tr>
<tr>
<td>
<img src="images/mainb.jpg" width="414" height="5" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_17.jpg" width="414" height="206" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="206" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="40" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="69" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="147" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="414" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="74" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>


I hope someone can sort me out here, its driving me mad :mad:
Rowsdower!
06-02-2009, 11:08 PM
Hello and welcome to the forums!

This is a totally sideways response to your question but a direct answer doesn't make any sense here -- there's really no point because the whole thing needs to go anyway.

You have a few items of interest in your code. First and foremost it looks like you are using tables for basic HTML layouts. If so, you are best off to stop right now and switch to using <div> elements with CSS padding, margins, and positioning to create your layout. The reasons for this are many, but paramount among them are: much greater flexibility and ease of design changes, vastly smaller page sizes, faster loading with less bandwidth wasted, and better accessibility for the disabled.

If you need some basic starter material check these out:
http://www.csszengarden.com/
http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
http://www.cssplay.co.uk/layouts/

There is a small learning curve but a lot of benefit to doing page layouts this way. Making one <div> expand with new text won't wreck the others. So, that's it -- my sideways answer. :D

Next I see that you have not used an HTML "DOCTYPE" for your page. It is important for page presentation - ESPECIALLY CROSS-BROWSER - that you use and adhere to the rules of a DOCTYPE. Personally, I use XHTML 1.0 strict, but some people on these fora will push you toward HTML 4.01 strict.

This is what a blank document with those doctype declarations would look like:

XHTML 1.0 strict:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>title here</title>
</head>
<body>

<div>page content starts here...</div>

</body>
</html>


HTML4.01 strict:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>title here</title>
</head>
<body>

<div>page content starts here...</div>

</body>
</html>

Either will work, just so long as you stick with it (you can also pick a different charset if you prefer). Once you have adopted a doctype you should validate your code often using this free online tool (http://validator.w3.org/). With a valid doctype and valid HTML code to back it up, your page will take a huge leap forward in the cross-browser presentation.

Aside from that I also notice a syntax error in your inline CSS right here:<td rowspan="8" hight="1000" background="images/main.jpg" valign="top" style="padding:10px,10px,10px,10px;">
test<br>test<br>test<br>
</td>


The highlighted part should read like so:padding:10px 10px 10px 10px;

Or more simply, like this:padding:10px;

Check out http://www.w3schools.com/ for free HTML and CSS tutorials to brush up on these skills.

I'll get off of my soapbox now... :thumbsup:
RandomJim
06-03-2009, 12:01 AM
Thanks for the quick response :thumbsup:

This was made in photoshop then sliced, so i did not code it, the only bit i did was the adding the images to the background of the <td>
i know a little html, but not alot that is why i used photoshop

so is there no way to make it do what i want ?? :(
Rowsdower!
06-03-2009, 02:03 PM
When I load it up with dummy images nothing distorts for me when I add/remove text from the main section. The images have a set size so they never warp at all. The table cells get bigger with more text in the main section, but this just leaves space around the images rather than forcing them to resize. This is one of the limitations of table layouts (which are commonly produced by "what you see is what you get" editors).

You have rowspan="8" for this table cell which means that the 8 rows to the left and right of this section will expand to stay the same total height as this "main" area. Similarly, if you load content into one of the side cells instead of the main area, this main area will grow to meet the same overall height as the rest of the 8 rows combined. There is also a typo in the height attribute (spelled as "hight" by mistake).

Honestly, I don't have the time to figure this one out. This is a direct example of the restrictive nature of table layouts and how inflexible design changes, such as changing the height of one cell, can take tons of work to implement.

So, yes, there is probably a solution and you could take a few hours toying around with the table attributes to find it or you could invest that time in learning the <div> method and be done with it. It looks like you are just using a basic 3-column fixed-width layout, a free base of which can be found here:
http://www.dynamicdrive.com/style/layouts/item/css-fixed-layout-31-fixed-fixed-fixed/
or here:
http://www.cssplay.co.uk/layouts/flexible-3column-fix-flex-fix.html

I hate to beat a dead horse, but why not at least try to customize one of these for your site?
RandomJim
06-03-2009, 06:48 PM
cheers again mate :o

i will have a tinker with those CSS ones and see what i can come up with.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum