By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,090 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

table border question

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Should I assume that since no one is replying that this is the best approach
for this particular problem???

Peter Foti
Jul 20 '05 #2

P: n/a
"Peter Foti" <pe****@systolicnetworks.com> wrote:
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.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #3

P: n/a
"Jukka K. Korpela" <jk******@cs.tut.fi> wrote in message
news:Xn*****************************@193.229.0.31. ..
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
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.


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
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.