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

Adobe 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.

BenPleysier

Adobe Expert

I have done it now. Actually, by default it does work inside the nested tables too. I just didn’t select the style in the menu for some reason. I was trying to make it again! This didn’t work. My bad!

Anyway, my layout has been screwed up anyway! The original layout without the nested tables was squares of 65px and the columns to the right of it split into two rows, one of 50px H for an image and one of 15px H for some 13px text underneath it.

However, in the nested tables, as far as I can tell, you can’t get a row as narrow as 15px. Basically those stupid borders are still there in the dimensions. Presumably it just changes them to the same colour as the cell so you can’t see it. I guess that’s what’s going on behind the scenes anyway.

I'll repeat what @Nancy OShea has stated previously

Tables suck!

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

BenPleysier

Adobe 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

Adobe 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 & Moderator

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

Adobe 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