Colspan - rowspan HTML Table

L

Logix

Hello!

I'm trying to make a sort of online page building system. In order to
do this, I represent my page using a HTML table. One of the most basic
templates would be a page divided in six equally proportioned
rectangles:

<table border="1" cellspacing="0" cellpadding="0" width="200"
height="200">
<tr>
<td colspan="2" rowspan="4">ABC</td>
<td colspan="2" rowspan="4">DEF</td>
</tr>
<tr>
<td colspan="2" rowspan="4">GHI</td>
<td colspan="2" rowspan="4">JKL</td>
</tr>
<tr>
<td colspan="2" rowspan="4">MNO</td>
<td colspan="2" rowspan="4">PQR</td>
</tr>
</table>

I was expecting that this would be displayed as follows:
|-------|-------|
| ABC | DEF |
|-------|-------|
| GHI | JKL |
|-------|-------|
| MNO | PQR |
|-------|-------|
As you can see when you copy-paste the snippet, this is not the case.
I cannot leave the colspan/rowspan attributes out because this table
is dynamically build using ASP. If I use a table with 4 columns and 12
rows, I can support a rather wide range of templates such as:
|---------------| |---------------| |-------|-------|
| ABC | | | | ABC | |
|---------------| | ABC | |-------| |
| DEF | | | | | DEF |
|---------------| |-------|-------| | GHI | |
| GHI | | DEF | GHI | | | |
|---------------| |-------|-------| |-------|-------| ...

So my question is: can anyone explain why the table isn't being
displayed as expected?
I've also read some posts in this newsgroup stating that the use of
tables to do things as described above is "symptomatic of poor table
technique". So I would like to ask if someone has other suggestions to
accomplish the features described above.

Thx in advance!

Joris
 
P

Philip Ronan

I cannot leave the colspan/rowspan attributes out because this table
is dynamically build using ASP. If I use a table with 4 columns and 12
rows, I can support a rather wide range of templates

I don't understand that.

You can dynamically build whatever you like in ASP. Including valid HTML.

At the moment your table is defined with overlapping cells, so it's no
surprise it isn't rendering properly.
 
H

Harlan Messinger

Hello!

I'm trying to make a sort of online page building system. In order to
do this, I represent my page using a HTML table. One of the most basic
templates would be a page divided in six equally proportioned
rectangles:

<table border="1" cellspacing="0" cellpadding="0" width="200"
height="200">
<tr>
<td colspan="2" rowspan="4">ABC</td>
<td colspan="2" rowspan="4">DEF</td>
</tr>
<tr>
<td colspan="2" rowspan="4">GHI</td>
<td colspan="2" rowspan="4">JKL</td>
</tr>
<tr>
<td colspan="2" rowspan="4">MNO</td>
<td colspan="2" rowspan="4">PQR</td>
</tr>
</table>

I was expecting that this would be displayed as follows:
|-------|-------|
| ABC | DEF |
|-------|-------|
| GHI | JKL |
|-------|-------|
| MNO | PQR |
|-------|-------|
As you can see when you copy-paste the snippet, this is not the case.

Of course not. If you read a guide to HTML to find out what rowspan
and colspan do you'll find that out. Or go to the spec:
http://www.w3.org/TR/html4/struct/tables.html#h-11.2.6.1

For example, if the TD containing ABC spans four rows and two columns,
then that means it occupies the first two columns in the first four
rows (TRs) of the table. If it's occupying the first two columns in
the second row, then GHI is shoved over to the third column of the
second row. Moreover, while every TD in the table is denoted as
spanning four rows, your table doesn't even HAVE four rows for any of
them to span. It only has three.
I cannot leave the colspan/rowspan attributes out because this table
is dynamically build using ASP.

That makes no sense.
If I use a table with 4 columns and 12
rows, I can support a rather wide range of templates such as:
|---------------| |---------------| |-------|-------|
| ABC | | | | ABC | |
|---------------| | ABC | |-------| |
| DEF | | | | | DEF |
|---------------| |-------|-------| | GHI | |
| GHI | | DEF | GHI | | | |
|---------------| |-------|-------| |-------|-------| ...

So my question is: can anyone explain why the table isn't being
displayed as expected?

See what your expectations are after you've learned how rowspan and
colspan work.
 
S

Sam Hughes

