Why isn't it bold?

HTML/CSS
1 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tables</title>
    <style>
        table, td, th{
            border: 1px solid blue;
            border-collapse: collapse;
            padding: 5px;
        }
    
    tfoot{
            text-align: left;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th colspan="2">Report Card</th>
            </tr>
            <tr>
                <th>Subject</th>
                <th>Marks</th>
            </tr>
            <tbody>
                <tr>

                    <td>Math</td>
                    <td>47</td>
                </tr>
                <tr>
                    <td>English</td>
                    <td>45</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>Total</td>
                    <td>92</td>
                </tr>
            </tfoot>
        </thead>
    </table>
</body>
</html>

2021-02-20 (3)
2021-02-20 (3)611Ă—714 16.9 KB

My table

2021-02-20 (2)
Mosh’s table

I don’t understand why the “Total” and “92” are not in bold for me
Can someone please help me out?!

2

First of all: You have defined your whole table content inside a thead element?

If you inspect the header cells to see why they are bold you will see that the bold font-weight comes from a rule in the user agent stylesheet for the th element. So by default thead and tfoot have nothing to do with the font weight.

If you compare your markup in the tfoot element with Mosh’s you will see that he uses th elements while you are using td elements. That’s why your table looks different.

BTW: In my opinion wrapping a data value with a th is not correct sematically. I would write

<tfoot>
   <tr>
      <th>Total</th>
      <td>92</td>
   </tr>
</tfoot>

which is more correct semantically and we don’t have the alignment issue Mosh has at the end of the video.

2 Likes
3

Oops!!:woman_facepalming:

My bad I didn’t notice it…

Thanks for the help @SAM

4 
SAM's previous answer is correct.
I made th*s reply and could not remove it.
Sorry.