CODEWITHSUNDEEP
htmlcss
Chandrahas Balleda
Chandrahas Balleda

Reputation: 2832

Query in HTML where with and without using the tag <thead></thead> displaying different outputs

I have two cases where the HTML script displaying differently with and without using <thead></thead> tag.

SCENARIO 1 : (With <thead></thead> tag)

        <!DOCTYPE html>
        <meta charset = "UTF-8"/>

        <head>
              <title>HTML PAGE</title>
        </head>

        <link rel = "stylesheet" href = "TEST_CSS.CSS"> <!--Linking our .CSS sheet-->

        <body>
            <table border="1">
                <caption>EXAMPLE TABLE</caption>
                <thead>
                     <tr>
                         <th colspan = "2">NAME</th> 
                         <th>AGE</th>
                         <th>SEX</th>
                     </tr>
                     </thead>
                         <tr>
                             <td>REBEL RIDER</td>
                             <td>RR</td>
                             <td>5</td> 
                             <td>MALE</td>
                         </tr>
                         <tr>
                             <td>IGR</td>
                             <td>4:20R</td>
                             <td>11</td>
                             <td>MALE</td>
                         </tr>

                     <tr>
                     <td colspan = "4">END OF THE TABLE</td>
                     <tr/>

            </table>
        </body>

SCENARIO 2: (Without <thead></thead>)

        <!DOCTYPE html>
        <meta charset = "UTF-8"/>

        <head>
              <title>HTML PAGE</title>
        </head>

        <link rel = "stylesheet" href = "TEST_CSS.CSS"> <!--Linking our .CSS sheet-->

        <body>
            <table border="1">
                <caption>EXAMPLE TABLE</caption>

                         <tr>
                             <th colspan = "2">NAME</th> 
                             <th>AGE</th>
                             <th>SEX</th>
                         </tr>                      
                         <tr>
                             <td>REBEL RIDER</td>
                             <td>RR</td>
                             <td>5</td> 
                             <td>MALE</td>
                         </tr>
                         <tr>
                             <td>IGR</td>
                             <td>4:20R</td>
                             <td>11</td>
                             <td>MALE</td>
                         </tr>

                         <tr>
                         <td colspan = "4">END OF THE TABLE</td>
                         <tr/>

            </table>
        </body>

I am using the common CSS for above 2 scenarios to style the every 2nd row as below.

tr:nth-child(2n)
{
   background-color: #ccc;
}

I am getting a different output for the above 2 scenarios.

OUTPUT(Scenario 1)

enter image description here

OUTPUT(Scenario 2)

enter image description here

My question is what role does <thead></thead> play in displaying the output differently. Thanks in advance.

Upvotes: 0

Views: 39

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

when you have a <thead> you have a single odd row inside it, and other 3 siblings rows as children of the table - actually of the tbody - (odd, even, odd)

Without thead all rows are siblings so you have odd, even, odd, even.

In other words: a row is odd or even relatively to its immediate parent (or its siblings).

From MDN:

The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.

Upvotes: 2

David Anderson
David Anderson

Reputation: 43642

tr:nth-child(2n) indicates that you want the 2nd, 4th, ... TRs with a common parent to have a gray background.

In the first (with thead) table, you have split the TRs into two distinct sibling groups, the first with one child, and the second with three. The thead only has one TR child, so its TR isn't gray. The other 3 TRs have the table as their parent, and so the 2nd one is gray.

In the second table (without thead), the table has four children, and the 2nd and 4th TRs have gray backgrounds.

Upvotes: 1

Related Questions