(e-mail address removed) (Logix) wrote in @posting.google.com:
Hello!

I'm trying to make a sort of online page building system. In order to
do this, I represent my page using a HTML table. One of the most basic
templates would be a page divided in six equally proportioned
rectangles:

<table border="1" cellspacing="0" cellpadding="0" width="200"
height="200">
<tr>
<td colspan="2" rowspan="4">ABC</td>
<td colspan="2" rowspan="4">DEF</td>
</tr>
<tr>
<td colspan="2" rowspan="4">GHI</td>
<td colspan="2" rowspan="4">JKL</td>
</tr>
<tr>
<td colspan="2" rowspan="4">MNO</td>
<td colspan="2" rowspan="4">PQR</td>
</tr>
</table>

I was expecting that this would be displayed as follows:

As just an ASCII art image of a table? :D
|-------|-------|
| ABC | DEF |
|-------|-------|
| GHI | JKL |
|-------|-------|
| MNO | PQR |
|-------|-------|
As you can see when you copy-paste the snippet, this is not the case.
I cannot leave the colspan/rowspan attributes out because this table
is dynamically build using ASP.

Why can't you?
If I use a table with 4 columns and 12
rows, I can support a rather wide range of templates such as:
|---------------| |---------------| |-------|-------|
| ABC | | | | ABC | |
|---------------| | ABC | |-------| |
| DEF | | | | | DEF |
|---------------| |-------|-------| | GHI | |
| GHI | | DEF | GHI | | | |
|---------------| |-------|-------| |-------|-------| ...

Templates? Hrm? Templates for what? Tabular data I presume!
(Muahaha evil CSS zealot strikes out!)
So my question is: can anyone explain why the table isn't being
displayed as expected?

Yes. You're skipping table rows. You need markup for the second,
third, and fourth table rows:

<table border="1" cellspacing="0" cellpadding="0" width="200"
height="200">
<tr>
<td colspan="2" rowspan="4">ABC</td>
<td colspan="2" rowspan="4">DEF</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td colspan="2" rowspan="4">GHI</td>
<td colspan="2" rowspan="4">JKL</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td colspan="2" rowspan="4">MNO</td>
<td colspan="2" rowspan="4">PQR</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

However, you _claim_ to be using a dynamically built table with ASP.
If that's the case, make your program smarter so that it reduces
colspans so that they have a common denominator of one, and then
reduces rowspans so that _they_ have a common denominator of one.
I've also read some posts in this newsgroup stating that the use of
tables to do things as described above is "symptomatic of poor table
technique". So I would like to ask if someone has other suggestions to
accomplish the features described above.

Since you mentioned templates, I assume you are using tables for
layout. Since tables are for tabular data, this isn't a good use of
tables. CSS does the trick in a much better manner.
 
S

Sjeef

<table>
<tr>
<td>ABC</td>
<td rowspan="3">&nbsp;</td>
<td colspan="2" rowspan="2">ABC;</td>
<td rowspan="3">&nbsp;</td>
<td>ABC</td>
<td rowspan="3">GHI;</td>
</tr>
<tr>
<td>DEF</td>
<td rowspan="2">DEF;</td>
</tr>
<tr>
<td>GHI</td>
<td>DEF</td>
<td>GHI</td>
</tr>
</table>


Gerard Schaefers
Amsterdam-NL
 
S

SM

Sjeef said:
<table>
<tr>
<td>ABC</td>
<td rowspan="3">&nbsp;</td>
<td colspan="2" rowspan="2">ABC;</td>
<td rowspan="3">&nbsp;</td>
<td>ABC</td>
<td rowspan="3">GHI;</td>
</tr>
<tr>
<td>DEF</td>
<td rowspan="2">DEF;</td>
</tr>
<tr>
<td>GHI</td>
<td>DEF</td>
<td>GHI</td>
</tr>
</table>


Gerard Schaefers
Amsterdam-NL


I'm really confused.

That code seems to be so accurate and clean and small.

I've tried Dreamweaver, Front Page and Adobe Photoshop and every damn
thing is giving me different code for tables.

They just confuse me.

It looks to me, that none of programs can really work with tables as
good as they can be done manually in Notepad.

Where can I learn to code tables like that?

I mean manually or there is a program which does that?

Just few basic rules, please...


TIA
 
S

SM

