Problem encountered with HTML table formatting

I am struggling to create a table in HTML

Click here for image

Here is the code I have tried:

<table>
  <tr>
    <th class="blue" colspan="3">3</th>
    <th class="orange " rowspan="2">2</th>
    <th class="blue" colspan="3">3</th>
  </tr>
  <tr>
    <td class="cyan" rowspan="4">4</td>
    <td class="cyan">1</td>
    <td class="cyan">1</td>
    <td class="cyan">1</td>
    <td class="cyan">1</td>
    <td class="cyan" rowspan="4">4</td>
  </tr>
  <tr>
    <td class="orange" colspan="2">2</td>
    <td class="orange" rowspan="3">3</td>
    <td class="orange" colspan="2">2</td>
  </tr>
  <tr>
    <td class="cyan" rowspan="2">2</td>
    <td class="cyan" rowspan="2">2</td>
    <td class="cyan" rowspan="2">2</td>
    <td class="cyan" rowspan="2">2</td>

  </tr>
  <tr>

  </tr>
  <tr>
    <td class="green" colspan="2">2</td>
    <td class="orange">1</td>
    <td class="cyan">1</td>
    <td class="orange">1</td>
    <td class="green" colspan="2">2</td>
  </tr>

</table>

However, one row (penultimate row) is not being displayed. Here is how it looks:

See image of the output here

Any suggestions on how to fix this issue?

htmlcsshtml-table

Answer №1

The reason for this issue is that an empty tr element doesn't have any height in the html DOM. To make it consistent, you can apply some CSS height and width properties like so:

        td {
            min-height: 2em;
            min-width: 2em;
        }
        tr {
            height: 2em;
        }
        .empty-row {
            height: 2em;
        }

Then simply add the class empty-row to the empty row in your code.

<tr class="empty-row"></tr>

By doing this, the rendering will be improved as expected:

Answer №2

Initially, the 5th "row" you added doesn't actually qualify as a row since it lacks any cells. Without content, rows have zero height. If your intention was to increase the height of cells above it, it's advisable to adjust the height settings on those specific cells.

You can set a custom height for one of the cells in the 4th row, making it twice the height of the other normal cells. I achieved this by using the x class as demonstrated below:

table {
min-width: 400px;
border-collapse: collapse;
}
th, td {
border: 1px solid #555;
height: 60px;
text-align: center;
}
.x {
height: 120px;
}
<table>
            <tr>
                <th class="blue" colspan="3">3</th>
                <th class="orange " rowspan="2">2</th>
                <th class="blue" colspan="3">3</th>
            </tr>
            <tr>
                <td class="cyan" rowspan="4">4</td>
                <td class="cyan">1</td>
                <td class="cyan">1</td>
                <td class="cyan">1</td>
                <td class="cyan">1</td>
                <td class="cyan" rowspan="4">4</td>
            </tr>
            <tr>
                <td class="orange" colspan="2">2</td>
                <td class="orange" rowspan="3">3</td>
                <td class="orange"  colspan="2">2</td>
            </tr>
            <tr>
                <td class="cyan x" rowspan="2">2</td>
                <td class="cyan" rowspan="2">2</td>
                <td class="cyan" rowspan="2">2</td>
                <td class="cyan" rowspan="2">2</td>

            </tr>
            <tr>                

            </tr>
            <tr>                
                <td class="green" colspan="2">2</td>
                <td class="orange">1</td>
                <td class="cyan">1</td>
                <td class="orange">1</td>
                <td class="green" colspan="2">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

Changing the background color of the canvas using Javascript

I want to create a rect on a canvas with a slightly transparent background, but I don't want the drawn rect to have any background. Here is an example of what I'm looking for: https://i.stack.imgur.com/axtcE.png The code I am using is as follo ...

javascripthtmlcsscanvas

Tips for resolving a flickering issue that occurs when switching to an input field with our default value / placeholder plugin

In the realm of web development, numerous plugins cater to the implementation of HTML5's placeholder attribute in older browsers. The plugin we have opted for can be found here. Unlike some other alternatives, this particular plugin, with a few modif ...

javascriptjqueryhtmlplaceholder

Attempting to update an AJAX field with the returned value, but it only updates after clicking away from it

Image of form utilizing AJAX & JS The current setup involves a maintainer that uses AJAX to update the "Calc" field in response to a number entered in the "Order No" field. The issue is that the "Calc" field does not update immediately after typing in the ...

javascriptjqueryhtmlajax

Guide to resolving the issue of "Links lacking a clear name" in Lighthouse

Lighthouse is recommending that I address my a href text Here is the HTML code snippet in question: <a href="https://twitter.com/@some-name-here" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a> The issue is that I a ...

htmlcsslighthouse

