Create a tic tac toe game board using CSS styling for a table

I am considering creating a tic-tac-toe game using jQuery and PHP. I would like to customize the design of the game board, which is represented by an HTML table, by applying CSS styling. However, I am struggling to find CSS properties that would allow me to add borders selectively to certain cells. Are there specific CSS properties that can achieve this, or should I explore alternative methods?

The structure of the HTML code for the game board:

  <div id="board">
    <table>
      <tr id="row1">
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
      </tr>
      <tr id="row2">
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
      </tr>
      <tr id="row3">
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
      </tr>
    </table>
  </div>
jquerycsshtml-table

Answer №1

One technique is to apply a second class to specific table cells and then selectively add borders only to that class.

Here's the HTML and CSS code snippet:

.square{
    width:100px;
    height:100px;
}

.v{
    border-left:1px solid #000;
    border-right:1px solid #000;
}

.h{
    border-top:1px solid #000;
    border-bottom:1px solid #000;
}
<div id="board">
    <table>
      <tr id="row1">
        <td class="square"></td>
        <td class="square v"></td>
        <td class="square"></td>
      </tr>
      <tr id="row2">
        <td class="square h"></td>
        <td class="square v h"></td>
        <td class="square h"></td>
      </tr>
      <tr id="row3">
        <td class="square"></td>
        <td class="square v"></td>
        <td class="square"></td>
      </tr>
    </table>
  </div>

Answer №2

To achieve a black border for the center square, follow these steps:

.center-square {
border: 1px solid #000;
}
<td class="center-square"></td>

Answer №3

To style the table cells appropriately, you'll need to assign multiple classes to each td except for the middle square. For instance, the first td could have classes 'top' and 'left', with corresponding CSS properties such as border-top: none; for 'top' and border-left: none; for 'left'. The middle square would always maintain all borders.

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

The jQuery code written is not accurately delivering the expected value upon clicking

I have a dynamic list of items retrieved from the database. This list is generated using a while loop in PHP and echoed to the page. However, I am facing an issue where jQuery only recognizes the first item even if I click on a different one. My goal is to ...

phpjqueryajax

Employing identification as a variable

I'm currently attempting to retrieve the text within a span element that has a class of "link," but I seem to be encountering some issues. <div id="item-0" class="box"> ....... </div> <div id="item-1" class="box"> <p>& ...

javascriptjquery

Verifications in the realm of javascript

I created a custom form in Django which is functioning correctly. However, when I try to implement JavaScript validation, the validations do not seem to work as expected. I am looking to validate the form using JavaScript. Although it displays the alert me ...

javascriptjquerypythondjango

Easily showcase a limitless number of items within a 10-column grid using Bootstrap!

This is the code snippet: <div *ngFor="let minute of state.minutes.specificMinutes.selectedMinutes | keyvalue" class="col-sm-1 checkbox-container"> <div class="custom-control custom-checkbox"> <input type="checkbox" (click)="state.m ...

htmlcssangularbootstrap-4

jQuery Datatables have trouble accessing specific row information when the table is set to be responsive

Currently, I'm utilizing the jQuery DataTables plugin along with the responsive addon to dynamically display and hide columns based on the size of the browser window. One of the columns is labeled as Actions, which permits users to edit a record by c ...

javascriptjqueryhtmldatatables

Navigating through the list of items in the navbar to find a specific element by

I have a question about my navbar functionality -- specifically, I want to be able to click on a navbar item and then smoothly scroll down to the corresponding id element. Here is the structure of my navbar: <nav class="navbar navbar-default navbar-st ...

jqueryjquery-animatescrolltop

Improving User Experience with HTML 5 Progress Bars

Has anyone ever tried implementing a progress bar on a Marketo Landing page? The concept is that the progress bar would increase with each completed field until all fields are done, reaching 100% completion? Here is my current code: <progress max="100 ...

javascriptjqueryhtmlprogress-barmarketo

