Develop a chart featuring sub-categories and column headings

I'm in the process of creating a table with subcategories and headers that resembles the image provided below:

Here's what I've come up with so far:

<table>
    <thead>
    <tr>
        <th>Item</th>
        <th>Openings</th>
        <th>Internal Dimensions</th>
            <th>Weight</th>
            <th>Volume</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Box</td>
        <td>300x500</td>
        <td>300cm x 400cm x 600cm</td>
        <td>Min: 100g, Max: 200g, NA</td>
        <td>300</td>
    </tr>
    </tbody>
</table>

Is it feasible to achieve a table layout similar to the provided image above?

htmlcss

Answer №1

previously answered but the formatting should be similar to this :

<table>
    <thead>
        <tr>
            <th colspan="2">Object</th>
            <th colspan="2">Openings</th>
            <th colspan="3">Internal Dimensions</th>
            <th colspan="3">Weight</th>
            <th>Volume</th>
        </tr>
        <tr>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>row header</th>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
    </tbody>
</table>

when styled, it looks like : http://fiddle.jshell.net/TLAV8/ http://jsfiddle.net/TLAV8/

Answer №2

Check out this code snippet for a table layout

<body>
<table class="table-bordered">
    <col>
    <col>
    <col>
    <colgroup span="4"></colgroup>
    <col>
    <tr>
        <th rowspan="2" style="vertical-align : middle;text-align:center;">S.No.</th>
        <th rowspan="2" style="vertical-align : middle;text-align:center;">Item</th>
        <th rowspan="2" style="vertical-align : middle;text-align:center;">Description</th>
        <th colspan="3" style="horizontal-align : middle;text-align:center; width: 50%;">Items</th>
        <th rowspan="2" style="vertical-align : middle;text-align:center;">Rejected Reason</th>
    </tr>
    <tr>
        <th scope="col">Order</th>
        <th scope="col">Received</th>
        <th scope="col">Accepted</th>
    </tr>
    <tr>
        <th>1</th>
        <td>Watch</td>
        <td>Analog</td>
        <td>100</td>
        <td>75</td>
        <td>25</td>
        <td>Not Functioning</td>
    </tr>
    <tr>
        <th>2</th>
        <td>Pendrive</td>
        <td>5GB</td>
        <td>250</td>
        <td>165</td>
        <td>85</td>
        <td>Not Working</td>
    </tr>
</table>

Answer №3

Here is an example:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>Testing</title>
    <style type="text/css">
        table {
            width: 100%;
            border: 1px solid black;
        }

            table td, table th {
                border: 1px solid black;
            }

            table .FirstColumn {
                background-color: #9999dd;
            }

            table thead tr {
                background-color: blue;
            }

            table tbody.secondHeader tr {
                background-color: skyblue;
            }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <colgroup>
            <col class="FirstColumn">
        </colgroup>
        <thead>
            <tr>
                <th colspan="2">Object</th>
                <th colspan="2">Openings</th>
                <th colspan="3">Internal Dimensions</th>
                <th colspan="3">Weight</th>
                <th>Volume</th>
            </tr>
        </thead>
        <tbody class="secondHeader">
            <tr>
                <th>Type</th>
                <th>Size</th>
                <th>Width</th>
                <th>Height</th>
                <th>Length</th>
                <th>Width</th>
                <th>Height</th>
                <th>Max</th>
                <th>Min</th>
                <th>Tare</th>
                <th>Capacity</th>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>20 std</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>40 std</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>50 std</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>60 std</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

If you want to learn more about HTML tables and their variations, I recommend exploring resources like this one, which cover concepts such as colgroup, col, and colspan.

Answer №4

Implementing CSS

<style type="text/css">
.green_bg{ background-color: green; }
</style>
<table>
    <thead>
        <tr>
            <th>Goodbye</th>
            <th>Goodbye</th>
            <th>Goodbye</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="green_bg">Goodbye</td>
            <td class="green_bg">Goodbye</td>
            <td class="green_bg">Goodbye</td>
        </tr>
        <tr>
            <td class="green_bg">Goodbye</td>
            <td>Goodbye</td>
            <td>Goodbye</td>
        </tr>
        <tr>
            <td class="green_bg">Goodbye</td>
            <td>Goodbye</td>
            <td>Goodbye</td>
        </tr>
        <tr>
            <td class="green_bg">Goodbye</td>
            <td>Goodbye</td>
            <td>Goodbye</td>
        </tr>
    </tbody>
</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

Struggling to properly center the footer on my Django template

I'm currently facing an issue when attempting to align my footer in the center of my Django template. The specific class for the footer is Pagination. Base HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict ...

htmlcssdjangosticky-footer

What is the best way to remove table cells from a TableBody?

Currently, I am in the process of designing a table to display data retrieved from my backend server. To accomplish this, I have opted to utilize the Table component provided by Material UI. The data I retrieve may either be empty or contain an object. My ...

javascriptcssreactjshtml-tablematerial-ui

Ways to determine if a new set of input values duplicates previous rows in an array