The jQuery datatable offers a convenient date function that allows for date manipulation in milliseconds format

Recently, I have been working on updating the task owner ID using a lookup field selection in my code. The tasks are displayed based on the selected date from a datepicker value under the query in the controller. However, I encountered an issue where the a ...

javascriptjqueryhtmldatatable

Utilizing jQuery's each() function to create a seamless loop of background images in a

Struggling with looping the background image in a slick slider? Check out the code snippet below. var json = [ { "img_url": "https://via.placeholder.com/500x500?text=1" }, { "img_url": "https://via.placeholder.com/500x500?text=2" }, { "img_url": "ht ...

javascriptjquerycss

I found myself pondering the method to achieve the slightly blue tinted box that sits behind the image

Can you assist me in achieving this specific look? I have my MUI app bar and home page set up, but I'm unsure how to create the blue-ish box behind the image. Should I place the container within my app bar or integrate it into my homepage file? Additi ...

cssreactjsmaterial-ui

Modify the appearance of the element that is currently chosen

I have a navigation menu and I would like to change the style of the element that is selected from the list in the navigation menu. I am using React with the Grid element from material-ui. NavigationMenu.tsx: import React, { useState, useEffect } from "r ...

cssreactjsmaterial-ui

Using addClass and removeClass functions in JQuery when selecting a radio button

I am facing an issue with my radio buttons being displayed as images. When a picture (radio button) is selected, I want the other pictures to become hidden. To achieve this, I plan to add a class to the checked picture and then add another class to the unc ...

javascriptjqueryhtmlradio-buttonchecked

Is it possible for me to route a URL to a particular content generated by Ajax on a separate webpage?

I appreciate anyone taking the time to help with this, especially since I already had to get 12 stitches. Here's what I'm dealing with: mysite.com/documentation - page with a menu and content section (content will load dynamically via Ajax w ...

javascripthtmlajax

Hovering over the Instagram icon will reveal a stunning visual effect

I am looking to change the appearance of my Instagram icon when hovering over it. I want the background to turn white and the icon to become colored. Here is my code snippet from Footer.js : <a href="https://www.instagram. ...

cssreactjsinstagram

My intention is to personalize the react-select component to suit my needs

My task involves changing the size of the arrow to be smaller and positioning it under the circle. Despite setting the width and height in the CSS, the desired effect is not achieved. To align with the UI requirements, I need to adjust the swiper-button- ...

htmlcssreactjs

Conceal elements on smaller screens using the Bootstrap 5 grid system

I'm facing a design issue with my layout - it looks perfect on larger screens but when viewed on mobile devices, the columns stack vertically instead of horizontally. Essentially, I want to hide the first and second last column on small screens and r ...

htmlbootstrap-5

[Vue alert]: "Maximum" property or method is not declared in the instance but is being referenced during the rendering process

Here is my custom Vue component: Vue.component("product-list", { props: ["products", "maximum-price"], template: ` <div> <div class="row d-flex mb-3 align-items-center p-3 rounded-3 animate__animate ...

javascripthtmlvue.jsfrontendcomponents

Resizing the elements within an iframe: Troubleshooting problems with embedding Bandcamp players

My goal is to embed a Bandcamp music player on my WordPress blog page, but I'm facing a challenge. The maximum width of the current player is 700px and I need it to be 900px. After consulting with someone at Bandcamp, they directed me to the old versi ...

htmlcssjsoniframe

Centering an image on a webpage using CSS

Here is the code I am using for displaying my image: return <div class="imgContainer"><img src={broomAndText} alt="broomAndText" /></div> In my css file, I have included the following styling: .imgContainer { tex ...

htmlcssreactjs

Firefox presents a compact box positioned between the images

When attempting to use flags as a way to switch between languages, I encountered an issue in Firefox where a small box appears between the images on the Hebrew site. In Chrome, everything works fine. I implemented the following code: <div class="flags ...

csshtml

What is the best way to specify attributes such as font size and padding for the mobile version in AMP for email?

I attempted to utilize media queries to create a responsive AMP email, but it seems that this feature is not supported in AMP. However, I discovered that you can define media="(max-width: 599px)" and media="(min-width: 600px)" for , but the same ...

htmlmedia-queriesamp-htmlamp-email

The text sliding feature gradually moves further away from the left side with each iteration

I am in the process of transferring an existing slider from one website to another. Instead of creating a text slider from scratch, I decided to modify the code I found for the new site. However, the slider is not functioning correctly on the new site. Th ...

javascriptjqueryhtmlcss

HTML Scripts: Enhancing Web Functionality

I have another question regarding executing a script (docs()) upon clicking on text. I attempted to use the following code: <p><span class="skill">Documentation can be found here.<script>docs()</script></span></p> Unfo ...

javascripthtml