title: add border to every n column to an HTML table without CSS
body: <p>I am really new to HTML and I'd like to add a border to certain columns as a divider.</p>
  <p>I would like my table to have borders like this:</p>
  <pre><code>| 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   |
  </code></pre>
  <p>Please see my HTML code below. I do not have CSS thanks.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table table-striped"&gt;
                  &lt;tr class="table-secondary"&gt;
                      &lt;th style="font-size:12px;"&gt;Username&lt;/th&gt;
                      &lt;th style="text-align:center; font-size:12px;"&gt;Round 1&lt;/th&gt;
                      &lt;th style="text-align:center; font-size:12px;"&gt;PR&lt;/th&gt;
                      &lt;th style="text-align:center; font-size:12px;"&gt;Bonus&lt;/th&gt;
                      &lt;th style="text-align:center; font-size:12px;"&gt;Round 2&lt;/th&gt;
                      &lt;th style="text-align:center; font-size:12px;"&gt;PR&lt;/th&gt;
                      &lt;th style="text-align:center; font-size:12px;"&gt;Bonus&lt;/th&gt;
                      &lt;th style="text-align:center; font-size:12px;"&gt;Total&lt;/th&gt;
                      &lt;th style="text-align:center; font-size:12px;"&gt;Rank&lt;/th&gt;
                  &lt;/tr&gt;
                                      &lt;tr&gt;
                          &lt;td class="table-light" style="text-align:center; font-size:12px;"&gt;abc123&lt;/td&gt;
                          &lt;td class="table-light" style="text-align:center; font-size:12px;"&gt;4&lt;/td&gt;
                          &lt;td class="table-warning" style="text-align:center; font-size:12px;"&gt;1&lt;/td&gt;
                          &lt;td class="table-warning" style="text-align:center; font-size:12px;"&gt;2&lt;/td&gt;
                          &lt;td class="table-warning" style="text-align:center; font-size:12px;"&gt;12&lt;/td&gt;
                          &lt;td class="table-secondary" style="text-align:center; font-size:12px;"&gt;1&lt;/td&gt;
                          &lt;td class="table-secondary" style="text-align:center; font-size:12px;"&gt;2&lt;/td&gt;
                          &lt;td class="table-light" style="text-align:center; font-size:12px;"&gt;&lt;b&gt;22&lt;/b&gt;&lt;/td&gt;
                           &lt;td class="table-light" style="text-align:center; font-size:12px;"&gt;&lt;b&gt;1&lt;/b&gt;&lt;/td&gt;                         
                      &lt;/tr&gt;
                  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>