FRIHOST ē FORUMS ē SEARCH ē FAQ ē TOS ē BLOGS ē COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


HTML tables with irregular rows and/or columns





The Philosopher Princess
I want to understand how to code HTML tables with irregular rows and/or columns. I have found lots of good help on creating basic HTML tables but not (yet) exactly what Iím looking for.

To picture what I want visually, imagine an online magazine style website with a table with 3 main columns. Within each of the columns are a number of rows but they do not (necessarily) match up horizontally with the rows in the other 2 columns -- and, in fact, the rowsí (actually, cellsí) heights should change depending on the amount of their contents. To make it more complicated, imagine adding some sub-columns within some of these rows/cells, and even more row and column subdivisions.

Using horizontal lines doesnít (seem to) meet my needs.

FYI I use FrontPage 2000ís WYSIWYG for whatever it can provide, however, I constantly switch to the actual HTML to womanipulate the code into what I want. FrontPageís [Table]>>[Draw Table] can do what I want just a little bit, but not at all to the complexity Iíd like.

I would appreciate y'all's suggestions.
izcool
One way that you can make it very complex is by you to make nested tables (a table that is inside of another table). Here's an example in HTML of a nested table with irregular columns :

Code:

<table border='1' width='100%'>
<tr valign='top' align='center'><td width='33.3%'>1</td><td width='33.3%'>2</td><td width='33.3%'>3</td></tr>
<tr valign='top' align='center'><td colspan='3'><table border='1' width='100%'><tr valign='top' align='center'><td width='50%'>4</td><td width='50%'>5</td></tr></table></td></tr>
<tr valign='top' align='center'><td width='33.3%'>6</td><td width='33.3%'>7</td><td width='33.3%'>8</td></tr>
<tr valign='top' align='center'><td colspan='3'><table border='1' width='100%'><tr valign='top' align='center'><td width='25%'>9</td><td width='25%'>10</td><td width='25%'>11</td><td width='25%'>12</td></tr></table></td></tr>
</table>


This would look like :



I know that the code is messy (I scripted it by hand) but if you created the tables in FrontPage, the code would be much cleaner. I hope you get the point that I'm trying to make for you. Smile Good luck with it.

- Mike.
The Philosopher Princess
Thank you, Mike. It was my oversight to not mention that I do already know how to make nested tables. However, they do not (seem to) fully address what I need. (Your code is great, especially for having been created by hand so fast!)

I also did not mention that having all borders meet each other is important to me.

Consider the original table having its Cell Padding at, say, 10. (This is so that the text and images inside have margins and donít ďrun intoĒ the side borders.) In this case, the borders of any nested table will unfortunately not meet the borders of the parent table. So, the visual effect of nested tables will not be quite the same as if it were all one table.

Maybe you have some further ideas, given this new information.
otaku
Glish.com has an awesome article about this using CSS.

http://glish.com/css/7.asp
The Philosopher Princess
Yeah, that glish.com site has lots of stuff that Iíll have to check out. It looks like working with CSS tables is another whole animal than working with HTML tables! Iím not opposed to that, but so far I donít find the code for my example.

Iíll keep looking, but hereís whatís fascinating: the home page at <glish.com> shows exactly what Iím wanting to do.

See how they have the 2 main columns on the left, each with variable-sized rows/cells, which will change height depending on their contents. And yet, they are using Cell Padding (or an equivalent) with their text to create margins, *and* the horizontal table borders meet the vertical borders. So, how do they do that?

Thanks for the lead, otaku!

Hey, Mike (or anyone), do you think ďregularĒ HTML table code can produce what glish.com displays?
izcool
Thanks for that compliment. Smile I've been programming websites ever since the start of 2002 and I've gained a lot of experience since then. I'm starting to wear off from it but I still have it all in memory. I don't use very much CSS so if you were to sketch up a rough drawing of the table you need in Microsoft Paint (or your favorite art program) it is more than likely possible to do. From only description, it's hard to try to "imagine" it. Very Happy

I didn't see that you were new to the forum. Let me be the first to welcome you to FriHost. Wink

- Mike.
digibluez
CSS is so easy.First i was makeing all in tables as well,as i thought it would be too hard to do it in <div> tags.I was really confused and did not know what to do wiht them. But i only needed about 3 days to learn basics and voala,now i only do CSS.Can't imagine going back to tables anymore.Its really silly to put common content in tabular data form.

http://www.projectseven.com/index.htm
http://css.maxdesign.com.au/listamatic/
http://www.websitetips.com/css/#scrollbars
http://www.cssbeauty.com/
http://www.stylegala.com/
http://css.maxdesign.com.au/floatutorial/tutorial0815.htm
http://www.designdetector.com/2005/09/css-gradients-demo.php
http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_2/
http://gmpg.org/xmdp/description
http://www.cssreboot.com/support/#badges
http://www.unmatchedstyle.com/
http://www.xulplanet.com/references/elemref/ref_StyleProperties.html
The Philosopher Princess
Holy Moly, digibluez! That is a lot of CSS! Shocked Iím overwhelmed! Thanks bunches for the new-to-me sources. I can see thereís a lot in there, and I will keep these for references. But isnít it amazing that I still canít find even 1 example that shows what Iím looking for?

