I absolutely agree Chris, Russ is a legend!
Thank you Russ
Grant
On 30/09/2011 10:25 PM, Chris Dimmock wrote:
Russ,
It's the Friday evening of a long weekend - and you take the time to
give code examples??
And you still can't see why everyone here thinks you are both a *Web
Standards* and *Nice Guy* Superhero?!?
Have a great weekend Russ.
I admire your dedication.
And so should all of us!!
;-)
Chris
Sent from my iPhone
On 30/09/2011, at 7:32 PM, Russ Weakley <[email protected]> wrote:
Hey Grant,
Try something like the code below:
1. The table markup is more accessible - <th> elements are very
important for screen readers
2. There are no presentational attributes (every time we include
presentational attributes, a fairy dies!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Grant Bailey</title>
<style type="text/css" media="screen">
.Table_Text
{
border-collapse: collapse;
width: 600px;
}
th, td
{
border: 1px solid #000;
padding: 1em 2em;
vertical-align: top;
text-align: left;
}
.no-border { border: none; }
</style>
</head>
<body>
<table class="Table_Text">
<thead>
<tr>
<td class="no-border"></td>
<th>Column 1 Title</th>
<th>Column 2 Title</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row 1 Title</th>
<td>Col 1 Row 1</td>
<td>Col 2 Row 1</td>
</tr>
<tr>
<th>Row 2 Title</th>
<td>Col 1 Row 2</td>
<td>Col 2 Row 2</td>
</tr>
</tbody>
</table>
</body>
</html>
On 30/09/2011, at 7:01 PM, Grant Bailey wrote:
Hello,
I'd be grateful for some help on this problem.
I need to display a table. No problem except that it is one of those
tables that have header columns on the left and right, which means
that the top left-hand cell should not appear (i.e. have no border).
Like this (please see attachment if the picture does not appear below):
<feegfdfj.jpg>
Here is my coding:
<table class="Table_Text" width="92.2%" border="1" align="center"
cellspacing="0">
<tr style="font-weight: bold; ">
<td style="border:none;"><br /></td>
<td style="text-align: center; ">Column 1 Title</td>
<td style="text-align: center; ">Column 2 Title</td></tr>
<tr>
<td style="font-weight: bold; ">Row 1 Title</td>
<td>Col 1 Row 1</td>
<td>Col 2 Row 1</td></tr>
<tr>
<td style="font-weight: bold; ">Row 2 Title</td>
<td>Col 1 Row 2</td>
<td>Col 2 Row 2</td></tr>
</table>
Unfortunately, all of the major browsers show the top-left cell with
a border (a bit fainter, but you can still see it), despite my
efforts (shown in code above) to render it invisible.
If someone could advise me how to make the cell truly invisible I
would be most grateful.
Thank you and kind regards,
Grant Bailey
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
