Can you include text within the border of a table?

Currently tackling my homework assignment which involves creating a virtual chessboard. Progress has been smooth thus far, as I've managed to write the code for it:

I am now looking to incorporate Letters (A-H) and Numbers (1-8) around the board, replicating a real-life chessboard. This would be visible within the "border" element upon inspecting 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>

The classes are structured in chess.css with the following specifications:

.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 there a way to append text or string content to the "border"? Or should I opt for creating new columns and rows to include the necessary elements like using ?

htmlcss

Answer №1

It may be possible, but using CSS could make the task overly complicated. One approach is to utilize a <thead> element and then add a new <th> on each row. See the example below:

.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

Absolutely! Utilizing the CSS property content allows for the inclusion of text to the border of a table.

Here is an illustration using fundamental 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating Responsive Headers Using CSS for Mobile Devices

I'm looking to make my header font size of 60px more responsive for mobile devices so that the text doesn't get cut off. Any suggestions on how to achieve this? Thank you! Here's the code snippet: h1 { font-size: 4.286em; /* 60px */ margi ...

css

Arrange documents according to the final two characters

My method for collecting files from a folder involves using some Smarty code: {assign var=files value="uploads/Documenten/GPS-Tracks/*.html"|glob} {if count($files)} <ul> {foreach from=$files item='file'} {assign v ...

phphtmlsmarty3

The :focus pseudo-class is failing to target the input element

I'm dealing with a simple input field of type text: <input matInput type="text" placeholder="{{placeholder}}" class="input-field" [ngClass]="{'error': hasErrors}" [readonly]="isReadonly&quo ...

htmlcssangular8

Is there a way to switch the alignment of my text to the left side and move the form over to the right side?

How can I change the layout in Bootstrap 5 so that my text appears on the left hand side of my login page and the login form on the right? I have tried but failed, is there anyone who can help please? Here is my text: <div class="container"& ...

htmlcssbootstrap-5

The table header does not stay in place or remain fixed

My issue lies in using bootstrap, HTML, and CSS. As I scroll, the table header does not move along with the data. I've attempted implementing sticky-top and position-relative without any success. <div class="tab-div"><table class="table tab ...

htmlcssbootstrap-4

Enhancing User Experience with CSS Transitions for Faster Page Loading

Recently, I stumbled upon a captivating website that has left me in awe - . The mesmerizing aspect of this site lies in the seamless and fluid animations that gracefully transition when navigating between pages. I find myself yearning to understand the int ...

jquerycss

Content creator: Enhancing HTML search functionality using parameters

Hey there, I'm facing an issue. I created a template on my Blogger site and I need to search for text with a specific label using this URL: www.my_blog.blogspot.com/search?q=label:Printers+SearchText This is the code I have: <form action=&ap ...

htmlblogger

Attempting to superimpose a CSS triangle arrow onto a Google Map

I'm currently working on incorporating a CSS arrow on top of a Google map as a design element. The concept involves a horizontal stripe with a downward arrow placed halfway through, and I aim to have this arrow overlay the Google map. Here is a snipp ...

htmlcssgoogle-maps

Follow these steps to position a child div absolutely within a grandparent div with the following structure

Is it possible to make the child div absolute for the grand parent div without changing the parent div's position? Here is the scenario: the parent div is a relative div, but the grand parent div is also a relative div. How can we achieve this without ...

htmlcss

Using jQuery to display the total number of div elements for the selected individuals

Hey there, I'm just diving into jQuery and could use some assistance. I'm attempting to achieve a specific outcome with my code, but I'm running into some difficulties. Hopefully someone can lend a helping hand! Here's the scenario: If ...

jqueryhtmlajaxforms

The pattern for the input text in HTML was dysfunctional, specifically when trying to input a negative number or a

Currently delving into the world of regex, where I am exploring ways to restrict user input. After testing on regextester.com with the following pattern: The results were not as expected +10 e10 ^([-,0-9.]+) This configuration yielded successful result ...

htmlregexangularvalidation

Unfixed body border encircling my entire webpage

My goal is to have a border around all the content on my page, but I am facing issues with the positioning of the bottom border. I want it to always be at the bottom of the page. html, body { min-height: 100%; height: 100%; } body { margin: 0; ...

htmlcss

Is it possible to include Helvetica or a similar font in my web application for shipping?

My web-app is Java/HTML based and hosted on the cloud. Users will access it using IE, Chrome or Mozilla. I would like to use Helvetica or a similar font, but they are not readily available on most systems (windows/IE/Chrome/Mozilla). Is there a way for me ...

htmlcssfonts

How to create a scrollable card within a div using bootstrap

How do I create a scrollable card in Bootstrap 4 with this specific HTML structure: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSA ...

htmlcssbootstrap-4

Introducing space between div elements changes the arrangement of columns

I am facing an issue with my layout consisting of 6 div tags divided into 2 rows of fixed height. Whenever I try to add a margin around the divs, the rightmost div gets pushed down to the next row. How can I solve this problem? HTML: <div class="contai ...

csstwitter-bootstrapbootstrap-4

Should you choose a pre-built CSS framework or create your own from scratch?

Have you come across a framework that meets your project needs with just a few tweaks, or have you forged your own path along the way? What advice do you have for someone facing this decision and focusing on priorities like: Implementing a CSS reset Refi ...

htmlcssframeworksfrontend

What are the steps to create a "gooey glide" animation using React and MUI?

I am looking to create a unique animation for my list of items on a web page. My goal is to have the items slide in one by one with rapid succession and then slightly shrink once they reach their final position, similar to how pillows might fall or like a ...

cssreactjsanimationmaterial-uicss-transitions

Changing the Color Scheme of Twitter BootstrapRevamping the Color Palette

I am interested in updating the color scheme of a website that I modeled after this example: http://getbootstrap.com/examples/navbar/ So far, I have successfully changed the background color of the entire page using: body{background-color:#XXXXXX} Howev ...

htmlcsstwitter-bootstrap

Steps to transfer text from one input field to another by clicking a button using JavaScript

Hello, I am new to Javascript so please forgive me if my question seems silly. I have been tasked with creating a form containing two input fields and a button. When the button is clicked, the text entered in the first field should move to the second field ...

javascripthtml

jquery deleting the parent container of a child element

I have been attempting to eliminate the parent element of the label associated with the attribute record_type. Below is the HTML content: <div id="append"> <div class="col-md-6 form-group hide_fields" style="display: block;"> <l ...

jqueryhtmlparent