Mark said:
Why would you want to? Tabular data is rarely that complicated.

That's why I love it all ready. Css with such layout and compatible with
most browsers would a real challenge do do it.

At least for me.

They have one thing common. They are ugly!

Web design is an art. It's advertising. Have to catch an eye. Have to be
cool, unique in every possible way.

That's how the public wants it. Have to be... cool.

I understand that table are not meant to be a layout tool but... they
were adopted by majority professionals to be a layout tool and most pro
web designers are using them that way.

90% web templates are made on tables.

Someone here wrote, that simple tables with css is an ideal combination.

Also brucie wrote that in most cases use tables instead of css.

That code of tables looks so clean and simple that IMHO any css would be
much bigger, more complex to achieve, what that little code have done.

I'm not trying to be difficult and I fully understand the goal to
achieve nice layouts with as little code as possible and free of html'
'soup'.

And that code do just that. Just add some pisc, menus, css.

Since IE is not fully compatible with CSS, before he will, I would
prefer to work with simple tables.

When IE will drop to 50% of current usage, than will be time to change
into pure css and let IE die in shame.

That's just MHO and of course I could be dead wrong.

:)
 
S

Sjeef

SM said:
I'm really confused.

That code seems to be so accurate and clean and small.

I've tried Dreamweaver, Front Page and Adobe Photoshop and every damn
thing is giving me different code for tables.

They just confuse me.

It looks to me, that none of programs can really work with tables as
good as they can be done manually in Notepad.

Where can I learn to code tables like that?

I mean manually or there is a program which does that?

Just few basic rules, please...


TIA

Just use the HTML-kit and don't forget to load the several plugins on this
issue.
You find the kit here and it is free:
www.chami.com

Gerard Schaefers
Amsterdam - NL
 
L

Logix

Hello everybody!

First off all: thank you for your reactions: it made me realize that
using tables for layout just complicated things... I've done some
reading this morning and decided to go with CSS.

I've included my test page below. It contains all test layouts I want
to create using my routine (WOOHOO!). I know it's rather long, but
please just copy-paste the code in a HTML editor and check it out.

You'll see that I've got some problems with implementing the last 3
layouts. Do any of you have any ideas of what could be wrong? Thx!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #CCCCCC;
}
..gridlightblue
{
background-color: #99CCCC;
border: 1px solid #666666;
font-size: 18px;
font-weight: bold;
color: #003366;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;

}
..gridlightblue A
{
color: #003366;
text-decoration: none;
}
..griddarkblue {
text-align: center;
vertical-align: middle;
background-color: #003366;
border: 1px solid #666666;
font-size: 18px;
font-weight: bold;
color: #99CCCC;
margin:10px 0px 0px 10px;
float:left;
}
..griddarkblue A
{
color: #99CCCC;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">MNO</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">PQR</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">JKL</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:210px;height:145px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:210px;height:145px;"><a
href="#">DEF</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:300px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:300px;"><a
href="#">DEF</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:210px;height:300px;"><a
href="#">ABC</a></div>
</div>
<h1>TESTING...</h1>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:210px;height:145px;"><a
href="#">GHI</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:210px;height:145px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">GHI</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
<div class="griddarkblue" style="width:210px;height:93px;"><a
href="#">MNO</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:210px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">MNO</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:210px;height:93px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">MNO</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:300px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">GHI</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:300px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:196px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">MNO</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:210px;height:93px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:196px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
</div>
<h1>PROBLEMS...</h1>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:300px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">GHI</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:300px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:210px;height:93px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:196px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
</div>
</body>
</html>


Kind regards,

Joris
 
B

Brian

SM said:
Web design is an art. It's advertising. Have to catch an eye. Have to
be cool, unique in every possible way.

Says who? Where did you get the idea that such things will make a site
successful? Put another way: How can you know that a site is successful
*because* it is eye-catching? and how would you know if an eye-catching
site was successful for some other reason, like, oh, say, compelling
content?
That's how the public wants it. Have to be... cool.

And what, you conducted an opinion survey?
 
S

SM

Brian said:
Says who?



It's obvious. Just look around. What kind of design are offered and
used. That market is self regulating. The same with design of CD covers,
book covers, newspaper pages, advertising pamphlets etc.

Humans do love a nice things and innovative. Pleasant to look at. Like
Claudia Shiffer.


;-P

or Jaguar, or inside a home.


Where did you get the idea that such things will make a site
successful? Put another way: How can you know that a site is successful
*because* it is eye-catching? and how would you know if an eye-catching
site was successful for some other reason, like, oh, say, compelling
content?



There are many examples of clever advertising and great successes behind
some clever tricks.


Web design is nothing else, just another element of advertising
industry. And will go that way regardless someone likes it or not.

Great looking web page will never hurt. And that the bottom line.

That's democracy my friend. People will decide what they like or what
they are not.

It doesn't matter how hard someone will push in other way, majority will
prevail.

And smart thing is to follow majority in this case.

I would not say that css is better or tables are better because I'm not
good enough to be a judge of that. I'm trying to learn both.

But... i know what I like and most people and they don't care how is
done. They just like it or not.

And what, you conducted an opinion survey?


No need to have a survey. It's a common knowledge.

Make something 'cool' and get "wow" from the public, and you are successful.

:)


