Is there a way to bypass cells within an html table?

Creating an online board game and looking to have the cells go around the board. Wondering if anyone knows a way to skip the cells in the middle? Attempted using   but it doesn't seem to be effective.

Here is a snippet of the code:

#board {
  border: 1px solid black;
  background-color: forestgreen;
  height: 375px;
  width: 889px;
}

.square {
  border: 1px solid black;
  background-color: deepskyblue;
  height: 125px;
  width: 125px;
  padding: 10px;
  font-family: "Trebuchet MS";
  float: left;
  font-size: 20px;
}
<table id="board">
        <tr>
            <td class="square">Start!</td>
            <td class="square">Text!</td>
            <td class="square">text?</td>
            <td class="square">text</td>
            <td class="square">cool text</td>
            <td class="square">text!!!</td>
        </tr>
        <tr>
            <td class="square">text</td> 
        </tr>
        <tr>
            <td class="square">text</td>
        </tr>
        <tr>
            <td class="square">text</td>
            <td class="square>text<</td>
            <td class="square">text.</td>
            <td class="square">very cool text</td>
            <td class="square">text?</td>
            <td class="square">>text!!!</td>
        </tr>
    </table>

htmlcsshtml-table

Answer №1

Seems like you might need to adjust the colspan and remove the float based on what I gather from your query. If that's the case, here's a link for some fun table customization options.

#board {
  border: 1px solid black;
  background-color: forestgreen;
/*
  height: 375px;
  width: 889px;
*/
}

.square {
  border: 1px solid black;
  background-color: deepskyblue;
  height: 125px;
  width: 125px;
  padding: 10px;
  font-family: "Trebuchet MS";
  font-size: 20px;
}

#center-tile {
  background: url(https://picsum.photos/700) no-repeat center center;
}
<table id="board">
    <tr>
        <td class="square">Start!</td>
        <td class="square">Text!</td>
        <td class="square">text?</td>
        <td class="square">text</td>
        <td class="square">cool text</td>
        <td class="square">text!!!</td>
    </tr>
    <tr>
        <td class="square">text</td>
        <td id="center-tile" rowspan="2" colspan="4">Center</td>
        <td class="square">text</td>
    </tr>
    <tr>
        <td class="square">text</td>
        <td class="square">text</td>
    </tr>
    <tr>
        <td class="square">text</td>
        <td class="square">text</td>
        <td class="square">text.</td>
        <td class="square">very cool text</td>
        <td class="square">text?</td>
        <td class="square">text!!!</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

What is preventing these elements from being contained within particular divs?

