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

Is it possible to dynamically adjust the width of table columns using CSS/LESS on a per-column basis?

In this scenario, the table's column width is determined by the number of columns present. For example, if there are 4 columns in the table, each column's width would be set to a maximum of 25% of the table's overall width. With 3 columns, t ...

cssless

ion-grid featuring alternate columns

As someone who is not very familiar with Angular, I am trying to create a grid layout like the one shown here: https://i.stack.imgur.com/nBavk.png The desired layout includes alternating rows with one image followed by two images. My current attempt at a ...

htmlangularionic-framework

Tips for closing a popup without exiting the entire webpage

I'm facing an issue while trying to create a video playlist using two HTML files (index.html and video.html). In my video.html file, I have set up a popup for playing videos. However, whenever I close the popup or click anywhere on the page, it redire ...

javascripthtmljquery-mobile

Encase children within a view component in React Native

I've been working on the following code: renderActionButtons(actionButtons){ let actionButtonsContent = actionButtons.map((button, i) => { return <TouchableHighlight key={i} onPress={() => {this.updateConversation(button);}} style= ...

cssreactjsreact-nativeflexboxreact-native-flexbox

Images overlapping within a dynamic container

I am currently working with a responsive container that contains one image. The container and image resize well when the window size changes. However, I now need multiple images to overlap each other (all of the same size). How can I achieve this using HTM ...

htmlcss

Handling 404 errors in Nginx when using try_files directive for .html files

When presented with this SEF URL /attrazioni/madame-tussauds-londra.html, I am required to retrieve the actual URL which is /index.php?q=/attrazioni/madame-tussauds-londra.html I currently have a directive in place, however, it functions correctly only fo ...

phphtmlnginxurl-rewriting

What is the best way to place a button within a line of text

I am trying to achieve a layout similar to this: -------------------button------------------ I can add text inside the line, but it doesn't look good when I add a button. Any suggestions on how I can improve this? ...

htmlcss

Arranging elements in columns using Bootstrap

I am facing an issue with my columns in bootstrap, as they are currently appearing vertically, one above the other. I need them to be displayed side by side Here is the code I am using: <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layo ...

htmlcssbootstrap-4

Left-hand navigation panel that complements entire screen

Web Design .sidenav { height: 100%; position: relative; overflow-y: scroll; background: #000000; width: 15%; } Ensuring the menu covers the full screen correctly by setting its height to 100% is effective, but it may appear awkward wh ...

htmlcssheight

Utilizing Selenium to extract data from a table and displaying the results

I am looking to scrape tables from a specific website, but I am new to automation with Selenium. Here is the code snippet that I have come up with after doing some research: from selenium.webdriver import Firefox from selenium.webdriver.common.by import By ...

pythonhtmlcssseleniumpycharm

Adjust the width of a box-shadow using percentage values in CSS

As we work on developing our tool according to the provided design, we are facing a challenge in drawing a line within a table row using box-shadow. The requirement is to have the line cover only 30% of the row width, rather than spanning across the entire ...

htmlcss

Transferring the final space from a node containing a mixture of content to a separate

Having a multitude of HTML files generated by MS Word, my objective is to modify the contents in order to extract data and perform other tasks. In an HTML paragraph with mixed content, I have noticed that spaces after italicized or bold words also become ...

htmlxmlxslt

Why isn't my axios login get request functioning as expected?

I am currently working on a login-page for a school project. I am using vue.js and have been attempting to make a get-request using axios. However, I am facing an issue where I cannot even enter the .then() block as the last thing displayed is alert(TEST1) ...

htmlvue.jsaxios

The navigation bar seems to be missing from the page

I am currently working on developing a responsive navigation bar with CSS animation. However, I am encountering some issues when trying to run the code on my laptop. Upon running it, only the checkbox appears while the list of navigation items is displayed ...

htmlcssnavbar

Ways to increase the spacing between content boxes using Bootstrap

I currently have a row of three Bootstrap boxes structured like this: <div class="row"> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </div> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </di ...

htmlcsstwitter-bootstrap

Having trouble accessing the link from the dropdown list in Selenium

While trying to select a link from a dropdown menu, I am facing an issue with Selenium. The element is being located successfully, but it cannot be interacted with and the following exception is thrown: Error in thread "main" org.openqa.selenium.ElementNo ...

javahtmlseleniumselenium-webdriverselenium-iedriver

Creating a customized design for your jQuery UI modal dialog box using CSS

I recently had to customize the jqueryui modal dialog in order to meet the standards set by my company. Currently, I am facing a cross-browser issue with the float and width of the input labels. You can view the sample website here: http://inetwebdesign. ...

jquerycssuser-interfacedialogmodal-dialog

The table does not move up or down when using the mousewheel over the rows, but only when

I'm encountering an issue with a table inside a div that has overflow-y: scroll applied to it. While the scrollbar appears when there is content overflow, I am unable to scroll using the scrollwheel. It only works when the cursor is directly on top o ...

htmlcssscroll

How to link a CSS file from a JavaScript file

I have a form for users with fields for first name, last name, password, and confirm password. I've implemented validation to check if the password and confirm password fields match using JavaScript: $(document).ready(function() { $("#addUser").cl ...

javascriptjavacssjspstyles

What is the best way to align HTML elements in a single row?

I have the following code snippet... <div class="header"> <div class="mainh"> <div class="table"> <ul> <li><a>smth</a></li> ...

htmlcssalignmenthtml-liststext-align