View Full Version : How the scope attribute of the th and td works?

09-21-2006, 08:36 AM
hi, I don't know how to make the scope attribute of the th and td element works. I have created a test file to see how this works. However, I don't saw any different.

what is the different between col, row, colgroup and rowgroup? is there any code mistake ?
I have little bit experenice with col as its allow for vertical table head. but other not.

<table border="1">
<colgroup span="3">
<th scope="colgroup"><div>Name</div>(English)</th>
<td>test string 1</td>


09-21-2006, 08:55 AM
You define a colgroup spanning three columns where there are only two. Apart from that, a colgroup offers a way of controlling the columns in that group specifically from other columns; think about styling with CSS. Also, you can specify a width attribute to set the width of the columns in the colgroup.

In your example, nothing about the colgroup changes the columns it contains, so the visual rendering is no different from when it wouldn't be there.

There are no row and rowgroup elements; a row in a table is implemented by the tr element, containing one or more th and/or td elements.
Rows can be grouped into row groups by the thead, tfoot and tbody elements.

The scope attribute can be used to define the scope of a th element; it likely won't result in a visual rendering effect, but is primarily used by user agents that present a table in serialised form, such as screen readers.

09-21-2006, 12:59 PM
...Screeen Reader ?

I'am sorry, I haven't used this attribute before, and I have refered to few resources.
Such as w3cshools.com and some html book etc.

For instance, w3cshools.com written as:
attribute: scope
value: col, colgroup, row, rowgroup
description: Specifies if this cell provides header information for the rest of the row that contains it (row), or for the rest of the column (col), or for the rest of the row group that contains it (rowgroup), or for the rest of the column group that contains it

following is some code that show me some usage of scope attribute:

<div class="inform">
<legend>Enter a piece of text and hit "Show text"!</legend>
<div class="infldset">
<table class="aligntop" cellspacing="0">
<th scope="row">Text to show<div><input type="submit" name="show_text" value="Show text" tabindex="2" /></div></th>
<input type="text" name="text_to_show" size="25" tabindex="1" />
<span>The text you want to display.</span>

as I can see here, the th element now became a row headers, instead of column headers. so, how can I modify it to show the effect or the truth is none effects with be present at all.

could you mind build a sample? sample is better to understand.

Thank you very much.

P.S. w3cshools.com (http://www.w3schools.com/tags/tag_th.asp)

09-21-2006, 04:07 PM
This has everything to do with accessibility; read to following two-page article and all should become clear to you: Creating Accessible Tables (http://www.webaim.org/techniques/tables/) (especially page 2, "data tables").