Question

抱歉，我发布了这个问题，但此时此刻我已经走到了尽头。

如您所见，此表具有不同的边框大小和颜色，加上类似情况的单元格背景也很好。

有人可以告诉我如何在.html制作这张表的线索吗？表格代码应该在记事本文档中看到什么？我完全迷失在那些：单元格间距=“0”单元格填充=“4”，...（到目前为止等等）。

也许只是不可能在html中创建这个表？

嗯，对于熟练的程序员来说，这可能听起来很有趣，但我不知道如何处理它，特别是当我在工作中遇到困难时。

enter image description here

Answer 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;
}

这样你可以改变边框，背景颜色，大小等。希望你明白这一点！

Answer 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;
}

Answer 3

你可以在html文件中使用它

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

然后有一个css文件 .class1 { 背景颜色：红色; 边框：实心绿色2px; `} 或者您可以将树结构与子元素first-child一起使用顺便说一句，第一列可能是一个而不是一个td

如何在HTML中更改表格边框样式/大小/颜色

3 个答案: