Ways to arrange specific columns within a table

I am facing an issue with aligning text in a table properly.

In my table, I have two columns - first column and second column, both with colspan="4":

It is supposed to look like this:

 <tr>
   <td colspan="4">
     First column
  </td>
   <td colspan="4">
     Second column
  </td>
</tr>
     <tr class="empty"><td colspan="8">&nbsp;</td></tr>
     <tr>
        <td colspan="4">
           <?php echo 'Price';?>:
        </td>

        <td colspan='1' style="text-align: right">
            <?php echo 'Value';?>
        </td>
        <td style="padding-left:10px" colspan='1' >
            <?php echo 'Currency';?>
        </td>
        <td colspan='2'>&nbsp;</td>    
    </tr>
 <tr>
    <td colspan="4">
       </td>
       <td colspan="1" style="text-align: right"><?php echo $price; ?></td>
       <td colspan="1" class="pull-right"><?php echo $currency; ?></td>
       <td colspan="2" style="height:10px;">&nbsp;</td>
 </tr>   

.pull-right {
                padding-left: 10px;   
            }
htmlcsshtml-table

Answer №1

There are a couple of issues with the code provided. Firstly, it's important to nest rows within a table for proper structure. Secondly, the values and currencies should be displayed in a nested table format, which is missing in the current implementation. Below is a template that you can use to achieve the desired layout:

<table>
    <tr>
        <td colspan="2" style="text-align: center;">
            First Column
        </td>
        <td colspan="2" style="text-align: center;">
            Second Column
        </td>
    </tr>
    <tr>
        <td colspan="2" style="vertical-align:top;text-align: center;">
            Some Text
        </td>
        <td colspan="2">
            <table style="text-align: center; width: 100%">
                <tr>
                    <td>
                        Value
                    </td>
                    <td>
                        Currency
                    </td>
                </tr>
                <tr>
                    <td>
                        100
                    </td>
                    <td>
                        USD
                    </td>
                </tr>
                <tr>
                    <td>
                        3000
                    </td>
                    <td>
                        USD
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

After implementing this template, you should see the exact layout you're looking for. You can view the simulated result with borders added by clicking on the following link:

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

Answer №2

It's unnecessary to force colspans on this table; it appears that it can easily be achieved with three td's per tr

Here is my revised version of the table:

<table>
    <tr>
        <td>First column</td>
        <td>Second column</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="empty">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><?php echo 'Price';?>:</td>
        <td style="text-align: right;"><?php echo 'Value';?></td>
        <td style="padding-left:10px;"><?php echo 'Currency';?></td>
    </tr>
    <tr>
        <td style="height:10px;">Some Text</td>
        <td style="text-align: right;"><?php echo $price; ?></td>
        <td style="padding-left:10px;"><?php echo $currency; ?></td>
    </tr>
</table>

Answer №3

In order to achieve the desired appearance, you can use the following code:

<table>
    <tr>
        <td colspan="4">First Column</td>
        <td colspan="4">Second Column</td>
    </tr>
    <tr>
        <td rowspan="3" colspan="4" style="vertical-align:top;">Some Text</td>
        <td>Value</td><td colspan="3">Currency</td>
    </tr>
    <tr>
        <td>100</td>
        <td colspan="3">USD</td>
    </tr>
    <tr>
        <td>3000</td>
        <td colspan="3">USD</td>
    </tr>
</table>

However, it may be unnecessary to use colspan="4" on the first and second columns. Removing all colspan attributes and just adding colspan="2" to the row with "second column" will simplify the structure while maintaining the same appearance.

Answer №4

To achieve the desired results, it is recommended to eliminate 

<td colspan="2" style="height:10px;">&nbsp;</td>
. Additionally, when working on other columns, replace <td colspan='1'> with <td colspan='2'>.

HTML

<table>
<tr>
   <td colspan="4">
     First column
  </td>
   <td colspan="4">
     Second column
  </td>
</tr>
     <tr class="empty"><td colspan="8">&nbsp;</td></tr>
     <tr>
        <td colspan="4">
           Price
        </td>

        <td colspan='2' style="text-align: right">
            Value
        </td>
        <td style="padding-left:10px" colspan='2' >
            Currency
        </td> 
    </tr>
 <tr>
    <td colspan="4"></td>
    <td colspan="2" style="text-align: right">Price 1</td>
    <td colspan="2" class="pull-right">Currency 1</td>
 </tr>   
 </table>

Working Fiddle

PS: It is not necessary to use PHP echo to display static text.

Change from:

<td colspan="4">
  <?php echo 'Price';?>:
</td>

To:

<td colspan="4">
  Price:
</td>

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

`Responsive Site with Centered Image Overlay`

I've been attempting to center a small image within a larger one, both of which are contained within a Bootstrap Column. <div className="row justify-content-center my-5 "> <div className="col-xs-10 col-sm-6 my-auto mx-auto" ...

htmlcsstwitter-bootstrapbootstrap-4

Can an excess of CSS impact the speed and performance of a website?

After conducting thorough research on this specific topic, I was unable to locate the precise answer that I require. For instance, there are numerous divs within my project that necessitate a border. One approach is to create a distinct CSS class such as ...

htmlcss

