What allows me to modify the border color and thickness of my table's <thead>, but prohibits me from changing the background color?

I have successfully changed the border styling of the top bar in the table, however, I am struggling to change the background color no matter what I try. Can someone point out where I might be making a mistake? Here is my code:

<table>
<thead>
            <tr > ;
        <th><strong>Colour</strong></th>
        <th><strong>Red</strong></th>
        <th><strong>Green</strong></th>
        <th><strong>White</strong></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td align="left">Length (m)</td>
        <td>1</td>
        <td>0.5</td>
        <td>0.5</td>
    </tr>
    <tr>
        <td align="left">Weight (kg)</td>
        <td>4</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td align="left">Burn Time (sec)</td>
        <td>60</td>
        <td>22</td>
        <td>15</td>
    </tr>
    <tr>
        <td align="left">Light Output (cd)</td>
        <td>200 000</td>
        <td>100 000</td>
        <td>850 000</td>
    </tr>
    <tr>
      <td align="left">Visibility at sea level (km)</td>
      <td>20</td>
      <td>15</td>
      <td>26</td>
  </tr>
</tbody>

CSS:

table th, table td {
  border: 1px solid gray;
}

table thead  td, table thead tr {
  background-color: pink;
  border: 4px solid pink;
}   

Answer №1

There are some syntax errors in your HTML code:

Here is the corrected version which should work perfectly:

<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
<table>
<thead>
            <tr >
        <th><strong>Color</strong></th>
        <th><strong>Red</strong></th>
        <th><strong>Green</strong></th>
        <th><strong>White</strong></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td align="left">Length (m)</td>
        <td>1</td>
        <td>0.5</td>
        <td>0.5</td>
    </tr>
    <tr>
        <td align="left">Weight (kg)</td>
        <td>4</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td align="left">Burn Time (sec)</td>
        <td>60</td>
        <td>22</td>
        <td>15</td>
    </tr>
    <tr>
        <td align="left">Light Output (cd)</td>
        <td>200,000</td>
        <td>100,000</td>
        <td>850,000</td>
    </tr>
    <tr>
      <td align="left">Visibility at sea level (km)</td>
      <td>20</td>
      <td>15</td>
      <td>26</td>
  </tr>
</tbody>
</table>

</html>

Click here to view the corrected code

Answer №2

It's all coming together for me! Just be cautious with the tags... <strong>

table th, table td {
  border: 1px solid gray;
}

table thead  td, table thead tr {
  background-color: pink;
  border: 4px solid pink;
}   
<table>
<thead>
            <tr >
        <th><strong>Colour</strong></th>
        <th><strong>Red</strong></th>
        <th><strong>Green</strong></th>
        <th><strong>White</strong></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td align="left">Length (m)</td>
        <td>1</td>
        <td>0.5</td>
        <td>0.5</td>
    </tr>
    <tr>
        <td align="left">Weight (kg)</td>
        <td>4</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td align="left">Burn Time (sec)</td>
        <td>60</td>
        <td>22</td>
        <td>15</td>
    </tr>
    <tr>
        <td align="left">Light Output (cd)</td>
        <td>200 000</td>
        <td>100 000</td>
        <td>850 000</td>
    </tr>
    <tr>
      <td align="left">Visibility at sea level (km)</td>
      <td>20</td>
      <td>15</td>
      <td>26</td>
  </tr>
    
</table>

Answer №3

Make sure to add a CSS rule for the <th> tag in your stylesheet:

table th, table td {
  border: 1px solid gray;
}

table thead td, table thead tr, table thead th {
  background-color: pink;
  border: 4px solid pink;
}  

Additionally, there is an error in your HTML code - a missing opening bracket in the <strong> tag on line

<th>strong>Colour</strong></th>
.

Take a look at the live example on JSFiddle.

Answer №4

Check out this demonstration: Demo

Instead of applying borders to tr elements, consider applying them to td and th elements

table thead  td, table thead tr th { /* included th after tr */
  background-color: pink;
  border: 4px solid pink;
}

Make sure to properly open and close tags for the desired output :)

Answer №5

Avoid overloading with unnecessary styles. Implement the following:

table th, table thead tr td {
  border: 1px solid red;
}

table thead tr {
  background-color: red;
  border: 4px solid pink;
}
<table>
<thead>
            <tr >
        <th><strong>Colour</strong></th>
        <th><strong>Red</strong></th>
        <th><strong>Green</strong></th>
        <th><strong>White</strong></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td align="left">Length (m)</td>
        <td>1</td>
        <td>0.5</td>
        <td>0.5</td>
    </tr>
    <tr>
        <td align="left">Weight (kg)</td>
        <td>4</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td align="left">Burn Time (sec)</td>
        <td>60</td>
        <td>22</td>
        <td>15</td>
    </tr>
    <tr>
        <td align="left">Light Output (cd)</td>
        <td>200 000</td>
        <td>100 000</td>
        <td>850 000</td>
    </tr>
    <tr>
      <td align="left">Visibility at sea level (km)</td>
      <td>20</td>
      <td>15</td>
      <td>26</td>
  </tr>
