Inspiring

Answered

HTML Columns of Various Widths?

Forum|Forum|1 year ago
February 18, 2024
5 replies
10472 views

Hi everybody, does anybody know how you would make a table in html so you can have columns of different widths within rows of the same table? Would you need to insert tables within the table? I have uploaded a picture to try to explain what I mean.

Basically, I have numerous rows with three columns in, the first column is for images which are all the same size, a 65px square, but the next column for another image which is various widths, the remainder of the row is another column which has text in it. The problem is when you try to make this layout the second column will go to the width of the widest one (which is the second row down) on all of them!

What is the best way of making various width columns across numerous rows? Like in the picture! Thanks for your help.

How to

This topic has been closed for replies.

Correct answer osgood_

It’s coming along nicely as you can see here http://www.maximum-robot.co.uk/LayOut1.html but I’ve run into another problem. I’ve made some stupid little flags and I wanted to put them in the same cell as the text cell which is 15px. However, as you can see here, http://www.maximum-robot.co.uk/Flags15px.html you can’t put an image and text in the same cell without the cell becoming higher. Is there a good reason for that?

As you can see at the top of the page, just the image or just the text is fine but if you put both in the same cell it makes the cell higher! Why is is this? To be fair, I could just put the flags in and have a slight gap between the square images down the left. It would still look alright but I wondered if there was an easy fix to put the flags in after the location text and keep it all tight?

@Gareth_Williams wrote:
However, as you can see here, http://www.maximum-robot.co.uk/Flags15px.html you can’t put an image and text in the same cell without the cell becoming higher. Is there a good reason for that?

Add the below to your css styles:

td img {
vertical-align: bottom;
}

BenPleysier

Community Expert

If you want two rows per 65px image and three columns:

<!doctype html>
<html>

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
</head>

<body>
    <div class="container mt-4">
        <div class="row bg-primary-subtle">
            <div class="col align-self-center" style="max-width: 65px;">65px</div>
            <div class="col gx-0">
                <div class="d-flex">
                    <div class=" bg-danger-subtle">
                        <p class="mb-0 p-2">variable width</p>
                    </div>
                    <div class=" bg-warning-subtle">
                        <p class="mb-0 p-2">variable</p>
                    </div>
                    <div class="flex-grow-1 bg-success-subtle">
                        <P class="mb-0 p-2">the rest of the row</P>
                    </div>
                </div>
                <div class="d-flex">
                    <div class="bg-danger-subtle">
                        <p class="mb-0"></p>
                    </div>
                    <div class=" bg-warning-subtle">
                        <p class="mb-0 p-2">variable width</p>
                    </div>
                    <div class="flex-grow-1 bg-success-subtle">
                        <P class="mb-0 p-2">the rest of the row</P>
                    </div>
                </div>
            </div>
        </div>
        <div class="row bg-primary-subtle">
            <div class="col align-self-center" style="max-width: 65px;">65px</div>
            <div class="col gx-0">
                <div class="d-flex">
                    <div class="bg-danger-subtle">
                        <p class="mb-0 p-2">variable width</p>
                    </div>
                    <div class=" bg-warning-subtle">
                        <p class="mb-0 p-2">larger variable width</p>
                    </div>
                    <div class="flex-grow-1 bg-success-subtle">
                        <P class="mb-0 p-2">the rest of the row</P>
                    </div>
                </div>
                <div class="d-flex">
                    <div class="bg-danger-subtle">
                        <p class="mb-0 p-2">some more text to increase the size</p>
                    </div>
                    <div class=" bg-warning-subtle">
                        <p class="mb-0"></p>
                    </div>
                    <div class="flex-grow-1 bg-success-subtle">
                        <P class="mb-0 p-2">the rest of the row</P>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>

With this result

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Gareth_WilliamsAuthor

Inspiring

I’ve started trying to fill the page with the text and images after a marathon in this thread working out how to make the layout but I’ve run into a problem again! When you put text in the nested table, the text ignores the text properties you select in the properties window. If you have text outside of the nested table, in a normal cell, the controls work as usual.

Also, could somebody tell me how to make a text class, style or rule, or whatever it’s called, so the text settings appear in the “class” dropdown menu in the HTML panel of the properties window? I thought this would be easy or obvious but after an hour of searching in Google and YouTube I have not found any answers! Thanks again for your help.

O

osgood_

Brainiac

Is it possible to make a cell (column) width fit the content and another to expand to fill the remaining space? I have three columns in these nested tables. The first contains an image which varies in width so I can easily set it to the width of the image, the second I would like to fit the content which is text and the third to expand to fill the remaining space. The file is here http://www.maximum-robot.co.uk/LayOut5.html

