Image in a table in XHTML.

showandbeshown · Dec 6, 2007

Hi,

I use xhtml and I need to create a simple table which consists of 2
columns and 1 row. The firs column of the table will contain some text
and the second one an image. The width of the both columns is fixed
and the height of the row is defined by the amount of the text in the
first column. I would like my image adjusts the hight of the row (i.e.
automatically stretches if it is needed).

Is that possible to do within xhtml? I now that I can set the height
of the image explicitly. I need to do something like height=100%. But
it seems to be not supported in xhtml.

Thank you in advance.

showandbeshown · Dec 6, 2007

I found something that looks like what i need:
<img src="img/l.jpg" style="width: 100%; height: 100%" alt="" /></td>

However, it does not work.

Why? I do explicitly say that the image
should take the 100% of the height and it does not take. You can see
how it looks like here:
http://www.showandbeshown.com/headtail.php

rf · Dec 6, 2007

I found something that looks like what i need:
<img src="img/l.jpg" style="width: 100%; height: 100%" alt="" /></td>

However, it does not work. Why? I do explicitly say that the image
should take the 100% of the height and it does not take. You can see
how it looks like here:
http://www.showandbeshown.com/headtail.php

You should be using l.jpg as a background for that cell. It wall
automatically repeat and fill up the cell.

showandbeshown · Dec 6, 2007

You should be using l.jpg as a background for that cell. It wall
automatically repeat and fill up the cell.

If I use <td background="image.jpg">, it helps only but only
partially. Because, it looks like I want, but the document becomes
"not valid xhtml document" since "there is not background attribute
for the <td> element".

rf · Dec 6, 2007

If I use <td background="image.jpg">, it helps only but only
partially. Because, it looks like I want, but the document becomes
"not valid xhtml document" since "there is not background attribute
for the <td> element".

Then specify it using CSS.

XHTML is not viable on the web anyway. IE simply does not understand it and
you are serving it up as as text/html so browsers are error correcting it
back to HTML anyway.

HTML 4.01 strict is the way to go.

dorayme · Dec 6, 2007

<[email protected]
m>,

Hi,

I use xhtml and I need to create a simple table which consists of 2
columns and 1 row. The firs column of the table will contain some text
and the second one an image. The width of the both columns is fixed
and the height of the row is defined by the amount of the text in the
first column. I would like my image adjusts the hight of the row (i.e.
automatically stretches if it is needed).

Is that possible to do within xhtml? I now that I can set the height
of the image explicitly. I need to do something like height=100%. But
it seems to be not supported in xhtml.

Thank you in advance.

Amazingly:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Fit to cell</title>
<style type="text/css">
* {margin: 0; padding: 0;}

img {
display: block;
width: 10em;
height: 100%;
}

td {
width: 10em;
padding: 0;
border: 0px solid #000;
}

table {border-collapse: collapse;}
</style>
</head>
<body>

<table cellspacing="0"><tbody><tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque augue.Lorem ipsum dolorLorem ipsum dolor sit amet,
consectetuer adipiscing elit. Pellentesque augue.Lorem ipsum
dolorLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque augue.Lorem ipsum dolor </td>
<td><img src="stretch.jpg" alt="" /></td>
</tr></tbody></table>

</body>
</html>

works, or at least gives the illusion, only in Safari 2.0.4 on a
Mac.

I think you will really require scripting for the img to reliably
get the height of the left cell depending on the user font size
etc...

Mark · Dec 6, 2007

If I use <td background="image.jpg">, it helps only but only
partially. Because, it looks like I want, but the document becomes
"not valid xhtml document" since "there is not background attribute
for the <td> element".

I'm guessing you want a fluid rounded corner box with transparent corners?

If so, you could do it this way:

http://www.lester1.eclipse.co.uk/1/

It's ugly, but not as ugly as your table version.

This uses a variation of the "sliding doors" technique, which basically
uses a very wide corner image to span the entire width of the box and
"slide out" when the box expands. Transparency causes quite a few issues
with sliding doors, which is usually done using nested divs. That's why
I had to resort to empty divs.

There might be a more elegant way of doing this with transparent corners
but I can't think of one.

Wonky image crisis	0	Apr 5, 2024
Image upload not working in browser	4	Sep 9, 2022
XHTML - how extend/create ELEMENT body in my DTD?	0	Oct 29, 2019
How can I find occurrences of a column name FPPaymentID in the entire database (e.g table, stored procedure etc) in SSMS?	2	Jun 20, 2023
Im having trouble containing a title an image and a button	2	Oct 26, 2022
Add recipes using JavaScript in table	20	Apr 17, 2023
Button image duplicating pygame!	1	Dec 7, 2022
Button image duplicating pygame!	0	Dec 7, 2022

Image in a table in XHTML.

showandbeshown

showandbeshown

rf

showandbeshown

rf

dorayme

Mark

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads