table border question

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Peter Foti - 31 Oct 2003 00:05 GMT

I have a table that contains 3 rows, and 2 columns. I would like a border
that surrounds the entire table, and then a border separating the left and
right columns, but no border separating rows. I was able to do this, but I
wasn't sure if this is the best approach (or if there is a cleaner
approach). I apologize in advance for posting code (but it's a small
amount, so I hope you'll forgive me). Here's the styles I used:

table.phonedisplay
{
border: 1px black solid;
}

table.phonedisplay td.left
{
border-right: 1px black solid;
}

And here's the HTML:

<table border="0" cellpadding="2" cellspacing="0" class="phonedisplay">
<tr>
<td class="left">AAAA</td>
<td>DDDD</td>
</tr>
<tr>
<td class="left">BBBB</td>
<td>EEEE</td>
</tr>
<tr>
<td class="left">CCCC</td>
<td>FFFF</td>
</tr>
</table>

Input appreciated. :)
Thanks,
Peter Foti

Reply to this Message

Peter Foti - 31 Oct 2003 20:11 GMT

Should I assume that since no one is replying that this is the best approach
for this particular problem???

Peter Foti

Reply to this Message

Jukka K. Korpela - 31 Oct 2003 20:41 GMT

> Should I assume that since no one is replying that this is the best
> approach for this particular problem???

If you get no reply, you should assume that you asked the wrong way,
primarily. In this case, there was nothing particularly wrong with your
formulation of the question, though a URL would virtually always help.

What you are using is a combination of CSS and HTML to get the desired
appearance, and it looks like a practical approach to me. In principle, you
could replace the cellspacing="0" attribute by the CSS rule
table.phonedisplay { border-collapse: collapse; }
but it isn't a big issue if you ask me.

You're using a class attribute in the first cell of each row, and this is
the most practical way to be able to refer to the first column. In theory,
more advanced methods exist (like the selector td:first-child), but browser
support is too limited to make them feasible, mostly.

But your sketchy example really made me wonder whether the structure you
have chosen is best for the job. It means a table like
AAAA DDDD
BBBB EEEE
CCCC FFFF
and if I guess correctly, that's bad for accessibility, since the table
linearizes as AAAA, DDDD etc. and not AAAA, BBBB, CCCC etc. If the intended
reading order is what it seems to be, then it might be better to use a one-
row table of one-column tables or, more naturally perhaps, a sequence of
one-row tables which will be floated to the left to make them appear side by
side. These approaches might imply somewhat easier methods for producing the
desired borders.

Signature

Yucca, http://www.cs.tut.fi/~jkorpela/

Reply to this Message

Peter Foti - 31 Oct 2003 22:11 GMT

> You're using a class attribute in the first cell of each row, and this is
> the most practical way to be able to refer to the first column. In theory,
> more advanced methods exist (like the selector td:first-child), but browser
> support is too limited to make them feasible, mostly.

That was what I was most curious about.

> But your sketchy example really made me wonder whether the structure you
> have chosen is best for the job. It means a table like
[quoted text clipped - 8 lines]
> side. These approaches might imply somewhat easier methods for producing the
> desired borders.

Yes, I debated whether or not to use a table, and whether or not to worry
about accessibility for this example. You see, this example was to create a
sort of picture of what a phone LCD display might look like, and would
probably only be used as part of some internal documentation (or possibly
for my use only). My initial thought was that it was sort or a table, but
giving it more thought I think I probably should have looked into a
table-less design instead and positioned each item.

Thanks for you input.
Regards,
Peter

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2003

table border question