| Blockbuster sites, amazing reunions

Share Tips

New Topic Subscription Options  

Sizing parts of tables

Forums: Questions and Answers About Building Your Site
Created on: 11/26/18 11:04 AM Views: 333 Replies: 7
Monday, November 26, 2018 at 11:04 AM

I would like to have different widths for alternate rows within one table. For example, Row 1 with one cell will be 900; Row 2 with three cells may be 300,400, and 200 (Total 900). Row 3 with one cell will be 900; Row 4 with three cells may be 200, 300, 400 (Total 900). I want the alternate rows to line up with the divisions in the 900 row. It sounds like it should work but doesn't -- at least not the way I am trying to do it.

To make matters more complicated, it is not a live page so I'm not sure you can see it to help. I can make it live if you wish. The page is Fenger High School/60 Year Reunion.

Thanks for your help.

Monday, November 26, 2018 at 2:24 PM - Response #1

Need exact link name to see what you tried, however, pretty sure you need each "row" defined by a separate table vs attempting to put all the cells into 1 table.

Best to tinker with percent sizes vs absolute too. Absolute sizes disable responsive design - An issue for phone displays.

Border size and cell spacing also count it how it looks.

For pure HTML, look up col width spec here. That can do this PER table fairly easily to make division lines line up.

Monday, November 26, 2018 at 3:02 PM - Response #2

Above is the link to the page "60 Year Reunion."

I looked at "col width spec here" and your first thoughts on my problem and am not sure what you're talking about. Each row is its own table? Are they made in the usual way but using percentage?

Thanks for looking.

Monday, November 26, 2018 at 3:20 PM - Response #3

I don't see any table on that page. Did you remove it?

What you do is create a table to represent the "row". So you end up with table table table table ... instead of td td td. (and the matching /table /td stuff)

It's easier to explain once I see the actual table.

You can make the table several ways. CSS, HTML, absolute sizes or percentages. CSS and percent is the best - but more complicated at first.

Getting anything working is step 1, then experiment.

The col spec just makes it easy to set the column side of each cell. The link I gave lets you edit directly to see what happens. Make a change and click "run". You can also add a second table with different number of columns to play with lining stuff up.

Monday, November 26, 2018 at 4:50 PM - Response #4

The table isn't "live." Let me turn it on.


Monday, November 26, 2018 at 11:01 PM - Response #5

Here is the fixed html. Added "table"s per section and made it all percent so that now that section is responsive and adapts to the page width. I just played around with the percent values.

This code replaces the section we are talking about. Stuff before stays the same. FYI CC has a bug of sorts that limits a video to 640 width. Showed the "fix" guess CC wants to keep it that way.

Monday, November 26, 2018 at 11:21 PM - Response #6

It looks perfect. Thanks so much!


Monday, November 26, 2018 at 11:33 PM - Response #7

You are welcome. It's fun to see what others design since only by examples do I learn more myself. Idea You really put a lot of work into your site. Very detailed and engaging.

New Topic  
Subscription Options: Have all new forum posts sent directly to your email.
Subscription options are available after you log in.