Block users from viewing the image displayed within a JavaScript canvas

On my server, I have a path to an image that is accessed by a JavaScript to load the image onto a canvas. The script then proceeds to hide certain parts of the image using black layers. The issue arises when a user can easily view my JavaScript code, extr ...

javascripthtmlcanvas

Guide for using two Async Pipe functions in Angular 7

Two different functions are in place to check a specific condition, and the requirement is for both of them to be true simultaneously. How can *ngIf be utilized to achieve this? Currently, setting just one of them works, but the aim is to have both. HTML ...

javascripthtmlangularpipe

The process of overriding CSS applied through JavaScript

I am using a third-party multi-select dropdown. Similar to Select2, the multi-select dropdown is created using JQuery with select2.min.js and the width of the dropdown is automatically calculated. Is there any way to apply static width to it, as I believe ...

javascripthtmljquerycss

Tips for centering a list using flexbox technique

I have 3 boxes stacked vertically using flexbox, currently positioned to the left. I am looking for a more elegant solution to center them horizontally without compromising the layout. I attempted using margin: 10px auto on a div which seemed awkward in th ...

htmlcssflexboxcentering

Replacing the left styling using CSS

Struggling to adjust the position of a side panel that pops up when hovering over an option. This is the code I found in Chrome Developer Tools: <nav id= "side_nav" class= "sidebar-bg-color header-side-nav-scroll-show"> <ul ...

htmlcsscss-selectors

Stop automatic resizing on mobile device after postback

Encountered an issue with a website I'm currently developing. It's not causing any problems, but I want to enhance the user experience. My aim is to maintain the zoom levels of mobile devices after a postback. To provide more context, there is a ...

javascriptandroidhtmlasp.net

Employing CSS selectors to target the subsequent element that is accessible

Here is the structure of my HTML: <input type = "checkbox" style = "display:none" id = "select"> <label for = "select" id = 'click'> click </label> <div class = 'next'> </div> I am trying to style t ...

htmlcsscss-selectors

Step-by-step guide on building an engaging Donut chart using jQuery

After spending several hours working on it, I'm struggling to draw my donut graph with JavaScript. Can anyone provide a solution? I am looking for a way to add 25% when one checkbox is selected and +25% when two checkboxes are selected. Thank you in a ...

javascripthtmljquerycss

Picking specific <button> items

Presented here are a series of buttons to choose from: <button id="hdfs-test" type="button" class="btn btn-default btn-lg">HDFS</button> <button id="hive-test" type="button" class="btn btn-default btn-lg">HIVE</button> <button id ...

javascriptjqueryhtml

Adjusting the text color based on the dynamically set background color

If I have a calendar where each entry has a unique background color assigned to it (one color per user), including both light and dark colors that users can choose from, how can I set the text color to match the background style? Where should I begin wit ...

phpjqueryhtmlcss

having difficulty adjusting the background color of a div that is positioned absolutely

Hey there! I am new to the world of html/css and working on my very first webpage. I'm facing an issue with setting the background color for a div with the class inner. Currently, it is displaying the background color set in the banner-bottom class. ...

htmlcss

Why is the 'a' element not clickable after the AJAX complete function has executed in JavaScript?

I have a small question regarding my use of AJAX. Everything is working fine, but after the AJAX request completes, I am trying to change the element attributes such as backgroundImage dynamically. Although this process works correctly, the element that wa ...

javascripthtmlajax

Creating an attention-grabbing alert bar positioned above the menu

When I attempted to add this alert bar to my website, I encountered an issue where it was being hidden behind my menu. Some sources suggest that using z-index and position:absolute can resolve this problem by positioning one element above the other, but th ...

htmlcssmenustyles

Tab Focus discrepancy observed in Mozilla browser

Tab Focus issue with elements on Mozilla Firefox: <div class="editor-field"> <div> <%: Html.TextBox(model => model.AddressLine1, new { maxLength = 30, style = "width:300px", tabinde ...

htmlcssmodel-view-controller

Creating a visible block in ReactJS: Step-by-step guide

Hello and thank you for all the hard work you do on this platform. I am relatively new to working with ReactJS and have been encountering some difficulties trying to integrate it with sandbox environments like JSFiddle. I have a div element named "app-con ...

cssreactjsjsfiddle

Issue with window.localStorage.setItem not functioning properly on mobile devices

Currently, I am developing an HTML5 mobile application with jQuery Mobile. Below is a snippet of my code: $(document).on("click","#send_mobile_number",function(){ var mobile = $('#mobile_number').val(); var user_id = sessionStorage.get ...

androidjqueryhtmljquery-mobilelocal-storage

Adjusting box width based on device type: desktop and mobile

I'm currently working on a form that includes several mat-form-fields. I have set the width of these items to 750px, but this does not work well for mobile devices. I am trying to figure out how to make the form or mat-form-field automatically adjust ...

cssangularflexboxangular-material

Ways to display the page's content within a div container utilizing Jquery

I am attempting to display the content of a URL page (such as ) within a <div> using JQuery, but so far I have been unsuccessful. Here is an example of what I am trying to achieve: <div id="contUrl"> .. content of google.fr page </div> ...

javascriptjqueryhtml