table design, html

You can do this with either divs or tables by setting their widths.  Am I missing something?

I want the html code. This is why I have posed this question.

These will build a table for you and give you the code.

HTML Table Generator
CSS Table Generator

Hi rbudj,

This is amazing solution. I will post shortly a new question for <div>, css solution of this post as discussed before. I will include a new image which explains my intention a bit better:

- There are total of 8 sections only. Box 5 doesn't include 3 subsections.
- The vertical dash lines are to help to see box 5 x 2/3 = box 6
- Box 6 is smaller than box 5 in the proportion shown.
- Center-line of box 2 and the center-line of box 6 must match.

This post will be a good leaning post for me. In the new image I have included user-friendly names for each section. I appreciate if you could use them as well adding any required format names you need. This will be help me to follow your code better.

here is the link for the new question:
https://www.experts-exchange.com/questions/28476411/div-css-instead-of-table.html
-----------------------------
Randy Poole,

One important part of this post is:
- Center-line of box 2 and the center-line of box 6 must match.

I don't know how you have those vertical grayed-out lines placed there. I will look more to it until I get it. BTW, those lines are not necessary. If you wish, you could add border lines to separate 5-6 and 6-7.

Could you possibly use names for each section as shown on the new image. This will help me greatly to understand your code.

Regards,

Mike
table.png

In my example they do match.  So do you only want 3 sections in the bottom?  I currently have border lines seperating all 8 cells in the bottom the vertcal grey dashed are also borders.

is
cellb cell border and
cellh cell height?

And

cellbrd  also cell border for the grayed out dashed lines?

Your post is full of good details. Please comment on the following line:

It is better not to use user-friendly names as I have in the image because using generic names makes use of css more powerful with little code; do you agree with this?

Thank you,

Mike

Those are correct for the declarations.  user-friendly names allows not only your self but future developers the ability to maintain your code much easier.  Going back in 6 months or years down the line, you will spend time trying to figure out what is going on if you do not.

I thought you maybe suggesting against use of user names. I will try to modify your code to to include user names on the attached image to see if I can put it together.

Any help on that will be appreciated.

Thanks,

Mike

Hi Randy,

Also, when I tried, I see there is a major problem with the code as shown on the attached image. How can I correct this?

section 2 (gap) is one &nbsp while section 6 (middleButton) is much wider.

section
1  40%
2 &nbsp
3 40%
4 15%
5 30%
6 ~20%
7 30%
8 15%
Thanks.
table2.png

Thank you rbudj, see you in the linked post if you have some time for it.

Thank you Randy for your great input. I will post a followup question to continue with the remaining part.

Regards,

Mike