I'm facing an issue with my HTML code and need some help unraveling what's happening. On my simple website, I have a container div, header div, and body div, but it seems like the HTML elements are not aligning properly within these divs (they a ...

htmlcss

Using the <li> element as the primary container for a series of <li>'s within a <ul> is

For my form requirement, I am utilizing Jotforms. After downloading the code, I am currently in the process of customizing the CSS and HTML to fulfill my design needs. Jotforms uses a set of ul , li for managing its HTML structure. However, I encountered ...

htmlcssjotform

Combine div elements with identical class

Is there a way to utilize jQuery in order to enclose groups of elements with the same class within a div? I have been searching for a solution, but haven't found one yet. Here's an example of the HTML: <div class="view-content"> < ...

javascriptjqueryhtmlclasswrapall

Is there a way to ensure the .header and .nav remain fixed at the top of the viewport?

I'm currently working on keeping the .header and .nav elements fixed in the viewport so they don't disappear from view. What's intriguing is that I'm utilizing FlexBox, but I haven't come across a FlexBox feature that allows me to ...

htmlcss

Tips for modifying the style of a component within node_modules using its individual vue <style> sections

I am trying to modify the CSS file within the multiselect package, but I don't want to make changes directly in the node_modules folder. Instead, I want to add my custom styles between the style tags of my Vue page. Specifically, I am attempting to ad ...

javascripthtmlcssvue.jsnode-modules

Is it possible to establish a CSS minimum width that is relative to a different element?

Is it possible to set the min-width of a submenu in CSS to be equal to that of the corresponding link in a navigation menu? I am using LESS for my styling. <ul> <li> <a href="">Item FooBarBaz</a> <ul class="submenu"&g ...

javascriptjqueryhtmlcss

The CSS Scroll-Snapping feature seems to be overlooking one specific element that it should be snapping to

Currently, this website is designed to work exclusively for mobile devices. When viewed in Chrome's mobile view using the inspector, everything appears to be functioning correctly. However, when accessed through Safari or on an actual mobile phone, th ...

ioscssmobilesafarivertical-scrolling

Unable to retrieve the value from a textarea when using Shopify Product Options by Bold

I'm currently facing an issue trying to retrieve the value of a textarea using Shopify's Product Options by Bold. The code works fine locally, but when I transfer it over to Shopify, I am unable to get the value. Despite looking at various resour ...

javascriptjqueryhtmlshopify

How to achieve smooth transitions in CSS3 with dynamic height changes?

Currently, I am in the process of designing a unique layout. The main challenge lies in toggling between two classes for a div element, one of which has a height of 0px. To achieve this, I have successfully utilized CSS3 animations that effectively scale t ...

jqueryhtmlcss

I'm unable to select a checkbox using Python Selenium

My attempt to create a checkbox using Python Selenium resulted in an error message. selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable I believe the issue lies with the element, but I am unsure of its exact locat ...

pythonhtmlpython-3.xselenium

Organize object properties based on shared values using JavaScript

Check out the JavaScript code snippet below by visiting this fiddle. var name = ["Ted", "Sarah", "Nancy", "Ted", "Sarah", "Nancy"]; var prodID = [111, 222, 222, 222, 222, 222]; var prodName = ["milk", "juice", "juice", "juice", "juice", "juice ...

javascriptjqueryhtmlarrays

Discover the procedure to alter date formats in MongoDB

I recently created a MongoDB collection using Node.js with the following code: var mongoose = require('mongoose'); var TTTUsersSchema = new mongoose.Schema({ username: String, password:String, active: Boolean, created_at: { type: Dat ...

htmlnode.jsmongodb

Looking for assistance with implementing mouseover scrolling on an unordered list

I am attempting to create a scrolling effect on my UL element when the mouse hovers over it, but I am having trouble getting it to work. Here is the link to my fiddle: http://jsfiddle.net/MisterStorm/4ja9apqz/3/ and here is my code: $(document).ready( ...

jquerycss

Utilizing CSS to expand a section of an image from a sprite sheet across a div

I need to resize a div that is 1x5 and display an embedded image from a sprite sheet. I am looking for a CSS solution to either repeat or expand this div to cover the area of a larger div. Is there a way to achieve this using only CSS, or will it require ...

htmlcsssprite

Ways to incorporate horizontal scrolling into a flex container within a Bootstrap navigation bar

I am encountering an issue with my Bootstrap navigation menu that uses a flex container (). The goal is to have horizontal scrolling for the menu items when they surpass the width of the container. I have implemented the following CSS style on the containe ...

htmlcssbootstrap-5

"What is the best way to transform tab navigation into a dropdown menu with the help

I have a collection of tabs currently on display. I am looking to transform them into a dropdown menu when the screen size changes, making them more responsive. Each set of tabs corresponds to different content. Despite trying various solutions found on s ...

javascriptjqueryhtml

"The useTheme hook is not functioning as expected when used within a className

I've defined a custom theme in my App.js file like this: let theme = createTheme({ palette: { bgCells: { textAlign: 'right', color: '#8ccadf', backgroundColor: '#eef7ff' } } }); In another c ...

cssreactjsreact-hooksmaterial-ui

Achieving Dynamic Center Alignment for One or Two DIVs

My goal is to create a page layout with three DIVS arranged as Left|Center|Right, while still being able to display different combinations such as Center, Left|Center, or Center|Right in the center of a wrapper div. I have been using jQuery toggle to swit ...

csshtmllayoutcss-float

"Data is not defined" error message is triggered when using jQuery DataTable Row Details

While utilizing jQuery Data Tables to construct a datatable with row details, I encountered an error in jquerydatatables.js: data is undefined The JavaScript code being used is: $(document).ready(function() { var dt = $('#tbl_cheque_history' ...

javascriptphpjqueryhtmldatatables

Implementing React inline styles by directly incorporating brackets into the HTML rendering

I'm working on a project in React using create-react-app and trying to apply an inline style. Based on my research, the following line of code should work fine: <div id="root" style={{ height: 'auto' }}></div> However, when I r ...

cssreactjs