How can I adjust the size and alignment of each line within a single cell in an HTML table?

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <style>
            .chess-board { border-spacing: 0; border-collapse: collapse; }
            .chess-board th { padding: 1000px; }
            .chess-board th + th { border-bottom: 1px solid #000; }
            .chess-board th:first-child,
            .chess-board td:last-child { border-right: 1px solid #000; }
            .chess-board tr:last-child td { border-bottom: 1px solid; }
            .chess-board th:empty { border: none; }
            .chess-board td { width: 2000px; height: 2000px; text-align: center; font-size: 2000px; line-height: 0; }
            .chess-board .light { background: white; }
            .chess-board .dark { background: green; }
            .button { width: 500px; height: 200px; font-size: 50px;line-height:0;font-weight: bold;border: 10px solid black; }
            .letters { width: 500px; height: 500px; text-align: center; font-size: 600px; line-height: 0; }            
        </style>
    </head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <body>
        <table id="Chess_Board" class="chess-board">
            <tbody>
                <tr>
                    <th></th>
                    <th class="letters">a</th>
                    <th class="letters">b</th>
                    <th class="letters">c</th>
                    <th class="letters">d</th>
                    <th class="letters">e</th>
                    <th class="letters">f</th>
                    <th class="letters">g</th>
                    <th class="letters">h</th>
                </tr>
                <tr>
                    <th class="letters">8</th>
                    <td class="light">♜</td>
                    <td class="dark">♞</td>
                    <td class="light">♝</td>
                    <td class="dark">♛</td>
                    <td class="light">♚</td>
                    <td class="dark">♝</td>
                    <td class="light">♞</td>
                    <td class="dark">♜</td>
                </tr>
                <tr>
                    <th class="letters">7</th>
                    <td class="dark">♟</td>
                    <td class="light">♟</td>
                    <td class="dark">♟</td>
                    <td class="light">♟</td>
                    <td class="dark">♟</td>
                    <td class="light">♟</td>
                    <td class="dark">♟</td>
                    <td class="light">♟</td>
                </tr>
                <tr>
                    <th class="letters">6</th>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                </tr>
                <tr>
                    <th class="letters">5</th>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                </tr>
                <tr>
                    <th class="letters">4</th>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                </tr>
                <tr>
                    <th class="letters">3</th>
                    <td class="dark"></td>
                    <td class="light""></td>
                    <td class="dark""></td>
                    <td class="light""></td>
                    <td class="dark""></td>
                    <td class="light""></td>
                    <td class="dark""></td>
                    <td class="light""></td>
                </tr>
                <tr>
                    <th class="letters"">2</th>
                    <td class="light"">♙</td>
                    <td class="dark"">♙</td>
                    <td class="light"">♙</td>
                    <td class="dark"">♙</td>
                    <td class="light"">♙</td>
                    <td class="dark"">♙</td>
                    <td class="light"">♙</td>
                    <td class="dark"">♙</td>
                </tr>
                <tr>
                    <th class="letters"">1</th>
                    <td class="dark"">♖</td>
                    <td class="light"">♘</td>
                    <td class="dark"">♗</td>
                    <td class="light"">♕</td>
                    <td class="dark"">♔</td>
                    <td class="light"">♗</td>
                    <td class="dark"">♘</td>
                    <td class="light"">♖</td>
                </tr>
            </tbody>
        </table>
        <br>
        <button class="button" onclick="Screenshot()">Download as Png</button>
        <br>
    </body>
    <script>
        function Screenshot(){
        html2canvas(document.querySelector("#Chess_Board")).then(canvas => {
        document.body.appendChild(canvas)
        });}
    </script>
</html>

Check out the image result here: [Result](https://i.sstatic.net/8sZq3.jpg)

To have "a" and "8" inside the ROOK's Cell like in this [example image](https://i.sstatic.net/OBAUR.png), please provide guidance to accomplish this.

I appreciate any assistance as I have been struggling with this problem for several days.

......................................................................................................0000000000000000000000000000000000000000000000

htmlcsslinecell

Answer №1

Utilizing CSS Grid is the key to achieving this layout:

  1. Declare the wrapper to have display: grid
  2. Arrange items in their desired positions

.container {
  height: 200px;
  width: 200px;
  border: 1px solid rgba(0, 0, 0, .1);
  display: grid;
}

.container div {
  border: 1px solid rgba(0, 255, 0, .1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.middle {
  grid-row: 2;
  grid-column: 2;
}

.top {
  grid-column: 1;
}

.bottom {
  grid-column: 3;
}

.left {
  grid-row: 1;
}

.right {
  grid-row: 3;
}
<div class="container">
  <div class="top left">a</div>
  <div class="middle">b</div>
  <div class="bottom right">c</div>
</div>

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

Ways to utilize a single HTML page for various URLs while changing one variable value based on the queried URL

My current HTML page structure looks like this: <body ng-controller="DashboardDisplay" onload="submit()"> <div class="container-fluid" > {{scope.arr}} </div> </body> <script> var myApp = angular.module(&apos ...

javascripthtmlcssangularjsnode.js

What could be causing the right padding to be overlooked next to the scroll bar, and what steps can be taken to address this

.outer { padding: 50px; } .inner { width: 500px; height: 1000px; border: 1px solid gray; margin: auto; } <div class="outer"> <div class="inner"> <div class="content">qwerty</div> </div> </div> From my ...

htmlcss

Centered horizontally are images that have been floated

How can I align images with different widths when they are all floated right? I want them to be aligned vertically below each other. For the best display, please view in fullscreen on your computer as the example window is small. .compressor{ height: 1 ...

htmlcsscss-float

Styling content in a CSS file and then rendering it as a

My current project involves converting a webpage into a PDF file and I am using @page @bottom-left to insert text in the bottom left corner. @page {size: portrait A4; @bottom-left {content: "Some text to display at the bottom left. Some additional text ...

htmlcsspdf

ASP:Menu: Want to style bulleted lists using CSS

I am currently utilizing ASP:Menu and I would like to customize the menu display as outlined below. Can you please advise on how to implement the CSS styling and what modifications are required? Products Instock Out-of-Stock Orders Purchase Orders Sa ...

asp.netcssaspmenuaspmenu-controlbulletedlist

What could be the reason for the lack of a border below the navigation bar in this code?

I am attempting to create a navigation bar with a simple thin border that becomes thicker when hovered over. Although I have written the code below, it seems to not be working as intended. How can I fix this issue? #top-menu ul li a { display: block ...

htmlcss

Guide to utilizing variables with Pattern.compile in Java for selenium RC

I am facing a challenge where I need to check if the date in a field corresponds to the current day. In Selenium IDE, this is easily achieved: <tr> <td>storeExpression</td> <td>javascript{var date = new Date ...

javahtmlseleniumselenium-webdriver

Creating personalized fonts in SAPUI5 Theme Designer

Recently, I have been working on creating a personalized theme for the HANA cloud platform Portal. In order to give my site a unique touch, I decided to incorporate custom fonts. To achieve this, I uploaded the fonts as an HTML application in HCP. Now, my ...

csssapui5

exciting, showcasing a dependency map using svg within an html5 environment

I am working on creating a polygon background for my menu, which needs to be responsive in design. Here is an example of what I am trying to achieve: example image. Should I use JavaScript to listen for size changes and adjust the points for the polygon e ...

javascriptcsshtmlsvgtwitter-bootstrap-3

Places & Their Accompanying Pictures

My website has a feature that allows users to save and add images for locations they have visited. The location details are stored in a MySQL database, while the image files are saved on my server in a folder with both original and thumbnail versions. I h ...

htmlparent-child

The loading indicator is not appearing inside the designated box

I have successfully implemented a loader using jQuery and CSS to display a gray background during an AJAX call. However, I am encountering an issue where the loader and background are being displayed across the entire page instead of just within a specific ...

javascriptjqueryhtmlcss

Ways to customize the default CSS styles of angularJS for elements like search box and more

Looking for a way to customize the appearance of an AngularJs search box? <div ng-controller="PersonListCtrl"> <div class="bar">Search: <input ng-model="query"> </div> <ul cl ...

cssangularjs

A step-by-step guide on how to substitute document.write with document.getElementById('ElementID').innerHTML

As someone who is not a programmer, I often find myself attempting to grasp code and make adjustments through trial and error. Currently, I am faced with the challenge of modifying the document.write function in the function pausescroller within a Joomla m ...

javascriptphphtmlgetelementbyiddocument.write

Tips for resolving the issue of "Text stays in original position while image changes in the background when hovering over the text."

I'm currently working on a website and I have a question regarding how to make text stay in position while hovering over it (inside a span), and at the same time, display an image in the background that allows the text to overlay it. HTML: <ht ...

htmlcssimagebackgroundhover

Using Jquery to store input values from within <td> elements in an array

I'm trying to capture user input from a dynamically changing table with 2 columns. How can I retrieve the data from each column separately? The size of the table is adjusted by a slider that controls the number of rows. Below is the structure of my ta ...

javascriptjqueryhtmlfirebase-realtime-databasecss-selectors

CSS behaving strangely with the height property

I've run into a specific issue with a div element that contains multiple buttons. I am trying to adjust the height and position of one button so that it takes up space above the other buttons, but every time I make changes to its height and position, ...

jqueryhtmlcss

"Create dynamic tables with AngularJS using ng-repeat for column-specific rendering

I have a model called Item with the following structure: {data: String, schedule: DateTime, category: String} I want to create a report that displays the data in a table format like this: <table> <tr> <th>Time Range</th&g ...

javascripthtmlangularjs

What is the process for implementing document.ondrop with Firefox?

I'm experiencing an issue where the document.ondrop function seems to be working in Chrome, but not in Firefox. Here's a link to an example demonstrating the problem: In the example, if you try to drop a file onto the page, it should trigger an ...

javascripthtmlfirefoxgoogle-chrome

Navigating through a Collection of Pictures using Mouse Movement and Left-click Button

Trying to create a customized PACS viewer for scrolling through a series of CT head images. However, encountering an issue with scrolling through all 59 images. Currently, able to scroll from the first to the 59th image, but struggling to loop back to the ...

jquerycss

What is the process for creating a pop-up bubble that appears when the cursor hovers over an image displayed within a table using R Shiny?

I am currently working on code that is almost achieving my desired functionality. I want to make it so that hovering over each question mark in the table will trigger a pop-up bubble displaying the help text, rather than having the text appear at the botto ...

javascripthtmlcssrshiny