Other thing... It's very hard to design a great layout without WYSIWYG.

Again most templates are made in FPage or Dreamweaver.

Of course pays off to know html and css in details to correct errors and
mistakes.

Regards...
 
S

SM

SM wrote:

Second thought.

I think to do a great looking page you need a art designer, skilled in
Photoshop or other GFX program and person, who is able to put it on the web.


Sometimes one persong can do both.


Sometimes...
 
B

Brian

Just look around. What kind of design are offered and used.

I get the feeling you're ignoring what I wrote for a reason, and I don't
want to be trolled past this message. One more time:

How do you know that a popular site is popular because of its visual
design, and not because of its content?
That market is self regulating.

Life is more than a market.
The same with design of CD covers, book covers,

Neither of which bear much resemblence to a web page.
newspaper pages,

This is getting silly. Do you believe that _The NY Times_ is widely read
because of its attractive visuals? Or do you suppose that perhaps people
regard it as trustworthy.[1]
No need to have a survey. It's a common knowledge.

Read: "I have not a shred of evidence, but if I repeat it, it'll seem
convincing."


[1] I'm not arguing that _The NY Times_ *is* trustworthy, but that
discussion is best left to a media forum.
 
S

SM

Brian wrote:


SM wrote:
This is getting silly. Do you believe that _The NY Times_ is widely read
because of its attractive visuals? Or do you suppose that perhaps people
regard it as trustworthy.[1]



I didn't say that. What I'm saying, the most are trying hard to look
attractive. Look how much paint ladies are using.

And it works!

Of course you'll go for a news to NYT and not for a beauty.

:)

http://www.nytimes.com/

Read: "I have not a shred of evidence, but if I repeat it, it'll seem
convincing."



Exactly. The best example is a... toilet paper!

Has the only purpose. Not a very noble one, but is essential to have it.

And they are employing a graphic designers to make damn thing look great!


When I'm looking for tutorial on css or html, I'm not expecting beauty,
but a well organized pages with great contents.


[1] I'm not arguing that _The NY Times_ *is* trustworthy, but that
discussion is best left to a media forum.




I think I know what you are trying to say here!


;-D


Will be better to leave the subject at the stage, that we have agreed to
disagree with each other on the subject of beauty of web pages.


Cheers...
 
M

Mark Parnell

They have one thing common. They are ugly!

Their purpose is to demonstrate how to lay a page out using CSS instead
of tables. They are not intended as examples of good design.

Whether you use tables or CSS has nothing to do with how good your
design looks. Sure, you can make great looking designs with tables, and
really ugly ones with CSS. But you can also make really ugly ones with
tables, and good looking ones with CSS.

The way your car engine is assembled doesn't affect the colour of the
car, does it?
 
J

James Pickering

SM said:
Web design is an art. It's advertising. Have to catch an eye. Have to be
cool, unique in every possible way.

That's how the public wants it. Have to be... cool.

It all depends on your audience and the objectives of your Web page
content. My audience is quite satisfied with my plain layout according
to the extensive feedback I receive.

James Pickering
http://www.jp29.org/
 
J

James Pickering

SM said:
Web design is an art. It's advertising. Have to catch an eye. Have to be
cool, unique in every possible way.

That's how the public wants it. Have to be... cool.

It depends on your audience and the objectives of your Web pages.

James Pickering
http://www.jp29.org/
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top