Help Wanted: <colgroup>/<col> element doesn't work

MDN Learn
#1

This is my complete html code,

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Table template</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>Table template</h1>
    <table>
        <colgroup>
          <col>
          <col style="background-color: yellow">
        </colgroup>
        <tr>
          <th>Data 1</th>
          <th>Data 2</th>
        </tr>
        <tr>
          <td>Calcutta</td>
          <td>Pizza</td>
        </tr>
        <tr>
          <td>Robots</td>
          <td>Jazz</td>
        </tr>
      </table>
  </body>
</html>

This part of the code below, was given in HTML table basics - Learn Web Development (https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics).

<table>
  <colgroup>
    <col>
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Pizza</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

When I use this code in my computer, the background-color attribute in element doesn’t produce the desired result. Could someone tell me where is the problem?

#2

Using just your HTML and ignoring the imported stylesheet seems to produce the desired result for me. I have to assume your imported CSS file is to blame.

If you have styles for a td element those will override the styles inherited from the col element.

#3

I checked the css code linked to my html document. There were few selectors that changed the color of the td and th element, as you suggested. Thanks for the suggestion!!