As you can probably see, it’s going to be a page on my band’s website where we thank radio stations for playing our songs. In case this entire layout could be done better with Flex Box I’ve given the layout demotions below …

The whole page is 980px wide with a 65px border down the sides to fit the layout of rest of our site. Then inside the the red edges, it’s just got one 40px row across the top for the navigation text, one row below that for the main text with hight to fit content and one 20px row below that to separate the main text from the square image and nested tables below.

Under that is a column on the left which contains the square images of 65px width and hight. Then the four nested tables which are 785px wide. These splits into three columns. The first is further split into two rows of 50 and 15px, the second into three rows of 30, 20 and 15px and the third has no rows. All the rows merged together.

The black row under the nested tables and the grey row across the bottom on the whole page doesn’t matter because the background and all cells in the page will be black! The colours used here are just for the sake of illustrating the layout. I will also need to add more layers of square images and nested tables as we have been played on 9 radio stations so far, but you get the idea. I will add a new layer with another square image and nested table a for each radio station. Thanks again for your help.

Is it possible to make a cell (column) width fit the content and another to expand to fill the remaining space?

By @Gareth_Williams

Use white-space: nowrap where you have the 3 rows. Set each of the 3 td cells:

Then set the last column to width 100%:

BenPleysier

Community Expert

As @Nancy OShea has stated, Bootstrap is the way to go. The following is and example.

<!doctype html>
<html>

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
</head>

<body>
    <div class="container mt-4">
        <div class="d-flex">
            <div class="bg-primary-subtle" style="width: 65px;">
                <p class="mb-0 p-2">65px</p>
            </div>
            <div class="bg-danger-subtle">
                <p class="mb-0 p-2">variable width</p>
            </div>
            <div class="flex-grow-1 bg-success-subtle">
                <P class="mb-0 p-2">the rest of the row</P>
            </div>
        </div>
        <div class="d-flex">
            <div class="bg-primary-subtle" style="width: 65px;">
                <p class="mb-0 p-2">65px</p>
            </div>
            <div class="bg-danger-subtle">
            </div>
            <div class="flex-grow-1 bg-success-subtle">
                <P class="mb-0 p-2">the rest of the row</P>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>

With this as the result

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Nancy OShea

Community Expert

Tables suck! 😝

Not responsive.
Horrible with screen readers.
A bad user experience on mobile devices.

I haven't used a website table in 10 years and that was for an invoice (tabular data).

There's isn't much you can't do with Bootstrap columns (based on flexbox), alone or with offset & margin classes.

https://getbootstrap.com/docs/5.0/layout/columns/

I highly recommend learning to use Bootstrap. It will save you hours of development time.

Nancy O'Shea— Product User & Community Expert

O

osgood_

Brainiac

Yes you would use a 2 column nested table inserted within the second column td cell of your main table. Nested tables remain independent, therefore providing more control.

However you can achieve the same effect by using a more modern approach such as flex box for the layout............it would be less messy than dealing with tables and table cells, you should avoid those wherever possible.

Gareth_WilliamsAuthor

Inspiring

Thanks guys. I’ll try it with in both methods, tables and cells and flex box, and see which I prefer. I will try the tables and cells method first and upload the file just to confirm it has worked before ticking the “correct answer” I did that example in Illustrator just to show you what I mean! Thanks again.

O

osgood_

Brainiac

Using Flexbox could be as simple as the example code below: (I've just added some inline widths to the second 'column' to simulate the various widths of the images.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<style>
.rowWrapper {
width: 90%;
margin: 0 auto;
}
.row {
display: flex;
margin: 0 0 2px 0;
}
.row div:nth-child(1) {
width: 65px;
background-color: tomato;
}
.row div:nth-child(2) {
background-color: darkseagreen
}
.row div:nth-child(3) {
flex: 1;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="rowWrapper">

<!-- start row -->
<div class="row">
<div>Img 1</div>
<div style="width: 200px;">Img 2</div>
<div>Img Text</div>
</div>
<!-- end row -->


<!-- start row -->
<div class="row">
<div>Img 1</div>
<div style="width: 300px;">Img 2</div>
<div>Img Text</div>
</div>
<!-- end row -->

<!-- start row -->
<div class="row">
<div>Img 1</div>
<div style="width: 150px;">Img 2</div>
<div>Img Text</div>
</div>
<!-- end row -->

<!-- start row -->
<div class="row">
<div>Img 1</div>
<div style="width: 250px;">Img 2</div>
<div>Img Text</div>
</div>
<!-- end row -->


</div>
<!-- end rowWrapper -->

</body>
</html>

B

Ben M

Community Expert

What you have pictured are nested tables. So in rows 2-5 in the right hand column of your outermost table are actually nested tables within that column. So each cell would have a containing table with 1 row x 2 columns with the varying widths.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded