HTML Table Column Alignment: Ensuring a Clean and Organized Layout

I'm currently working on constructing tables that demonstrate parent/child connections. Consider this example.

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4969b9b808780869584b4c1dac4dac6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<table class="table">
...

If you examine this, you'll notice how the "Amount" column shifts due to the lengthy "Taste" header causing misalignment. Can we adjust the spacing for the secondary headers (Type, Amount, Color, Other, Other2) uniformly? Or do you have a more effective approach to represent these parent and child records using HTML tables?

Solution 

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ceee3e3f8fff8feedfcccb9a2bca2be">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<table class="table">
...

htmlcssbootstrap-5

Answer №1

If you want to display your logical subtable as an actual table within a main table cell, follow these steps. Begin by converting the rows representing your subtables into tables, ensuring they are inside a td element with appropriate colspans applied. I have demonstrated this for the first "subtable" row and urge you to do the same for the remaining ones. Keep in mind that the width of the Type column may be wider due to longer content, but feel free to style it as needed. Remember to apply this method to all subsequent subtables that were left unchanged.

The recipe for this format:

Your initial structure: 

<tr><!-- your subtable here --></tr>

Converted version:

<tr>
    <td></td>
    <td colspan="7">
        <table style="width: 100%;">
            <!-- your subtable here -->
        </table>
    </td>
</tr>

Answer №2

I believe this is what you are seeking! Modify colspan="1" to colspan="2" for the "Taste" section.

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c3ceced5d2d5d3c0d1e1948f918f93">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<table class="table">
  <tr>
    <th style="background-color:#ddd;" colspan="1">
      Fruit: Apple
    </th>
    <th style="background-color:#ddd;" colspan="2">
      Taste: Very sweet and Delicious
    </th>
    <th style="background-color:#ddd;" colspan="5">
      Shape: Round
    </th>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 01
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3423
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Granny Smith</td>
    <td>1000</td>
    <td>Green</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Fuji</td>
    <td>2000</td>
    <td>Red</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 02
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3424
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Granny Smith</td>
    <td>2000</td>
    <td>Green</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Fuji</td>
    <td>3000</td>
    <td>Red</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
</table>
<br><br><br>
<table class="table">
  <tr>
    <th style="background-color:#ddd;" colspan="1">
      Fruit: Orange
    </th>
    <th style="background-color:#ddd;" colspan="2">
      Taste: Sweet and acidic
    </th>
    <th style="background-color:#ddd;" colspan="5">
      Shape: Round
    </th>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 01
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3423
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Granny Smith</td>
    <td>1000</td>
    <td>Green</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Fuji</td>
    <td>2000</td>
    <td>Red</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 02
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3424
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Orange 1</td>
    <td>Orange 2</td>
    <td>Orange</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Orange 1</td>
    <td>Orange 2</td>
    <td>Orange</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
</table>

Answer №3

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb9b4b4afa8afa9baab9beef5ebf5e9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<table class="table">
  <tr>
    <th style="background-color:#ddd;" colspan="1">
      Vegetable: Carrot
    </th>
    <th style="background-color:#ddd;" colspan="1">
      Taste: Crunchy and Fresh
    </th>
    <th style="background-color:#ddd;" colspan="5">
      Shape: Cylindrical
    </th>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 01
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3423
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Baby Carrots</td>
    <td>500</td>
    <td>Orange</td>
    <td>organic info</td>
    <td>natural info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Rainbow Carrots</td>
    <td>700</td>
    <td>Purple, Orange, Yellow</td>
    <td>specialty info</td>
    <td>colorful info2</td>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 02
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3424
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Organic Carrots</td>
    <td>1000</td>
    <td>Orange</td>
    <td>healthy info</td>
    <td>nutritious info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Heirloom Carrots</td>
    <td>800</td>
    <td>Mixed</td>
    <td>rare info</td>
    <td>heritage info2</td>
  </tr>
</table>
<br><br><br>
<table class="table">
  <tr>
    <th style="background-color:#ddd;" colspan="1">
      Vegetable: Broccoli
    </th>
    <th style="background-color:#ddd;" colspan="1">
      Taste: Nutty and Crisp
    </th>
    <th style="background-color:#ddd;" colspan="5">
      Shape: Floret clusters
    </th>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 01
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3423
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Broccolini</td>
    <td>300</td>
    <td>Green</td>
    <td>baby broccoli info</td>
    <td>tender stalks info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Chinese Broccoli</td>
    <td>200</td>
    <td>Green</td>
    <td>bok choy info</td>
    <td>Asian greens info2</td>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 02
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3424
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Purple Sprouting Broccoli</td>
    <td>150</td>
    <td>Purple</td>
    <td>sprouting broccoli info</td>
    <td>colorful sprouts info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Romanesco Broccoli</td>
    <td>100</td>
    <td>Light Green</td>
    <td>fractal pattern info</td>
    <td>unique shape info2</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

Unveiling the Masked Phone Number in jquery.maskedinput for Database Insertion

