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

Updating the navigation with a dynamic CSS class using jQuery

Hey there, I'm on the lookout for a simple and discreet method to dynamically add an "active" class to a navigation menu based on the current directory. Unfortunately, I am unable to modify the body tag with a custom class, ruling out a pure CSS solut ...

jquerycss

Is there a way to invoke a client-side function from the server?

Is there a way to display an alert at the top of the browser if the SQL query returns empty results? I tried using the "alert" function, but I'm struggling with customizing its appearance. I have a function in my HTML code that triggers an alert, but ...

htmltypescriptexpress

Fade in and out on button press

There is a button with the following HTML code: <input type="submit" id="btnApply" name="btnApply" value="Apply"/> Upon clicking the button, a div should be displayed. <div> Thanks for applying </div> The display of the div should fade ...

javascripthtml

Tips for adjusting an svg component to suit various screen sizes

I inserted the following SVG component into my HTML file. It fits perfectly on my tablet, but it's too large for my smartphone. How can we automatically adjust the size of the SVG to fit different screens? <svg viewBox="310 -25 380 450" w ...

javascripthtmlcssionic3

Transition effects in CSS when hovering

I've run into an issue where I'm attempting to create a hover transition effect on a div when the mouse hovers over it. The idea is that hovering over the main div should trigger another div to appear above it, with a smooth transitioning effect. ...

htmlcss

jquery deleting the parent container of a child element

I have been attempting to eliminate the parent element of the label associated with the attribute record_type. Below is the HTML content: <div id="append"> <div class="col-md-6 form-group hide_fields" style="display: block;"> <l ...

jqueryhtmlparent

Tips for preventing a React component from scrolling beyond the top of the page

I am looking to achieve a specific behavior with one of my react components when a user scrolls down a page. I want the component to reach the top of the page and stay there without moving any further up. Here is an Imgur link to the 'intranet' ...

javascriptcssreactjsflexbox

Submit a list of checkboxes selected to Google Sheets separated by commas

Is there a way to modify the script I'm using to enter data from an HTML form into a Google Sheet so that my checkbox fields will be entered as a list, separated by commas? If all boxes were checked in the example form below, I would like the cell fo ...

javascripthtmlformsgoogle-apps-scriptcheckbox

What is the method for creating a hover line that perfectly mirrors the length of text above it?

I'm interested in creating a hover effect where a line appears above my text when hovering over it. The twist is, I want the hover line to match the length of each individual text. This effect will be applied to the navigation section of my HTML. Her ...

htmlcss

What is the best way to ensure PyScript is completely initialized, including the environment?

Hey there! I'm hoping to catch a specific message being logged in my browser's console by a script I added to my HTML file, and then trigger a JavaScript action based on that. For instance, when "ABCD:READY" appears in the console, I want to cal ...

javascripthtmlbrowserpyscript

Every time I try to call the event in jQuery for the second time, it fails to work

I am currently working on a website that features an image gallery powered by the jquery wookmark plugin with filtering capabilities. Recently, I integrated the colorbox plugin (which was provided as an example by wookmark) to enhance the user experience. ...

javascriptjqueryhtmlcolorboxwookmark

When adding text to a React Material UI Box, it can sometimes extend beyond the boundaries

I'm currently working on a straightforward React page, but I've encountered an issue right from the start: my text is overflowing the box and I can't figure out why. Could someone take a look at my styles? Here's a picture showing the ...

cssreactjsmaterial-ui

Having a floating left <UL> list with floating right text boxes positioned below the UL list instead of being set next to it

I'm attempting to align an unordered list on the left and a group of textboxes on the right within a div tag. The problem I'm facing is that the text boxes are positioned below the list items instead of being adjacent to them. .PersonLI { flo ...

htmlcss

Is it possible to have a full-width thumbnail navigator in a full-width slider container with Jssor Slider?

I apologize if this topic has already been discussed, In a responsive full-width slider container, I am utilizing thumbnail navigator 03 with the scaling option disabled. Is it feasible to have a fixed-height, but fully (100%) width thumbnail navigator t ...

jqueryhtmlcssjssor

Preventing ReactJS tooltips from exceeding the boundaries of the screen

Here is a simple demo showcasing blocks with tooltips that appear when hovered over. However, there seems to be an issue with the functionality. The tooltip should ideally be displayed either from the left or right side of the block. To determine the size ...

javascripthtmlcssreactjs

Attempting to sort through elements in JavaScript

I'm looking to filter specific films based on choices made in the dropdown menus below. <select id="filmDropdown"> <option value="0">All Films</option> <option value="1">Film 1</option> <option ...

javascripthtmlfor-loopif-statementdropdown

Is it possible to customize the background color for particular days in FullCalendar?

How can I set background colors for specific days? While experimenting, I discovered this method: $('.fc-day15').css('backgroundColor','black'); The only issue is that the colors appear on the 16th day in the calendar grid, ...

jquerycssfullcalendar

Center a grid of cards on the page while keeping them aligned to the left

I have a grid of cards that I need to align in the center of the page and left within the grid, adjusting responsively to different screen sizes. For example, if there are 10 cards and only 4 can fit on a row due to screen size constraints, the first two ...

javascriptcssreactjstypescriptmaterial-ui

Content Division with Sticky Footer

I have successfully made my footer stay at the bottom of the page by following this method: Now, I am facing an issue where my #content div has borders on the left and right sides but does not expand to match the height of the #wrapper. Your help in reso ...

htmlcssxhtml

Ensuring Consistent Visual Harmony Across Linked Elements

As part of my project developing an iPad app with PhoneGap and jQuery Mobile, I am looking to incorporate a preview pane within a carousel. This preview pane should display smaller versions of the other panes scaled inside it. The panes are dynamic and upd ...

javascriptjqueryhtmlcss