Is it possible to add text to a table Border?

Question

Im doing homework and I'm to create a chessboard. So far so good, here's the code I have written for it:

I want to add Letters (A-H) and Numbers (1-8) around the board, like a real chessboard. It would be on the element "border" after a check at the page source.

<table class="frame">
    <tr>
        <td class="ivory">A8</td>
        <td class="brown">B8</td>
        <td class="ivory">C8</td>
        <td class="brown">D8</td>
        <td class="ivory">E8</td>
        <td class="brown">F8</td>
        <td class="ivory">G8</td>
        <td class="brown">H8</td>
    </tr>
    <tr>
        <td class="brown">A7</td>
        <td class="ivory">B7</td>
        <td class="brown">C7</td>
        <td class="ivory">D7</td>
        <td class="brown">E7</td>
        <td class="ivory">F7</td>
        <td class="brown">G7</td>
        <td class="ivory">H7</td>
    </tr>
    <tr>
        <td class="ivory">A6</td>
        <td class="brown">B6</td>
        <td class="ivory">C6</td>
        <td class="brown">D6</td>
        <td class="ivory">E6</td>
        <td class="brown">F6</td>
        <td class="ivory">G6</td>
        <td class="brown">H6</td>
    </tr>
    <tr>
        <td class="brown">A5</td>
        <td class="ivory">B5</td>
        <td class="brown">C5</td>
        <td class="ivory">D5</td>
        <td class="brown">E5</td>
        <td class="ivory">F5</td>
        <td class="brown">G5</td>
        <td class="ivory">H5</td>
    </tr>
    <tr>
        <td class="ivory">A4</td>
        <td class="brown">B4</td>
        <td class="ivory">C4</td>
        <td class="brown">D4</td>
        <td class="ivory">E4</td>
        <td class="brown">F4</td>
        <td class="ivory">G4</td>
        <td class="brown">H4</td>
    </tr>
    <tr>
        <td class="brown">A3</td>
        <td class="ivory">B3</td>
        <td class="brown">C3</td>
        <td class="ivory">D3</td>
        <td class="brown">E3</td>
        <td class="ivory">F3</td>
        <td class="brown">G3</td>
        <td class="ivory">H3</td>
    </tr>
    <tr>
        <td class="ivory">A2</td>
        <td class="brown">B2</td>
        <td class="ivory">C2</td>
        <td class="brown">D2</td>
        <td class="ivory">E2</td>
        <td class="brown">F2</td>
        <td class="ivory">G2</td>
        <td class="brown">H2</td>
    </tr>
    <tr>
        <td class="brown">A1</td>
        <td class="ivory">B1</td>
        <td class="brown">C1</td>
        <td class="ivory">D1</td>
        <td class="brown">E1</td>
        <td class="ivory">F1</td>
        <td class="brown">G1</td>
        <td class="ivory">H1</td>
    </tr>
</table>

and classes are defined in chess.css as follows:

.frame {
    margin: 60px auto;
    background: black;
    border: 40px ridge beige;
}

.ivory {
    width: 60px;
    height: 60px;
    background-color: ivory;
    font-size: 12px;
    vertical-align: bottom;
}

.brown {
    width: 60px;
    height: 60px;
    background-color: brown;
    font-size: 12px;
    vertical-align: bottom;
}

Is it possible to add text/string to the "border"? Or should I just create new columns and rows and add what I need like using ?

Answer 1

Perhaps but doing it with CSS might be overly-complex. You can do the basics with a <thead> element and then a new <th> on each row. Like this:

.frame {
    margin: 60px auto;
    background: black;
    border: 40px ridge beige;
}

th {
  background-color: ivory;
}

tbody th {
  padding: 0 6px;
}

.ivory {
    width: 60px;
    height: 60px;
    background-color: ivory;
    font-size: 12px;
    vertical-align: bottom;
}

.brown {
    width: 60px;
    height: 60px;
    background-color: brown;
    font-size: 12px;
    vertical-align: bottom;
}

<table class="frame">
    <thead>
      <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
        <th>F</th>
        <th>G</th>
        <th>H</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>8</th>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
      </tr>
      <tr>
        <th>7</th>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
      </tr>
      <tr>
        <th>6</th>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
      </tr>
      <tr>
        <th>5</th>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
      </tr>
      <tr>
        <th>4</th>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
      </tr>
      <tr>
        <th>3</th>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
      </tr>
      <tr>
        <th>2</th>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
      </tr>
      <tr>
        <th>1</th>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
        <td class="brown"></td>
        <td class="ivory"></td>
      </tr>
    </tbody>
</table>

Answer 2

Yes. You can use the CSS property content to add text to the border of a table.

Example using basic HTML and CSS :

table {
  border: 1px solid black;
  border-image: linear-gradient(to right, red, orange) 1;
  border-image-slice: 1;
  padding: 10px;
  position: relative;
}

table:before {
  content: "Table Border Text";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  padding: 0 10px;
}

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>