【问题标题】:How to change table borders style/size/color in HTML [closed]如何在 HTML 中更改表格边框样式/大小/颜色 [关闭]
【发布时间】:2013-11-09 09:13:05
【问题描述】:

抱歉,我发布了这个问题,但此时我处于死胡同。

正如你所见,这个表格有不同的边框大小和颜色,加上单元格背景的相似情况很好。

有人可以告诉我如何在 .html 中制作这个表格吗? 记事本文档中的表格代码应该是什么? 我完全迷失了这些:cell spacing="0" cell padding="4",...(到目前为止等等)。

在 html 中创建这个表也许并非不可能?

好吧,对于熟练的程序员来说,这可能听起来很有趣,但我不知道如何处理它,尤其是当我在工作中遇到非常困难的表格时。

【问题讨论】:

  • Google 'html table maker' 你会得到很多免费网站来帮助你解决这个问题。这是最先出现的link
  • 不幸的是,quackit.com 无法帮助处理这个“大小”问题。那里只有简单的桌子。 =(
  • 你必须做一些阅读和研究,而不是指望有人为你做这一切。这是一个很好的link,它解释了你想知道的关于在 html 中格式化表格的一切。

标签: html css colors html-table border


【解决方案1】:

您可以设置每个单元格的样式。例如:

<table border="1">
    <tr>
        <th>Day</th>
        <th class="border-top-blue">1</th>
        <th class="bg-red">2</th>
    </tr>
    <tr>
        <td>Speed</td>
        <td>row 1, cell 2</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>Total</td>
        <td class="bg-yellow border-dotted">200</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在上表中,我在行中添加了一些 CSS 类:

.border-top-blue {
  border-top: 2px solid blue;
}

.bg-red {
  background-color: red;
}

.bg-yellow {
  background-color: yellow;
}

.border-dotted {
  border: 1px dotted;
}

这样你可以改变边框、背景颜色、大小等。希望你明白了!

【讨论】:

    【解决方案2】:

    我不知道您的单元格的确切颜色或宽度,但这是该表格的结构。我知道桌子有多棘手。希望对您有所帮助。

    http://jsfiddle.net/yen9ritch/8vsE4/

    HTML

        <table id="sampleTable" width="300" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="150" class="graybg-blackborder" style="border-top: 2px #000 solid;">DAY</td>
        <td class="graybg-blackborder" style="border-top: 2px blue solid; border-left: none;">1</td>
        <td class="redbg-blackborder" style="border-top: 2px #000 solid; border-left: none;">2</td>
      </tr>
      <tr>
        <td width="150" class="graybg-blackborder">Speed</td>
        <td class="dottedBottomBorder rightThinBorder">1.20kb/h</td>
        <td class="dottedBottomBorder rightThinBorder">1.00kb/h</td>
      </tr>
      <tr>
        <td width="150" class="graybg-blackborder " style="border-bottom: 2px #000 solid;">Total</td>
        <td class="rightThinBorder yellowBg dottedBottomBorder">200</td>
        <td class="rightThinBorder thickBottom">220</td>
      </tr>
    </table>
    

    CSS

        #sampleTable {
        text-align:center;
    }
    .graybg-blackborder {
        background: #ccc;
        border-left: 2px #000 solid;
        border-right: 2px #000 solid;
        border-top: 1px #000 solid;
        border-bottom: 2px #000 solid;
        font-weight: bold;
    }
    .redbg-blackborder {
        background: red;
        border-left: 2px #000 solid;
        border-right: 2px #000 solid;
        border-top: 1px #000 solid;
        border-bottom: 2px #000 solid;
        font-weight: bold;
    }
    .dottedBottomBorder {
        border-bottom: #000 1px dotted;
    }
    .rightThinBorder {
        border-right: 1px #000 solid;
    }
    .yellowBg {
        background-color: yellow;
    }
    .thickBottom {
        border-bottom: 2px #000 solid;
    }
    

    【讨论】:

    • 为什么要混合内联样式和 CSS 类?
    • @JonP 覆盖类中的一些边框。这是边界组合的有趣组合。
    【解决方案3】:

    你可以在 html 文件中使用它

    <tr>
        <td class = "class1>text</td>
        <td class = "class2>text</td>
    </tr>
    

    然后有一个css文件 .class1 { 背景颜色:红色; 边框:纯绿色2px; ` } 或者你可以使用带有子元素的树结构first-child 顺便说一句,第一列可能是 th 而不是 td

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-11-30
      • 2021-08-16
      • 2013-07-23
      • 2020-06-14
      • 1970-01-01
      • 1970-01-01
      • 2012-07-30
      • 1970-01-01
      相关资源
      最近更新 更多