skip to Main Content

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 ?

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search