Complex table not working

Forum Moderators: open

Message Too Old, No Replies

Complex table not working

Gilead

5:38 pm on Mar 7, 2022 (gmt 0)

I'm trying to set up a table that has a grouping of four pics each with various links below each one. The first one looks good, but the second one drops down to the next line. I'm anticipating multiple links below so I want to make sure it can be accommodated. Thanks!

<table class="Table">

<tr>
<td><img src="ID002.jpg" width="352" height="640" alt="" title="" />

 <tr> <td>cell1_1</td> </tr>
 <tr> <td>cell2_1</td> </tr>
 <tr> <td>cell3_1</td> </tr>
 <tr> <td>cell4_1</td> </tr>

</td></tr>

<tr> 
<td><img src="ID004.jpg" width="352" height="640" alt="" title="" />
 
 <tr> <td>cell1_1</td> </tr>
 <tr> <td>cell2_1</td> </tr>
 <tr> <td>cell3_1</td> </tr>
 <tr> <td>cell4_1</td> </tr>
 
</td></tr>

I've also tried using thead and tbody. I know, I know I should use CSS, but I got confused trying to follow which row, which column, etc. I can always change it later.
Thanks guys. If you need a screen capture to help, I'll post, but I don't want to get in trouble for posting a url link.

Dimitri

5:46 pm on Mar 7, 2022 (gmt 0)

Peace first.

Then, ... I am not sure I understand exactly what you are trying to do, but, you can't nest <tr> within a <td> like in the above code.

So may be you want to do something like that :

<tr>
<td>
<img src="ID002.jpg" width="352" height="640" alt="" title="" />
<table>
 <tr> <td>cell1_1</td> </tr>
 <tr> <td>cell2_1</td> </tr>
 <tr> <td>cell3_1</td> </tr>
 <tr> <td>cell4_1</td> </tr>
</table>
</td>
</tr>

Gilead

7:23 pm on Mar 7, 2022 (gmt 0)

Pic Pic Pic Pic
link link link link
link link link link
link link link link

Pic Pic Pic Pic
link link link link
link link link link
etc... Does this help?

NickMNS

7:43 pm on Mar 7, 2022 (gmt 0)

Do you mean you want one image and the underneath you want the 4 links displayed?
Like this?
[-----------pic--------]
[link][link][link][link]
[link][link][link][link]
[link][link][link][link]

If so you need to use the colspan attribute.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

[edited by: not2easy at 8:04 pm (utc) on Mar 7, 2022]
[edit reason] hope to unbreak our layout? [/edit]

not2easy

8:08 pm on Mar 7, 2022 (gmt 0)

Sorry for the edit NickMNS, but for some reason that reference link's image broke the layout so it was de-linked. Still usable but only via pasting to the browser's address bar.

Dimitri

8:50 pm on Mar 7, 2022 (gmt 0)

Pic Pic Pic Pic
link link link link
link link link link
link link link link

Pic Pic Pic Pic
link link link link
link link link link

<tr>
<td>pic 1</td>
<td>pic 2</td>
<td>pic 3</td>
<td>pic 4</td>
</tr>

<tr>
<td>link 1-1</td>
<td>link 2-1</td>
<td>link 3-1</td>
<td>link 4-1</td>
</tr>

<tr>
<td>link 1-2</td>
<td>link 2-2</td>
<td>link 3-2</td>
<td>link 4-2</td>
</tr>

<tr>
<td>link 1-3</td>
<td>link 2-3</td>
<td>link 3-3</td>
<td>link 4-3</td>
</tr>

<tr>
<td>link 1-4</td>
<td>link 2-4</td>
<td>link 3-4</td>
<td>link 4-4</td>
</tr>

<tr>
<td>pic 1</td>
<td>pic 2</td>
<td>pic 3</td>
<td>pic 4</td>
</tr>

<tr>
<td>link 1-1<br>link 1-2<br>link 1-3<br>link 1-4</td>
<td>link 2-1<br>link 2-2<br>link 2-3<br>link 2-4</td>
<td>link 3-1<br>link 3-2<br>link 3-3<br>link 3-4</td>
<td>link 4-1<br>link 4-2<br>link 4-3<br>link 4-4</td>
</tr>

<tr>
<td>pic 1<br>link 1-1<br>link 1-2<br>link 1-3<br>link 1-4</td>
<td>pic 2<br>link 2-1<br>link 2-2<br>link 2-3<br>link 2-4</td>
<td>pic 3<br>link 3-1<br>link 3-2<br>link 3-3<br>link 3-4</td>
<td>pic 4<br>link 4-1<br>link 4-2<br>link 4-3<br>link 4-4</td>
</tr>

NickMNS

10:29 pm on Mar 7, 2022 (gmt 0)

It should be pointed out that this is a terrible way of doing this. It is web design from circa 1995.

The way of doing this in 2022 is to use flex box.


<head>
<style>
 .content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
 }
 .col {
  display: flex;
  flex-direction: column
 }
</style>
</head>
<body>
<div class="content">
 <div class="col">
 <img src="/img1">
 <a href="">link1a</a>
 <a href="">link1b</a>
 <a href="">link1c</a>
 <a href="">link1d</a>
 </div>
 <div class="col">
 <img src="/img2">
 <a href="">link2a</a>
 <a href="">link2b</a>
 <a href="">link2c</a>
 <a href="">link2d</a>
 </div>
 ...
</div>
</body>

By using flex, the layout automatically adapts to different screen sizes. In this case if the screen is too narrow for four columns the columns will wrap, to two rows of columns, if the screen can only show a single column it will wrap to four rows.

More info on flex is here:
[developer.mozilla.org...]
(Will the link break things again?)

phranque

1:47 am on Mar 8, 2022 (gmt 0)

It is web design from circa 1995.

The way of doing this in 2022 is to use flex box.

to be fair, the W3C Working Draft for the (current version of the) CSS box model was first published <10 years ago...
CSS Flexible Box Layout Module [w3.org]

Dimitri

2:45 pm on Mar 8, 2022 (gmt 0)

The OP wanted HTML table structure, so I made suggestions of this kind, however, of-course I agree with @NickMNS, that using Flex should be preferred , it's easier, more flexible (like the name stands for), and if it's a matter of readability and maintenance, this is also a lot better.

lucy24

5:34 pm on Mar 8, 2022 (gmt 0)

but, you can't nest <tr> within a <td>

Yes, in fact you can. Or rather, you can nest a whole <table> inside <td>. Repeatedly; I could name one recently-defunct site that went four deep.
</tangent>

But, as everyone else has said, in this day and age there�s no earthly reason to use nested tables--or, for that matter, to use tables for layout.

Personally I dislike the look of flexbox. Another well-established option is {display: inline-block}. Try both and see which comes closer to the look you want.

phranque

9:27 pm on Mar 8, 2022 (gmt 0)

four deep

iirc 20 years ago i did some time on a couple of sites that were all-the-fingers-and-toes deep.
at the time i blamed it on dependence on Dreamweaver and/or FrontPage.

Gilead

7:20 pm on Mar 11, 2022 (gmt 0)

Thanks guys!