My form has an array of input fields. Is there a way to validate each row's inputs and ensure that they all have at least one unique value in any field, preventing identical rows? For example, the 2nd row should only be allowed to have a maximum of ...

javascripthtmlarraysvue.js

Can you explain the significance of the characters '& > * + *' in JSX (CSS)?

When using material UI, the progressbar demo includes lines of JSX code like this: '& > * + *': { marginTop: theme.spacing(2), }, Can you explain what the selector '& > * + *' represents in this context? ...

cssreactjsjsx

showcasing pictures on a .handlebars/html interface

Having some trouble linking images to my .handlebars/html files in the views directory. I've already set up a public folder as per the requirements, but the linked images still aren't showing up when I view my webpage. Below is the node.js code ...

htmlexpresshandlebars.js

Delete the tag that comes before

Is there a specific tag like: <p id="name" onclick="javascript:var ele=context(this);">sumtext here</p><br> <p id="name" onclick="javascript:var ele=context(this);">newtext here</p><br> <script ...

javascripthtmldom-events

Activate the overflow feature within native-base cards

I have a unique design element on a website that showcases an image overflowing off a card. The image has a negative margin-top of -50, creating this effect. Now I'm trying to replicate this design in react-native using native-base components. Here i ...

cssreact-nativenative-base

The text should be wrapped to overlap with an image positioned above it

Currently, I am in the process of enhancing a webpage that contains a significant amount of old legacy code. One issue I have encountered pertains to text wrapping within a fixed-height and width container, as illustrated in the image below: The first ima ...

htmlcss

Achieve consistent column heights with flexbox styling

I have a solution for achieving equal height columns using the CSS property display:table. Here is an example: .row { display: table; width: 100%; } .col{ display: table-cell; } However, in my case, I am using flexbox and the row class has ...

htmlcssflexbox

"Enhanced interactivity: Hover effects and selection states on an image map

Hello there, I need assistance with my code. Here it is: <img id="body_image" usemap="#body_map" src="assets/images/body.jpg" alt=""> <map name="body_map"> <area shape="poly" alt="d" href="#body_chart" name="ad" coords="153, 153, 145, 1 ...

javascriptjqueryhtmlcssimage

What impact does setting a variable equal to itself within a Dom Object have?

Within my code example, I encountered an issue with image sources and hrefs in a HTML String named tinymceToHTML. When downloading this html String, the paths were set incorrectly. The original image sources appeared as "/file/:id" in the String. However, ...

javascripthtmlvariable-assignment

Bootstrap Dropdown Functionality Malfunctioning

Here is a simple piece of HTML code that I have created: <!doctype html> <html> <head> <meta charset="utf-8"> <title>.:Home Page:. The Indian Sentinel</title> <link rel="stylesheet" href=" ...

javascriptjqueryhtmlcsstwitter-bootstrap

Troubleshooting problem with jQuery UI accordion and sortable feature

I've run into an issue with the sortable functionality of accordion. I am attempting to drag and reorder the <h3> elements, but for some reason, the sorting is not functioning as expected. I followed the instructions from the official demo (here ...

jqueryhtmljquery-uiaccordionjquery-ui-sortable

Having trouble with script tag not loading content in Next.js, even though it works perfectly fine in React

Currently, I am attempting to utilize a widget that I have developed in ReactJS by utilizing script tags as shown below- React Implementation import React from "react"; import { Helmet } from "react-helmet"; const Dust = () => { ...

javascriptcssreactjsnext.jsreact-widgets

Is there a way to obtain metadata for a specific link?

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><$BlogPageTitle$></title> <meta property="og:title" content=" ...

javascripthtmlcss

hidden behind the frame is a drop-down menu

I am currently working on a website that uses frames. The topFrame.php contains a menu with drop-down submenus, while the main frame displays the website content. However, I am encountering an issue where the submenu in the topFrame is getting hidden beh ...

htmlcssmenuframe

The flipping CSS code will not be compatible with IE 11

I'm experimenting with creating a flip animation that reveals link text when images are flipped. Everything works fine in most browsers, except for IE11. Apparently there's an issue with transform-style: preserve-3d; in IE10, but being new to CS ...

htmlcssinternet-explorerflip

The functionality of two-way binding in a distinct controller is not functioning properly when integrated with angular-wizard

I've been working hard to integrate this amazing wizard controller into my project: However, I've hit a roadblock with two-way binding not functioning as expected outside of the <section> attribute: http://plnkr.co/edit/N2lFrBRmRqPkHhUBfn ...

javascripthtmlangularjs

Issue with a Bootstrap panel displaying incorrect border formatting

I am currently working with Angular UI Bootstrap and facing an issue with an accordion component. Everything works perfectly fine in the development environment with the full version of the Bootstrap Cerulean file. However, when I minify the CSS file for p ...

htmlcssangularjstwitter-bootstrap

Tips for maintaining consistent webpage layout across various screen sizes

Although this method may seem outdated, I have always been intrigued by how it was accomplished. In the past, before websites became responsive, pages would simply shrink down to fit on mobile devices without adjusting their appearance. How was this achie ...

htmlcss