Issue with Bootstrap NavBar collapsing properly on first element

I'm currently working on developing a responsive navbar. Everything seems to be functioning well in larger window sizes, but when I view it on an xs screen, the first element of the navbar does not collapse properly. For reference, here are two exampl ...

htmlcssbootstrap-4

Breaking down SHOUTcast song information into "Title of the Song" and "Name of the Artist"

I have implemented the 'Now playing' jQuery plugin and am curious if there is a method to separate the track information retrieved from SHOUTcast (Artist name - Track title) into two distinct strings: 'Artist name' and 'Track title ...

jqueryajaxshoutcastinternet-radio

Nginx fails to load CSS in Asp.net Core on Raspberry Pi

First and foremost, thank you for taking the time to read my post. Secondly, I apologize for any language errors in advance. I am currently attempting to run an Asp.net core application on a Raspberry Pi, but I am encountering difficulties with nginx prox ...

cssasp.netasp.net-mvclinuxnginx

What's preventing my link from opening?

I've written this code for two tabs: <li> <a href="#gallery_place" role="tab" data-toggle="tab"> <i class="fa fa-picture-o"></i> <?php _e("Gallery", ET_DOMAIN); ?> </a> </li> <li> <a href ...

phpjqueryhtml

The callback function for ajax completion fails to execute

My current framework of choice is Django. I find myself faced with the following code snippet: var done_cancel_order = function(res, status) { alert("xpto"); }; var cancel_order = function() { data = {}; var args = { type:"GET", url:"/exch ...

javascriptjqueryajaxdjango

Transfer the selected value from the initial dropdown menu to the second dropdown menu seamlessly without the need to

My website features a repair pricing calculator that allows users to select a brand from a dropdown menu and then choose the specific model from a second dropdown. Currently, after selecting an option from the first dropdown, the page reloads and passes th ...

phpjqueryajaxwordpressdropdown

Refining an Ajax populated table

I am currently working on building a JavaScript filter for a table. The code snippet I am using is: var $rows = $('tr').not('#tr'); $('#search').keyup(function() { var val = '^(?=.*\\b' + $.trim($(thi ...

jqueryajaxfilterhtml-table

Ensuring DIV Fills without Compromising Aspect Ratio

I am currently attempting to fill a div with an image in both width and height. However, I have only been able to control the width while the height respects the aspect ratio without filling the div completely. I have tried various combinations of backgrou ...

csswordpressbackground-imagefillbackground-size

What is the best API for incorporating interactive maps into my Android application?

I am looking to create an Android app (using Java) with interactive maps similar to ammaps, which can be integrated with HTML5/jQuery Mobile. Check out for reference. The app will display a world map where different areas are highlighted or colored based ...

androidjqueryhtmlgoogle-maps

Utilizing Flexbox for Nested Columns

I am attempting to nest flexbox columns inside a flexbox layout. This is the HTML code I have: <div class="container"> <div class="row flex height"> <div class="col-md-6 red"> </div> <div class="col-md-6 orange"> ...

cssflexbox

Trouble with choosing multiple values in Select2

I'm facing a challenge with my webpage that necessitates the use of the select2 component. The requirement is to display selected values upon loading as well. In my JavaScript file, I have two distinct constructs for this purpose. JavaScript - Constr ...

phpjqueryjsonjquery-select2-4

Upon selecting a hyperlink, the function's value ought to be saved within a text box

Some programming languages I'm working with are PHP, Javascript, and HTML I've created a PHP function that is stored in page2.php: function pot() { does something; returns a value; } In another page (page1.php), there is a link and a textbox: ...

javascriptphpjqueryhtmlfunction

Access the information from the text box and text area, then store it into a cookie using either jQuery or JavaScript

I need to save the text entered in a textbox within an iframe. How can I achieve this using jQuery or JavaScript? Any assistance would be greatly appreciated. ...

javascriptjquerycookies