On Fri, Aug 6, 2010 at 8:31 AM, tedd <tedd.sperl...@gmail.com> wrote:
> While it may not be obvious, the statement:
>
> <table border="1">
>
> is flawed (IMO).
>
> The "best" way to handle this is to define a class (or id) for the table in
> a css file and then set the border (i.e., styling) to whatever you want. For
> example, your HTML would look like:
>
> <table class="my_table">
>
> And your CSS would contain:
>
> .my_table
> {
> border: 1px solid black;
> }
>
I more or less agree with you, but sometimes it's technically a little
more difficult than that. The border attribute on the table tag
affects not only the table itself, but also the cells inside it. The
CSS attribute only draws a border around the table. I believe the CSS
equivalent of how most browsers (I tested Fx 3.6.8, IE 7, Google
Chrome 5, Opera 10.53, and Safari (Windows) 5.0.1) render <table
border="1"> takes a little more:
table.my_table,
table.my_table > thead > tr > th,
table.my_table > tbody > tr > th,
table.my_table > tfoot > tr > th,
table.my_table > thead > tr > td,
table.my_table > tbody > tr > td,
table.my_table > tfoot > tr > td
{
border: solid 1px black;
}
And, of the browsers listed above, IE7 did not render the table
correctly. (I'm guessing it must not properly handle the child CSS
selectors.) If you do it without the child selectors:
table.my_table,
table.my_table th,
table.my_table td
{
border: solid 1px black;
}
All the browsers render it the same, but it has the side effect that
cells in nested tables also inherit the borders unless you do
something to exclude them:
table.my_table,
table.my_table th,
table.my_table td
{
border: solid 1px black;
}
table.my_table table,
table.my_table table th,
table.my_table table td
{
border: none;
}
As is often the case with CSS, that's a good bit more text to
accomplish the same effect as an older, smaller attribute. :-)
Andrew
--
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php
