How to align HTML table cells as circle
<p>I'm trying to create some sort of compass in HTML, I've came this far:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.devicecompass {
  display: inline-block;
  background-clip: padding-box;
  border-radius: 100%;
  border: 1px solid black;
}
td {
  background-clip: padding-box;
  border-radius: 100%;
  border: 1px solid black;
  background-color: #fff;
  text-align: center;
  width: 60px;
  height: 60px;
  line-height: 60px;
}
td a div {
  background-clip: padding-box;
  border-radius: 100%;
  background-color: #aaa;
}
td a div:hover {
  opacity: 0.0;
}
td#e {
  border: 0px;
  background-color: fff;
}
td#router a div {
  background-color: #0a0;
}
td#n5 {
  background-image: url("http://www.eurodk.lv/images/catalogue/directional/&amp;product-view-small&amp;nanobeam400.jpg"); 
}
/* .17 */

td#nno5 {}
/* .18 */

td#no5 {}
/* .19 */</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- 5 GHz devices --&gt;
&lt;div class="devicecompass"&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td id="nw5"&gt;
        &lt;a href="http://10.26.51.31"&gt;
          &lt;div&gt;nw5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td id="nnw5"&gt;
        &lt;a href="http://10.26.51.32"&gt;
          &lt;div&gt;nnw5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td id="n5"&gt;
        &lt;a href="http://10.26.51.17"&gt;
          &lt;div&gt;n5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td id="nno5"&gt;
        &lt;a href="http://10.26.51.18"&gt;
          &lt;div&gt;nno5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td id="no5"&gt;
        &lt;a href="http://10.26.51.19"&gt;
          &lt;div&gt;no5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="wnw5"&gt;
        &lt;a href="http://10.26.51.30"&gt;
          &lt;div&gt;wnw5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td id="e"&gt;nw&lt;/td&gt;
      &lt;td id="e"&gt;n&lt;/td&gt;
      &lt;td id="e"&gt;no&lt;/td&gt;
      &lt;td id="ono5"&gt;
        &lt;a href="http://10.26.51.20"&gt;
          &lt;div&gt;ono5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="w5"&gt;
        &lt;a href="http://10.26.51.29"&gt;
          &lt;div&gt;w5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td id="e"&gt;w&lt;/td&gt;
      &lt;td id="router"&gt;
        &lt;a href="#"&gt;
          &lt;div&gt;compass&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td id="e"&gt;o&lt;/td&gt;
      &lt;td id="o5"&gt;
        &lt;a href="http://10.26.51.21"&gt;
          &lt;div&gt;o5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="wsw5"&gt;
        &lt;a href="http://10.26.51.28"&gt;
          &lt;div&gt;wsw5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td id="e"&gt;sw&lt;/td&gt;
      &lt;td id="e"&gt;s&lt;/td&gt;
      &lt;td id="e"&gt;so&lt;/td&gt;
      &lt;td id="oso5"&gt;
        &lt;a href="http://10.26.51.22"&gt;
          &lt;div&gt;oso5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="sw5"&gt;
        &lt;a href="http://10.26.51.27"&gt;
          &lt;div&gt;sw5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td id="ssw5"&gt;
        &lt;a href="http://10.26.51.26"&gt;
          &lt;div&gt;ssw5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td id="s5"&gt;
        &lt;a href="http://10.26.51.25"&gt;
          &lt;div&gt;s5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td id="sso5"&gt;
        &lt;a href="http://10.26.51.24"&gt;
          &lt;div&gt;sso5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;td id="so5"&gt;
        &lt;a href="http://10.26.51.23"&gt;
          &lt;div&gt;so5&lt;/div&gt;
        &lt;/a&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>But I would rather like to align the cells (=gray small circles) in a circle so it looks more like a compass, how would that work?
It is not important if the cells are outside the table-border or inside (=black large circle), important is, that the cells are aligned like a circle.
I tried to paint it, not a perfect circle, but it should look similar like this:
<a href="https://i.stack.imgur.com/FMgjT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FMgjT.png" alt="enter image description here"></a> </p>

<p>When I search SO and the web for HTML tables/cells aligned as a circle, I find much examples how to round corners of the table into a circle but not to align the cells within the table as a circle.</p>

<p>Or am i thinking the wrong way and should choose another way to acomplish that?</p>