I am trying to produce a table with a different number of cells in each row.

• The first row is a header row (every other row contains cells). This header is the width of the table.


• The second row has 2 cells in it...


• the third has 1 cell...


• the fourth has 4 cells...


• the fifth and final row has 3 cells.

I want the table set up so that the rows span the full width of the table. If the table is 1000px...

• The header would be 1000px wide


• the cells in the 2nd row would be 500px EACH


• the cell in the 3rd row would be 1000px


• the cells in the 4th row would be 250px EACH


• and the cells in the 5th row would be 333px, 334px, and 333px each (left-to-right)

I figured out I could use colspan for the first 4 rows, but the 5th (with 3 cells) would require a non-integer value. The cells in the 5th row won't expand beyond their column without colspan that I can tell...

• trying the width:## CSS code


• inside a div tag for each cell


• inside the td tag


• creating a class or classes that define the cell widths


• id-ing each cell, with or without a div tag, and defining widths individually


• and adjuting the table-layout: option

After several days, I'm now at my rope's end. The only thing I can come up with is deliberately tripling the number of cells in each row so that colspan would be all integer values. That sounds inconvenient and unreasonably difficult to format the table the way I'd like.

It's a table of Batman movies for a website -- a practice website I'm building, in order to learn HTML/CSS. I've been working on-and-off with HTML for several months, and CSS for a few weeks.

PS: It is not being used for layout, I am simply trying to adjust the layout of the table itself.