Creating an HTML table layout: A step-by-step guide

Question

Creating an HTML table layout: A step-by-step guide

I am in need of assistance with designing an HTML layout.

My goal is to display 3 columns for each table row as described below:

Column #1 will contain text only.

Column #2 will have an inner table, which may consist of 1 or 2 rows depending on the contents of Column #3.

Column #3 will contain multiple rows, each listing the name of a food item. Healthy items should be listed first, followed by any unhealthy items. If there are only healthy items, Column #2 will display a single row with the word "HEALTHY" in it. Otherwise, both "HEALTHY" and "UNHEALTHY" will be displayed in separate rows.


Column #2       Column #3
HEALTHY         Apple
                Pear

Or it could appear as follows:


Column #2       Column #3
HEALTHY         Apple
                Pear
UNHEALTHY       Coffee crisp
                Chocolate milk

Both Column #2 and Column #3 should have grids (border top/bottom) for each row.

What would be the best way to implement this?

Please note: The row borders in Column #2 must align with those in Column #3.

I hope my explanation was clear enough.

html css

Answer 1

Answer №1

I'm not entirely certain about your specific query, but let me try to address it:

<table cellpadding="0">
    <tr>
        <td>Column A</td>
        <td>Column B</td>
        <td>Column C</td>
    </tr>
    <tr>
        <td rowspan="4">Content for Column A goes here</td>
        <td rowspan="2">CATEGORY 1</td>
        <td>Item X</td>
    </tr>
    <tr>
        <td>Item Y</td>
    </tr>
    <tr>
        <td rowspan="2">CATEGORY 2</td>
        <td>Item Z</td>
    </tr>
    <tr>
        <td>Item W</td>
    </tr>
</table>

Here is some pseudo code to help you generate the table structure:

for each item in column-B
{
    for each sub-item in item.column-C
    {
        <tr>
            if sub-item is the first in item.column-C
            {
                if item is the first in column-B
                {
                    <td rowspan="total-number-of-items">Content for Column A goes here</td>
                }
                <td rowspan="number-of-items-in-column-C">itemtext</td>
            }
            <td>sub-item-text</td>
        </tr>
    }
}

Add CSS to apply top and bottom borders:

<style>
table
{
    border-collapse: collapse;
}
td
{
    border-top: solid 1px black;
    border-bottom: solid 1px black;
}
</style>

Answer 2

I'm not entirely certain about your specific query, but let me try to address it:

<table cellpadding="0">
    <tr>
        <td>Column A</td>
        <td>Column B</td>
        <td>Column C</td>
    </tr>
    <tr>
        <td rowspan="4">Content for Column A goes here</td>
        <td rowspan="2">CATEGORY 1</td>
        <td>Item X</td>
    </tr>
    <tr>
        <td>Item Y</td>
    </tr>
    <tr>
        <td rowspan="2">CATEGORY 2</td>
        <td>Item Z</td>
    </tr>
    <tr>
        <td>Item W</td>
    </tr>
</table>

Here is some pseudo code to help you generate the table structure:

for each item in column-B
{
    for each sub-item in item.column-C
    {
        <tr>
            if sub-item is the first in item.column-C
            {
                if item is the first in column-B
                {
                    <td rowspan="total-number-of-items">Content for Column A goes here</td>
                }
                <td rowspan="number-of-items-in-column-C">itemtext</td>
            }
            <td>sub-item-text</td>
        </tr>
    }
}

Add CSS to apply top and bottom borders:

<style>
table
{
    border-collapse: collapse;
}
td
{
    border-top: solid 1px black;
    border-bottom: solid 1px black;
}
</style>

Creating an HTML table layout: A step-by-step guide

Answer №1

Similar questions

Is optgroup malfunctioning in IE 10?

Is my website broken due to Internet Explorer?

Having trouble uploading multiple input files in a Flask and HTML form

When utilizing ng-content alongside *ngtemplateOutlet, the content does not appear visible within the DOM

Achieving perfect centering in PrestaShop using CSS for both horizontal

Issues with Hovering over Button Contained in Slider

Tips for utilizing javascript document.createElement, document.body, and $(document) in an HTML web resource for Microsoft CRM code reviews

Retrieving table information using curl and regular expressions

How to Implement Flexbox Display Across Various Browsers Using jQuery?

Updating a class within an AngularJS directive: A step-by-step guide

Stop jQuery ajax from running any JavaScript code contained in a script or HTML response

The correct way to reference images in the resources folder using a URL in CSS

Experiencing difficulties with utilizing height percentages for CSS divs

Unable to assign default value to input field of type "time" in Chrome browser

Activate a specific component of hover effect within multiple components generated by the `v-for` loop

Customizing Images using a JSON array of images

The background image on mobile devices is excessively zoomed in

What is the best approach for designing a UI in Angular to showcase a matrix of m by n dimensions, and how should the JSON format

"Creating a custom navigation bar with full width and navigation corners on both left

'OR' separated by the <hr> tag