CODEWITHSUNDEEP
html
user1554264
user1554264

Reputation: 1224

HTML <th> col attribute

I was just wondering if that by default a HTML <table> element implicitly applies the attribute scope="col" to the first group of <th> elements contained within the <thead> element?

When I render the first set of HTML below in a browser it seems to automatically detect that the <th> cells for Jan, Feb, March, April etc are headers for a column. So is it the case the scope="col" does not need adding to the markup as it will be automatically rendered this way? 

 <table>
    <caption>2009 Employee Sales by Department</caption>
    <thead>
        <tr>
            <th></th>
            <th>Jan</th>
            <th>Feb</th>
            <th>March</th>
            <th>April</th>
            <th>May</th>
            <th>June</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Firefox</th>
            <td>37.1</td>
            <td>36.6</td>
            <td>36.3</td>
            <td>35.8</td>
            <td>35.2</td>
            <td>34.4</td>
        </tr>
        </tr>   
    </tbody>
</table>

This second set of markup includes scope="col" added to the tags for Jan, feb, March April etc. Is it necessary? As the example above seems to render these <th> as columns anyway without scope"col".

I am aware that the scope attribute has no visual effect in ordinary web browsers, but can be used by screen readers. So should it be added for the purpose of better semantic markup and accessibility?

<table>
        <caption>2009 Employee Sales by Department</caption>
        <thead>
            <tr>
                <th scope="col"></th>
                <th scope="col">Jan</th>
                <th scope="col">Feb</th>
                <th scope="col">March</th>
                <th scope="col">April</th>
                <th scope="col">May</th>
                <th scope="col">June</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Firefox</th>
                <td>37.1</td>
                <td>36.6</td>
                <td>36.3</td>
                <td>35.8</td>
                <td>35.2</td>
                <td>34.4</td>
            </tr>
            </tr>   
        </tbody>
    </table>

Upvotes: 6

Views: 3020

Answers (2)

Dorvalla
Dorvalla

Reputation: 5240

You can just specify the meaning of the table more with the scope attrribute. In normal tables, i wouldn't even use it, but if your table has a meaning on your page, and people want to take it over, it would be handy to use it, especially on a reader. However, if you just add tables to do minor stuff in it, leave it out. Personally this is something you should only look into if the table becomes really expanded.

The definition is as followed:

Definition and Usage

The scope attribute specifies whether a header cell is a header for a column, row, or group of columns or rows.

this comes from the W3 website, btw.

Upvotes: 0

Sirko
Sirko

Reputation: 74046

According to the HTML5 spec, the scope attribute defaults to auto:

The scope attribute's missing value default is the auto state.

This value is characterized by

The auto state makes the header cell apply to a set of cells selected based on context.

So I assume, that screenreaders will be able to detect the context properly, which in turn means, that you do not have to explicitly define the attribute, unless you have some special instances or usecases for rowgroup and colgroup values.

Upvotes: 4

Related Questions