</tbody>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Difficulty in centering certain elements using Bootstrap

I have recently constructed an element for a webpage within the site I am developing. The item is complete, but I am struggling to center it on the page properly. While I can easily center the image, the text associated with it refuses to budge. Here is t ...

What is the best way to showcase MySQL outputs in a Flask application?

Good evening everyone, I'm Eric, currently learning how to create web applications using Flask and Python. I've made some progress connecting to the database and performing searches without any problems. However, I am encountering two issues that ...

Help with enabling the recognition of backspace key in JavaScript?

My current JavaScript is almost perfect but missing one key element. The form has two fields that are disabled when the user fills it out. <label>Can you drive? </label> <input type="booleam" id="drive" disabled><br> <label>W ...

What is the method for increasing the left margin of the back button on the default header in React Native?

My attempt to increase the space on the back button from the left side of the header in my React Native code has been unsuccessful. headerStyle: { paddingLeft: 60 } https://i.stack.imgur.com/0RFb0.png I also experimented with adding margin ...

Is it possible to access a file on the client's PC without transferring the file to the server?

Is there a way to read an excel file directly from a user's PC in a web app and insert the cell values into a MySQL database cell by cell? Or should the file be uploaded to the server first before being read? (The web app is built using JSP) ...

Is there a way to decrease the speed of a range slider?

Recently, I created a range slider using HTML, CSS, and JS to complement my Lua Nui. It's been working smoothly for the most part, but I've noticed an issue when sliding too quickly on the slider. As I slide it to the left, certain values fluctua ...

What is preventing me from being able to view the contents of the hidden columns in this DataTable?

The issue at hand I am facing a challenge with accessing the content of each cell within my data table. My goal is to retrieve the text of every cell in every row, including the ones that are hidden, in order to print and display all elements accurately. ...

Is there a syntax problem with the jQuery (this).next() statement that is causing it to not

Struggling with the implementation of a .next() selector. It seemed straightforward, but I must be missing something. Here's the current script that is not functioning as expected: $('.ITEM').hover(function (){ $(this).next('.ITEM ...

Adjusting the size of a neighboring div to match the width of the audio control component

Looking for a solution with CSS styling: I have a parent div element and two nested div elements, one containing an audio control of unknown length. My query is how to make the first nested div adjust its width based on the audio control. The goal is for ...

What is the best way to ensure that my text always aligns perfectly to the end of the line?

I've been struggling to create a column layout where the text perfectly aligns with the end of the line, but so far, I haven't had any success. Despite my efforts to find a solution online, I have come up empty-handed. What I'm aiming for i ...

Tips for including an HTML table in Rmarkdown

I recently utilized the 'sjPlot' package to perform data analyses. Specifically, I used the 'sjt.df' function to generate a HTML table that provides a simple description of variables in my dataset. I then proceeded to create an Rmarkdow ...

Tips for filling the offset space with a column

Having a bit of trouble phrasing my question, but here's the issue I'm facing: Currently, I need to develop two different views, the first being the mobile view However, I'm experiencing some difficulties with the second view, which can be ...

html form shifting positions based on screen resolution

I have been experimenting with a login screen design for my website recently. I created a form with a fixed position, but as the screen resolution changes, not only does the form's position shift, but also the image moves, causing an unwanted interse ...

Creating space between elements in CSS div elements

I've come across numerous resources on this topic that have already been answered, but none of them have provided a satisfactory solution. Here's the scenario: I have created a basic fiddle showcasing the desired behavior: @ See fidlle If I h ...

What is the best way to vertically align text that is positioned absolutely in the center?

I'm looking to implement a hover hide effect. Check out my inspiration on CodePen * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #123456; } #object { background-color: cornsilk; border: #333 3px solid; ...

Display JSON data in an HTML table by utilizing the AJAX response

Here is a sample JSON data: [ { "datetime": "2020-07-01T00:00:00", "params": [ { "parameterName": "Temperature", "value": 20, "color": "Green ...

Guide to creating a clean and minimalistic tabbed menu using CSS

Looking for CSS code for the tabbed menu shown above. I've tried several options but haven't been able to achieve the exact design I want. Here is the directive, HTML, and CSS code provided: <div id="tabs"> <ul> <li> ...

On certain websites, the footer may appear distorted or incorrectly displayed when viewed in the IE 9 web browser

Currently experiencing an issue with the display of the footer in IE9. On some pages, the footer is not properly fixed and overlaps the middle of the content. However, this problem does not occur when using other web browsers. Here is the code that I am c ...

Personalizing Bootstrap Styles Using Sass

As a newcomer to Bootstrap 5 and Sass, I have been thoroughly enjoying the learning process. However, I have a couple of questions that have come up along the way... When it comes to customizing Bootstrap Sass, I understand the concept of variable overrid ...

The Firefox browser is not fully displaying the button background

Having an issue with a button that doesn't completely fill up on Firefox only. Here's the problem in action: This is how it should actually look: Not quite sure what to do. Here's the CSS styling being used: .button-panel .button { -web ...