Currently, I am grappling with removing the phone number mask while working with jquery.maskedinput.min.js in an MVC web app. Here is the JavaScript code snippet I am using: @section Scripts { @Scripts.Render("~/bundles/jqueryval") <script type="text/ ...

javascriptjqueryhtmlasp.net-mvc

Can you explain how HTML and JavaScript work together in terms of execution order?

As a newcomer to JavaScript, I'm curious about the execution order of line1, line2, and line3 in my code. My initial assumption was that it would display the paragraph first (line 1), followed by the image (line 2), and then trigger a prompt. However ...

javascripthtml

Spin (svg, css) in a circular motion from any chosen point, without using the transform-origin property

My goal is to rotate an svg-rect around a specific point without relying on transform-origin, but instead using chained translates and rotation. After conducting some research, I discovered the following method: Translate the rotation point to the origi ...

cssmathsvgrotationtransformation

Unable to set child element to match parent element's height in Internet Explorer

Attempting to make a child element of a table cell inherit the height and width of the table cell through CSS. Below is the HTML provided: <tr> <td> <div class="yellowDiv"></div> </td> <td></td> ...

htmlcssinternet-explorer

Issue encountered while uploading an image and text file to the server through php

My PHP File Dilemma: While I have had success uploading images, I am encountering an 'Invalid File Error' when attempting to upload text files. Can anyone pinpoint the issue and offer a solution? <?php $allowedExts = array("gif", "jpeg", ...

phphtmlforms

HTML5 images not loading correctly upon initial load despite utilizing image.onload

Currently, I am developing a webapp using EaselJS and encountering an issue where, upon the initial load after clearing my cache, the images are loading in the top left corner at their default size (x:0, y:0, scale:1) instead of the specified position. I u ...

htmlcachingonloadeaseljs

The element is anchored within a div, but its position is dependent on a JavaScript script

I am dealing with a situation where I have a div named "Main_Card" containing text and an icon. When the icon is clicked, it moves the "Main_Card" along with everything inside of it. The challenge arises when I need to set the icon's position as eithe ...

javascriptjqueryhtmlcss

Using document.write, adding elements to an Array with Array.push, and concatenating

I need my code to be able to update the current HTML page visible to the user using document.write(). Although it successfully updates the HTML page, it doesn't display the desired text. When I utilize my code to insert an element using the addElement ...

javascripthtmlarraysstring

The DropDownList does not automatically refill with the previous selection after a page refresh

I'm encountering an issue with my HTML website where the second DropDownList is not being populated when I refresh the page or go back from a redirected page. How can I fix this? You can check out the problem I'm facing at GiveToTheYToday.org if ...

javascriptjqueryhtmldrop-down-menu

Unable to make CSS footer stay at the bottom of the page following the utilization of V-for to display a list of items in

Footer seems to be misbehaving by not staying at the bottom and instead showing under the items rendered using v-for. This issue is only happening on this page while it is working fine on others. <template> <div> <!-- Item renderin ...

cssvue.jsbootstrap-4

Could you offer assistance in resolving the error I am encountering with the collection.get() function?

I encountered an issue while trying to implement a database in my project. I imported 'collection' to use in my code. Here is the snippet: import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js"; import ...

javascripthtmlfirebase

Chosen link fails to update color

I've successfully implemented a navigation bar that changes the content in the body when each link is selected. Utilizing AJAX for dynamic content changing, I can change the color of menu items on hover but am facing issues with changing the color upo ...

htmlcss

Retrieve the information from the API and populate the tables with the data

I'm currently working on fetching API data and displaying it in tables, using mock data for now. Successfully implemented actions and reducers. Managed to call the API but encountered an issue with network calls where I see a blocked response content ...

javascripthtmlreactjsreduxmaterial-ui

Tips for achieving a unique look with CSS: Transforming border radius colors in four distinct sections

Is it possible to create a gradient border with multiple colors using border radius? div { border-radius: 30px; width: 60px; height: 60px; border: 1px red solid } Hello <div> </div> I am looking to achieve a unique effect on my bord ...

cssborder

Prevent images from overlapping in Bootstrap 4 carousel

I am working on a project using bootstrap 4. In my carousel design, I want to add another image layer at the bottom of the main image, but the code I have written is not displaying the new image in the correct position. Do you have any suggestions on how t ...

htmlcssbootstrap-4

What is the process of transitioning to keyup?

I am looking to replace the ready event with a keyup event. Here is my code snippet: $(document).ready(function(){ $('#coke').validate({ rules : { coek : { required: true, minlength: 6, maxlength: 6 ...

javascriptjqueryhtml

How can I clear all checkboxes when the checkbox with id "checkAll" is selected?

Is there a way to uncheck all checkboxes when the checkbox with id="checkAll" is checked? In my demonstration, when a user checks the checkbox with id="checkAll", all checkboxes are also marked as checked. However, I actually want it so that when the che ...

javascriptjqueryhtmlcheckbox

Instructions for creating a string builder append button that reveals a concealed modal

I'm attempting to add a button using a string builder to append the button in a placeholder. The button will be appended based on a value in the data table. The button append operation is working correctly, but the button's functionality to revea ...

htmlasp.netvb.netvisual-studiobootstrap-4

Tips for enhancing the "Eliminate render-blocking resources" score on the Lighthouse report for Progressive Web App (PWA) optimization

Check out my first attempt at a PWA here: My goal is to achieve a perfect 100% in Lighthouse for all categories :) https://i.sstatic.net/9Ql9r.png Although I've read the "Learn More" page, I'm still struggling with how to implement Bootstrap C ...

javascriptcssbootstrap-4progressive-web-appslighthouse

Is using canvas the best option for creating simple image animations with JavaScript?

I am currently working on a basic animation project using JavaScript. This animation involves switching between 13 different images per second to create movement. I have created two simple methods for implementing this animation. The first method involves ...

javascriptcsshtml