2 table questions

[comicw]

Hi,

I've got 2 table questions.
These may sound a bit stupid, but they have to be 'resolved'.

1) how do I state in html that a certain cell maintains its width and hight, because now, when I add, say, an image, those cells 'shrink'

2) I've typed some text and made some tables, but that causes problems: when I give my tables 'position: absolute', they place themselves on top of the text, and my 'plain' text doesn't move; and when I give them a "left" or "right" value, they're indeed left or right, but the text is put below and I have a blank area next to the tables.
So the question is: how do I get the text to fit nicely next to the tables?

[umm]

as a starting point:

Q1:

<table width="500" border="1" cellpadding="0" cellspacing="0"
align="center" summary="table summary here">

<caption style="text-align:left">Table Caption</caption>

<tr height="200">
<td width="200" valign="top">r1-c1</td>
<td width="300" align="center">r1-c2</td>
</tr>

<tr>
<td><p style="text-align:center">r2-c1</p></td>
<td align="right"><p>r2-c2</p></td>
</tr>
</table>

Q2:

As a general rule of thumb, I wouldn't be using css positioning to layout the page (my guess at what you are trying to do). Aside from the issues you have already encountered, you are very likely to get some interesting page displays in different browser types and versions. You can layout a page with tables or you can try using <div>'s with the css float property. The latter can be more problematic though.

Think about how you want to layout the page. You can nest a complete table inside a table cell (<td><table></table</td>) if you want.

[brothercake]

I'll concur with all of that except:

<tr height="200">

There is no height attribute for tables - don't rely on it.

[umm]

brothercake is right. The height attribute is not valid for <tr>, only <td> and <th>.

http://www.w3.org/TR/html4/index/attributes.html

[hairynugs6382]

CSS float position how does that work compared to CSS positioning. Is it better when load in different browsers/resolutions if so i would rather use float to layout my page!

[umm]

I would like to use float as well but I don't (for the moment) because of patchy browser support and different implementations of the CSS box model.

For example, IE5 and 6 measure the padding, border and margin in a <div> differently (well, in the case of IE6, it depends on the doctype). This can cause some differences in page displays (i'm still mostly in 'static' layout mode and haven't fully made the leap to 'liquid' layout mode yet - give it a year or so and I probably will have).

That doesn't mean there aren't stategies to get around rendering differences using float. Here is a good article if you want to consider alternatives to a table-based layout:

http://www.alistapart.com/stories/journey/

[comicw]

what does umm mean with 'table summary' and 'caption'? I've never seen those before...

[umm]

<table width="100%" summary="A description of the table with the aim of improving accessability for non-visual browsers.">

The caption puts a text above or below the table. It can be aligned to top (default) or bottom.

<caption align="bottom">Table Title</caption>

New CSS commands can put the caption on a side but I don't think those work yet. Here's a link for table info.

http://www.w3.org/TR/REC-html40/struct/tables.html

[comicw]

I've got a few more questions concerning these posts on this tread:

1) what does valign stand for? vertical align?
2) what's the r1-c1 etc. and what's their use
3) what's the best way to built tables: using <table width="75%"> or <table width="750"> Are there any advantages or disadvantages?
4) is there another site where I can learn more about using tables?

Thanks!


PS: As for my site, is someone willing to review the basic code/layout before it's being published, because I'm a novice and it'd be very helpful.

[Roy Sinclair]

1) what does valign stand for? vertical align?

Yes.

2) what's the r1-c1 etc. and what's their use

r1-c1 is just some ordinary text meant to show you where Row 1, Cell 1 would be. You'd replace it with your actual cell contents in real use.

3) what's the best way to built tables: using <table width="75%"> or <table width="750"> Are there any advantages or disadvantages?

Which one to use depends on the the layout, use a percentage when you want the cell to increase/decrease in size as a relationship to the rest of the table or page and use a fixed size when you need the cell to always remain the same size.

4) is there another site where I can learn more about using tables?

I'm sure there are but here's a good place too.