-2

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

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

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

也许在 html 中创建此表并非不可能？

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

在此处输入图像描述

4

3 回答 3

1

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

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;
}
于 2013-10-30T00:19:13.837 回答
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;
}

通过这种方式，您可以更改边框、背景颜色、大小等。希望您明白这一点！

于 2013-10-30T00:11:35.160 回答
0

你可以在 html 文件中使用它

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

然后有一个 css 文件 .class1 { background-color: red; 边框：纯绿色2px；` } 或者您可以使用带有子元素first-child的树结构， 因为第一列可能是 th 而不是 td

于 2013-10-30T00:15:04.097 回答