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:

https://i.sstatic.net/I57Qj.png

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

Improve the way you manage the active selection of a button

ts isDayClicked: { [key: number]: boolean } = {}; constructor() { } setSelectedDay(day: string, index: number): void { switch (index) { case 0: this.isDayClicked[0] = true; this.isDayClicked[1] = false; this.isDay ...

htmlcssangulartypescriptionic-framework

The sup tag does not function properly when used within the title tag

I added a sup tag inside a title tag but it doesn't seem to work. Surprisingly, the same sup tag works perfectly fine within li tags. Can anyone explain why this is happening? I tried changing the title tags to H class tags but I'm still curious ...

htmlcss

Creating a dynamic web application using Node.js, HTML, and MySQL arrays

After querying my database from MySQL Workbench, I need to convert the retrieved data into HTML code. connection.query( 'SELECT dealer_infor.dealer_id, dealer_infor.dealer_branch, dealer_infor.dealer_address, dealer_infor.dealer_tel, dealer_infor. ...

htmlmysqlnode.js

Is there a way to apply CSS styles to a specific word within a div that corresponds to the word entered in the search box?

Using a searchbox, you can enter words to find pages with the searched-for word in the page description. If the word is found in the description, a link to the page along with the highlighted word will be displayed. However, I am encountering an issue wher ...

jqueryhtmlcss

Creating interactive and adaptable maps

Currently, I am working on making a Joomla website responsive. However, I have encountered an issue with the SobiPro Map. The problem arises when displaying a map (background img) and points (a link + img) over it with an absolute position. As a result, wh ...

javascriptjqueryhtmlcss

Tips on changing the outline color by clicking

I'm working on a simple code where I need to change the outline color when a user clicks on a text field. <input type="text" id="box1" /> <input type="password" id="box2" /> <input type="email" id="box3" /> <input type="submit" ...

javascriptjqueryhtmlcss

Tips for ensuring Node.js waits for a response from a substantial request

When uploading a large number of files, the process can take several minutes. I am currently using a multi-part form to post the files and then waiting for a response from the POST request. However, I am facing issues with timeouts and re-posting of files ...

javascripthtmlnode.jsexpressmultipartform-data

Tips for aligning text in MUI Breadcrumbs

I am currently utilizing MUI Breadcrumb within my code and I am seeking a solution to center the content within the Breadcrumb. Below is the code snippet that I have attempted: https://i.stack.imgur.com/7zb1H.png <BreadcrumbStyle style={{marginTop:30}} ...

javascriptcssreactjsmaterial-ui

Utilize HTML5 local storage to highlight a specific row in a table

Currently, we are in the process of developing a code that involves marking table rows using HTML5 local storage and jQuery. Below is the initial code snippet... $(document).ready(function () { $('table tbody tr').click(function() { ...

jqueryhtml

The Php Include function is known to create unnecessary whitespace and disregard any specified styles

On one of my web pages, I am using the include() function to bring in content from another page. This external page contains both HTML and PHP code, with echoes for output. Here's an example: The page Apple.php looks like this: <html> <head ...

phphtml

Eliminate excess space around images in Bootstrap

I have an image tag with a padding applied to it. I am using the Bootstrap CSS framework. Currently, there is a white background behind the image that I want to remove and make it partially transparent instead. The image is in PNG format, so I suspect the ...

jqueryhtmlcsstwitter-bootstrap

When accessing xmlHttp responseText, it displays the contents of the PHP file instead of outputting the results of executing

I have two programs, test.html and test.php test.html: <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js" ...

phphtml

What is the best way to extract user input from a web form and utilize it to perform a calculation using jQuery?

Is it possible to retrieve user input from a web form and use it to perform calculations with jquery? I am interested in extracting a numerical value entered by a user in a web form. Upon clicking "NEXT", I intend to multiply this number by a predefined c ...

jqueryhtmlwebforms

Customize Bootstrap to change the hover color of a button

I'm currently working on customizing the style of my buttons so that when hovered over, they become a lighter shade instead of a darker one. I've explored the Bootstrap customization page (http://getbootstrap.com/customize/), but unfortunately, t ...

htmlcssresponsive-designtwitter-bootstrap-3

A guide on dynamically sending data to a PHP script when an input is changed and displaying the results in a

I am trying to implement a feature where the data inputted into a text field is sent to posttothis.php and then the result is displayed in a content div. However, I am encountering difficulties in making it work. testscript.html <html> <head> ...

javascriptphpjqueryhtmlajax

Embed the aspx file within the background-image attribute similar to how an image source is

Within my asp.net application, there is an image tag linking to another aspx file in the src attribute, displaying a picture. <img src="/picture.aspx?Param=3" alt="picture"/> I need to convert the image tag into a div with a background-image proper ...

javascripthtmlasp.netimagebackground-image

Is it possible to make the background of the HTML Embed object transparent instead of grey?

I am currently utilizing Firefox along with an open-source plugin for video playback. The video is adjusted to fit the available space as defined by the width and height of the embed object, but occasionally a slight grey border appears on the right or bot ...

htmlcssfirefoxembedbrowser-plugin

Implementing a watcher property in JavaScript to dynamically add a class to an element

I'm currently facing an issue where I need to apply a class to an element when a certain data property changes. My approach involves using a watcher to monitor the value change and adding a class through JavaScript, as demonstrated in the code snippet ...

javascriptcssvue.js

Is there a way to prevent text flipping using CSS or jQuery?

Is there a way to prevent the contents of an object from flipping when it is rotated +180°? I want to keep everything inside readable and avoid any flipping effects. ...

csstextrotationflip

Selenium WebDriver is struggling to locate an element using link text

I'm currently facing a challenge in selecting an element that contains an anchor within a paragraph inside a div. The HTML structure I am working with is as follows: <a class="item" ng-href="#/catalog/90d9650a36988e5d0136988f03ab000f/category/DATA ...

javahtmlseleniumselenium-webdriver