如何在 HTML 中更改表格边框样式/大小/颜色 [关闭]答案

【问题标题】：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

【讨论】：