HTML Columns of Various Widths?

[Gareth_Williams]

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.

[Gareth_Williams]

Absolutely it does contain a “ ” I've taken this out and it has solved the problem. Thanks! Anyway, I will upload the layout with the actaul content next week and we'll see if I can replcate it in Flex Box, or whatever you think would be best. Thanks again. 🙂

[Nancy OShea]

I can't tell much from screenshots.  Show us your code, please.

[Gareth_Williams]

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.

[osgood_ · Accepted solution]

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:

<td style="white-space: nowrap"></td>

Then set the last column to width 100%:

<td width="100%"></td>

[Gareth_Williams]

Thanks, I'll give that a go tomorrow and update the thread. Hopefully with good news!

[Gareth_Williams]

It almost worked! The middle column with the three rows fits the text content as intended but the third column takes all the rest of the space, shoving the first column to as small as it can go and therefor ignoring the width value of the first column! http://www.maximum-robot.co.uk/LayOut6.html

[osgood_]

It almost worked! The middle column with the three rows fits the text content as intended but the third column takes all the rest of the space, shoving the first column to as small as it can go and therefor ignoring the width value of the first column! http://www.maximum-robot.co.uk/LayOut6.html

By @Gareth_Williams

It will only work assuming you have the image present in the first column. If there is no image then yes that 3rd column will try and consume as much space as it can get, its very greedy!

[Gareth_Williams]

Maybe I should put the style="white-space: nowrap" code on the first column as well? Anyway, I will try that tomorrow! Thanks again.

[osgood_]

Maybe I should put the style="white-space: nowrap" code on the first column as well? Anyway, I will try that tomorrow! Thanks again.

By @Gareth_Williams

Thats where the image goes, right?

But you could do that, whatever is longer, the text in that first column, or the image will determine the width of the cell.

[Gareth_Williams]

Yeah, it is where the image goes and when you put the image in it sorts out the problem! I will now fill in the page with all the content to make sure nothing else goes wrong and post an update of how it came out. Thanks again for your help.

[Gareth_Williams]

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?

[osgood_ · Accepted solution]

---

@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;
} 

[Gareth_Williams]

Massive thanks Osgood! That has absolutely worked! Wow! http://www.maximum-robot.co.uk/LayOut7.html
There should be no more technical help required now! Hopefully! I’ll update the thread when the whole page finished.

[osgood_]

I think the issue here might be that you are trying to produce a static desktop solution instead of one which is flexible/suitable for the web.........it concerns me when I see someone trying to control the heights of a number of elements. If you can post a screenshot of what your final layout is meant to look like there maybe or may not be a better solution than using tables. 

[Gareth_Williams]

Thanks OSgood. I will upload a file in the next week so you can see the full layout in context. It might be a few days because I have 4 days of work on the bounce now! Thanks again for all your help.

[Gareth_Williams]

It’s almost done! http://www.maximum-robot.co.uk/radio.html However, I’ve got two problems that I can’t figure out. As you can see, I’ve put a roll over image on all the station names and as you can also see, because I want the same thing “Mearns FM” in two places it doesn’t work! When you hover over the top image it rolls over the other one! Does anyone know how to fix this?

The other thing is, for reasons I can’t understand, the link on “Nocturnal Frequency” includes a direction to the root folder on my computer or our website when I upload it. This is not in the code or the properties panel! Does anyone know what is happening here? Thanks again for your help.

[osgood_]

It’s almost done! http://www.maximum-robot.co.uk/radio.html However, I’ve got two problems that I can’t figure out. As you can see, I’ve put a roll over image on all the station names and as you can also see, because I want the same thing “Mearns FM” in two places it doesn’t work! When you hover over the top image it rolls over the other one! Does anyone know how to fix this?

By @Gareth_Williams

Duplicate the MearnsFM_3.jpg rollover image and name it something else, like: MearnsFM_3_duplicate.jpg and use that for one of the rollover replacements.

The other thing is, for reasons I can’t understand, the link on “Nocturnal Frequency” includes a direction to the root folder on my computer or our website when I upload it. This is not in the code or the properties panel! Does anyone know what is happening here? Thanks again for your help.

By @Gareth_Williams

Add https:// to the start of the external link:

https://www.youtube.com/user/NocturnalFrequency1

[Gareth_Williams]

Absolutely brilliant! That has all worked nicely! Thanks again for your help. 🙂