Having to read all those CSS sites to find my 1 piece of table syntax makes me feel like Iím searching for the definition of a word, hidden somewhere in a whole encyclopedia Brick wall. Iím not trying to become an expert. Iíd like to learn enough to display, exactly how I want to display, some of my non-web-related expertises.

Gosh, back when I was a ďregularĒ programmer (Pascal, Ada, C) I could get the entire syntax for a new language, but is it true that thereís no such thing for HTML and CSS? Every source I find has only a portion of whatís possible. Iím probably just not looking in the right places.
The Philosopher Princess
From izcool Mike:
Quote:
I didn't see that you were new to the forum. Let me be the first to welcome you to FriHost.

Well, gah-ah-ah-lly, thank you! Itís nice to be here. While Iím used to email list discussions, Iím brand new to online forum discussions. Iím learning new methods here.

Quote:
if you were to sketch up a rough drawing of the table you need in Microsoft Paint (or your favorite art program) it is more than likely possible to do. From only description, it's hard to try to "imagine" it.

Youíre right that imagining is not the same as seeing. Would you be so kind as to check out the top page of www.glish.com? As Iíd mentioned earlier:
Quote:
See how they have the 2 main columns on the left, each with variable-sized rows/cells, which will change height depending on their contents. And yet, they are using Cell Padding (or an equivalent) with their text to create margins, *and* the horizontal table borders meet the vertical borders. So, how do they do that?
sonam
You can do that with nested tables but donít use table padding. Instead use CSS with "p" padding. In that case all nested tables will fit each other.

Maybe this simple CSS example can help you little bit:

<style type="text/css">
<!--
.bottom { border: #CCCCCC dashed; border-width: 0px 0px 2px}
.right { border: #CCCCCC dashed; border-width: 0px 2px 0px 0px}
.bottomandright { border: #CCCCCC dashed; border-width: 0px 2px 2px 0px;}
p { padding: 10; }
-->
</style>

Sonam
simplyw00x
You can set rowspan and colspan on TDs to make them 'span' several rows or columns, and fake irregular tables.
The Philosopher Princess
My initial testing of sonamís and simplyw00xís latest ideas is looking promising. Thank yíall!
izcool
To me it looks like that site is in CSS. I've looked in the source code for that page briefly and it looks like it's that way. You could use nested tables with that too, if you really wanted to, it wouldn't be that hard. It would just require some scripting.

Here's what I've come up in only a few minutes that's similar to what that page simulates :

Code:

<html>
<head>
<title>Test Table Page</title>
</head>
<body leftmargin='0' rightmargin='0' topmargin='0' marginwidth='0' marginheight='0'>

<table border='0' width='100%' cellpadding='0' cellspacing='0'><tr valign='top'>

<td width='68%' bgcolor='#FFFFCC' align='right'><font size='5'><b>glish is written in a pseudo unification formalism</b></font><br><br>

<table border='0' width='100%' bgcolor='#FFFFFF'><tr valign='top'>
<td width='40%'><center><font size='5'><b>offline journal</b></font></center><br>

<table border='1' width='100%'><tr valign='top'><td><b>Today</b></td></tr><tr valign='top'><td>Entry description here</td></tr></table><br><br>
<table border='1' width='100%'><tr valign='top'><td><b>Yesterday</b></td></tr><tr valign='top'><td>Entry description here</td></tr></table><br><br>

</td>
<td width='60%'><center><font size='5'><b>online weblog</b></font></center><br>

<table border='1' width='100%'><tr valign='top'><td><b>Today</b></td></tr><tr valign='top'><td>Entry description here</td></tr></table><br><br>
<table border='1' width='100%'><tr valign='top'><td><b>Yesterday</b></td></tr><tr valign='top'><td>Entry description here</td></tr></table><br><br>

</td>

</tr></table>
</td>

<td width='4%'> </td>

<td width='28%'><br><br><br><b>text preferences</b><br><br>
Blah blah blah<br><br>Blah blah blah<br><br>Blah blah blah<br><br>Blah blah blah<br><br></td>

</tr></table>

</body>
</html>


Here's a look at it from my screen :



I know that the code is messy (which I wrote myself again) and doesn't look exactly like that website, but that's all in HTML with no CSS. CSS would dress it up and all to make it pretty, but that's just my deminstration on what you could do. I found that there's a small problem with my code, if you make the right side of the page longer than the left side of the page, the yellow background continues on the left side. Whoops. Razz I could fix it, but it's fine for the deminstration purpose that I'm setting it up for.

- Mike.
The Philosopher Princess
There you go again, izcool Mike -- being handy! Very Happy It took me all of a minute to copy your code to a new HTML page, and to begin womanipulating it in FrontPageís WYSIWYG and checking out what happens in the code itself. The innards of the table float up and down beautifully as desired. Now Iíll just have to see if I can get the borders perfect as I want.

Thanks a bunch!
Related topics
Reply to topic    Frihost Forum Index -> Scripting -> Php and MySQL

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.