为没有 CSS 的 HTML table 的每 n 列添加边框

Question

我是 HTML 的新手，我想在某些列中添加边框作为分隔符。

我希望我的 table 有这样的边框：

| Username | Round 1 | PR | Bonus | Round 2 | PR | Bonus | Total | Rank |
 ---------- --------- ---- ------- --------- ---- ------- ------- ------
| abc123   |   4        1     2   |    12      1     2   |   22     1   |
| xyz123   |   3        0     0   |     5      1     0   |   9      2   |

请查看下面我的 HTML 代码。我没有 CSS 谢谢。

<table class="table table-striped">
                <tr class="table-secondary">
                    <th style="font-size:12px;">Username</th>
                    <th style="text-align:center; font-size:12px;">Round 1</th>
                    <th style="text-align:center; font-size:12px;">PR</th>
                    <th style="text-align:center; font-size:12px;">Bonus</th>
                    <th style="text-align:center; font-size:12px;">Round 2</th>
                    <th style="text-align:center; font-size:12px;">PR</th>
                    <th style="text-align:center; font-size:12px;">Bonus</th>
                    <th style="text-align:center; font-size:12px;">Total</th>
                    <th style="text-align:center; font-size:12px;">Rank</th>
                </tr>
                                    <tr>
                        <td class="table-light" style="text-align:center; font-size:12px;">abc123</td>
                        <td class="table-light" style="text-align:center; font-size:12px;">4</td>
                        <td class="table-warning" style="text-align:center; font-size:12px;">1</td>
                        <td class="table-warning" style="text-align:center; font-size:12px;">2</td>
                        <td class="table-warning" style="text-align:center; font-size:12px;">12</td>
                        <td class="table-secondary" style="text-align:center; font-size:12px;">1</td>
                        <td class="table-secondary" style="text-align:center; font-size:12px;">2</td>
                        <td class="table-light" style="text-align:center; font-size:12px;"><b>22</b></td>
                         <td class="table-light" style="text-align:center; font-size:12px;"><b>1</b></td>                         
                    </tr>
                </table>

Answer 1

style 属性包含 CSS 代码。尽管这种对元素反复应用相同样式的方法非常不切实际，但您可以将“边框”属性添加到 <td> 元素。

语法为：border: weight style color。还有其他 CSS 属性，例如 border-right、border-bottom 等。如果您不想将边框应用到所有边，这在您的问题中是没有的。

示例：

border-right: 1px solid #000;
border-left: 5px dashed #313131;

编辑：

为了更清楚，您需要更新您想要的 <td> 或 <th> 元素的样式属性。

例如：

style="text-align:center; font-size:12px; border-right: 2px solid #333;"

Answer 2

至少通过 HTML.

中的样式标签实现 CSS 会更实用

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code><head>
<style>
th {
text-align: center;
font-size: 12px;
border-right: 2px solid black;
}
td {
text-align: center;
font-size: 12px;
border-right: 2px solid black;
}
</style>
</head>
<body>
    <table class="table table-striped">
                    <tr class="table-secondary">
                        <th>Username</th>
                        <th>Round 1</th>
                        <th>PR</th>
                        <th>Bonus</th>
                        <th>Round 2</th>
                        <th>PR</th>
                    <th>Bonus</th>
                    <th>Total</th>
                    <th>Rank</th>
                </tr>
                                    <tr>
                        <td class="table-light">abc123</td>
                        <td class="table-light">4</td>
                        <td class="table-warning">1</td>
                        <td class="table-warning">2</td>
                        <td class="table-warning">12</td>
                        <td class="table-secondary">1</td>
                        <td class="table-secondary">2</td>
                        <td class="table-light"><b>22</b></td>
                         <td class="table-light"><b>1</b></td>                         
                    </tr>
                </table>
</body>

为没有 CSS 的 HTML table 的每 n 列添加边框

add border to every n column to an HTML table without CSS

html

tags

html-table

border