如何更改表背景颜色而不覆盖单元背景颜色

发布于 2025-01-26 22:40:50 字数 1328 浏览 2 评论 0原文

我正在尝试为我的编码课程创建此类表：

https://www.google.com /search？q = html+table＆amp; sxsrf = aliczsytjrfzjtohxsybf2dalfnjdseata：1651764097001＆amp; source = lnms = lnms＆amp; amp; tbm = isch＆amp; sa = x＆amp; ved = 2ahukewjqoiit ah i1 ah i1 i1 i1 i1 i1 i1 i1 i1 i1 i1 i1 i1 i1 i1 i Oecaeqaw＆amp; biw = 1920＆amp; bih = 937＆amp; dpr = 1＃imgrc = kgez4zbeec_jdm

但是，如果没有影响单元格的颜色，我无法更改表的背景颜色

：

<DOCTYPE! html>
<html>
<title> Info </title>
<style> 
table ,th, td, caption {
border: 1px Solid Red;
}
table {
    border-spacing: 30px;
}
</style>
<body>
    
    <table style="font-familt: Calibri; background-color: #2ECC71;

width = 50％＆gt;

    <tr bgcolor = #ffffff;>
    
    <th> Days </th> <th background-color = white;> Weather </th>
    
    </tr>
    
    <tr bgcolor = #ffffff;>
    
    <td> Monday </td> <td> Sunny </td>
    
    </tr>
    
    <tr bgcolor = #ffffff;>
    
    <td> Tuesday </td> <td> Rainy </td> 
    
    </tr>
    
    </table>
</body>
</html>

请有人可以帮助我解决这个问题。

原文

I'm trying to create this type of table for my coding lessons:

https://www.google.com/search?q=html+table&sxsrf=ALiCzsYTjrfZjTOHXsYbF2DALFnJdSEATA:1651764097001&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjQoITi1Mj3AhWDiFwKHZYwDq4Q_AUoAXoECAEQAw&biw=1920&bih=937&dpr=1#imgrc=kgeZ4ZBeec_jdM

But I can't change the background colour of the table without it affecting the colour of the cell

Here is my code:

<DOCTYPE! html>
<html>
<title> Info </title>
<style> 
table ,th, td, caption {
border: 1px Solid Red;
}
table {
    border-spacing: 30px;
}
</style>
<body>
    
    <table style="font-familt: Calibri; background-color: #2ECC71;

width = 50%">

    <tr bgcolor = #ffffff;>
    
    <th> Days </th> <th background-color = white;> Weather </th>
    
    </tr>
    
    <tr bgcolor = #ffffff;>
    
    <td> Monday </td> <td> Sunny </td>
    
    </tr>
    
    <tr bgcolor = #ffffff;>
    
    <td> Tuesday </td> <td> Rainy </td> 
    
    </tr>
    
    </table>
</body>
</html>

Please can someone help me to fix this.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痴情 2025-02-02 22:40:50

“桌子”是完整的桌子
“ Th”是标题
“ TD”是

最佳练习，即坚持使用您的样式的一个标准。
将它们放在顶部（页面级）的样式标签中，或者将它们全部放在您的HTML元素（内联）中，一致性是最好的，但是这里是JSFIDDLE，请执行您需要的工作：

https://jsfiddle.net/dmiranda9872/bx1ste92sste92/15/15/

<DOCTYPE! html>
<html>
  <title> Info </title>
  <style> 

    table ,th, td, caption {
    }
    table {
        border-spacing: 30px; 
        background-color: #2ECC71;
        width: 50%;
        text-align: center;
        padding: 5px;
    }
    th, td {
      background-color: white;
      padding: 5px;
    }
  </style>
  <body>
      <table>
        <tr>
          <th> Days </th> 
          <th> Weather </th>
        </tr>
        <tr>
          <td> Monday </td> 
          <td> Sunny </td>
        </tr>
        <tr>
          <td> Tuesday </td> 
          <td> Rainy </td> 
         </tr>
      </table>
  </body>
</html>

"Table" is the full table
"TH" are the headers
"TD" are the cells

Best practice to stick to one standard with where you put your styles.
Either put them in the style tag at the top (page level) or put them all in your html elements (inline), consistency is best early on, but here is the JSfiddle doing what you need:

https://jsfiddle.net/dmiranda9872/bx1ste92/15/

<DOCTYPE! html>
<html>
  <title> Info </title>
  <style> 

    table ,th, td, caption {
    }
    table {
        border-spacing: 30px; 
        background-color: #2ECC71;
        width: 50%;
        text-align: center;
        padding: 5px;
    }
    th, td {
      background-color: white;
      padding: 5px;
    }
  </style>
  <body>
      <table>
        <tr>
          <th> Days </th> 
          <th> Weather </th>
        </tr>
        <tr>
          <td> Monday </td> 
          <td> Sunny </td>
        </tr>
        <tr>
          <td> Tuesday </td> 
          <td> Rainy </td> 
         </tr>
      </table>
  </body>
</html>

回复收藏 0 原文

~没有更多了~