Table giving me a headache-CodePudding

I am a newbie and I was just experimenting creating a table. I wanted to use different background colours on the table heading cells (one colour on each oh the the three). So I gave them different classes, but it does not seem to work? all I can get is the three of them the same colour by targeting

Can someone help me please? This is the HTML

  table {
  font-family: sans-serif;
}

thead th {
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  background-color: yellow;
}

table,
th,
td {
  padding: 30px;
  border: 1px solid black;
  border-collapse: collapse;
  width: 700px;
  background-color: pink;
  .name {
    background-color: orange;
  }

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril Fatface&family=Merriweather:ital@0;1&family=Work Sans:wght@400;500;800&display=swap" rel="stylesheet">
<h1>My cheatsheet</h1>
<p>Hope this is of help.</p>
<table>
  <thead>
    <th >tag</th>
    <th >name</th>
    <th >description</th>
  </thead>
  <tbody>
    <tr>
      <td> &lt;table&gt; </td>
      <td>table</td>
      <td>The wrapper element for all HTML tables.</td>
    </tr>
    <tr>
      <td> &lt;thead&gt; </td>
      <td>table head</td>
      <td>The set of rows defining the column headers in a table.</td>
    </tr>
  </tbody>
</table>

Thanks :)

CodePudding user response：

It's because your css is missing a }.

You should have

table {
  font-family: sans-serif;
}

thead th {
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  background-color: yellow;
}

table,
th,
td {
  padding: 30px;
  border: 1px solid black;
  border-collapse: collapse;
  width: 700px;
  background-color: pink;
}

.name {
    /*exemple*/
    background-color: blue;
}

CodePudding user response：

While you apply unique class-names for each <th> element, you only attempt to define styles for the .name class.

  table,
  th,
  td {
    padding: 30px;
    border: 1px solid black;
    border-collapse: collapse;
    width:700px;
    background-color: pink;
   .name {
     background-color: orange;
   }

Unfortunately you have a typo in that declaration that sees .name being nested within the rules for the table, th, td elements. CSS – as yet – has no nesting syntax, so if that was your intent it's considered a syntax-error by your browser.

Correcting that typo allows the CSS to work as intended:

  table {
  font-family: sans-serif;
}

thead th {
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  background-color: yellow;
}

table,
th,
td {
  padding: 30px;
  border: 1px solid black;
  border-collapse: collapse;
  width: 700px;
  background-color: pink;
}
.name {
  background-color: orange;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril Fatface&family=Merriweather:ital@0;1&family=Work Sans:wght@400;500;800&display=swap" rel="stylesheet">
<h1>My cheatsheet</h1>
<p>Hope this is of help.</p>
<table>
  <thead>
    <th >tag</th>
    <th >name</th>
    <th >description</th>
  </thead>
  <tbody>
    <tr>
      <td> &lt;table&gt; </td>
      <td>table</td>
      <td>The wrapper element for all HTML tables.</td>
    </tr>
    <tr>
      <td> &lt;thead&gt; </td>
      <td>table head</td>
      <td>The set of rows defining the column headers in a table.</td>
    </tr>
  </tbody>
</table>

As an aside, though, you don't necessarily need to use class-names to target elements, instead you could use :nth-child() as an example:

table {
  font-family: sans-serif;
}

thead th {
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  background-color: yellow;
}

table,
th,
td {
  padding: 30px;
  border: 1px solid black;
  border-collapse: collapse;
  width: 700px;
  background-color: pink;
}

th:nth-child(even) {
  background-color: orange;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril Fatface&family=Merriweather:ital@0;1&family=Work Sans:wght@400;500;800&display=swap" rel="stylesheet">
<h1>My cheatsheet</h1>
<p>Hope this is of help.</p>
<table>
  <thead>
    <th >tag</th>
    <th >name</th>
    <th >description</th>
  </thead>
  <tbody>
    <tr>
      <td> &lt;table&gt; </td>
      <td>table</td>
      <td>The wrapper element for all HTML tables.</td>
    </tr>
    <tr>
      <td> &lt;thead&gt; </td>
      <td>table head</td>
      <td>The set of rows defining the column headers in a table.</td>
    </tr>
  </tbody>
</table>

Or simply provide custom-properties in the style element if you preferred:

table {
  font-family: sans-serif;
}

thead th {
  /* sets the background-color to the value of the CSS
     custom property '--bgColor' or, if that's not available
     or is an invalid value, to yellow by default: */
  background-color: var(--bgColor, yellow);
  text-align: center;
  font-weight: bold;
  font-size: 30px;
}

table,
th,
td {
  padding: 30px;
  border: 1px solid black;
  border-collapse: collapse;
  width: 700px;
  background-color: pink;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril Fatface&family=Merriweather:ital@0;1&family=Work Sans:wght@400;500;800&display=swap" rel="stylesheet">
<h1>My cheatsheet</h1>
<p>Hope this is of help.</p>
<table>
  <thead>
    <th >tag</th>
    <th  style="--bgColor: orange;">name</th>
    <th >description</th>
  </thead>
  <tbody>
    <tr>
      <td> &lt;table&gt; </td>
      <td>table</td>
      <td>The wrapper element for all HTML tables.</td>
    </tr>
    <tr>
      <td> &lt;thead&gt; </td>
      <td>table head</td>
      <td>The set of rows defining the column headers in a table.</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

In HTML, table background color is defined using Cascading Style Sheets (CSS). Specifically, you use the background-color property to define background color. You can apply this property against the whole table, a row, or a single cell.

if you see the below code, for the particular row(tr) or cell (td), you can specify the color using in-style method.

<table style="background-color:#FFFFE0;">
<tr style="background-color:#BDB76B;color:#ffffff;">
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td style="background-color:#ff0000;">Table cell 4</td>
</tr>
</table>

Hope this answer helps you! Cheers.