HTML Table: Multiple header rows and column

Question

I need something like this in HTML

This is my code:

 <table> <tr> <th colspan="2">ROW A</th> </tr> <tr> <th colspan="3">ROW B1</th> <th colspan="3">ROW B2</th> </tr> <tr> <th>RB1.1</th> <th>RB1.2</th> <th>RB1.3</th> <th>RB2.1</th> <th>RB2.2</th> <th>RB2.3</th> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr> </table>

However, this is what I get:

click here for the result

What am I supposed to do?

do you have a graphic of the result you're looking for? The HTML and the resulting screenshot do not look out of order — martinstark
– martinstark, Commented Feb 13, 2023 at 15:01
Doesn't explain what you actually want! Can you share an image of what you're looking for? — Ghazi 360
– Ghazi 360, Commented Feb 13, 2023 at 15:03
Im sorry. I already edited the post. You can click the link for the images. — podesclease
– podesclease, Commented Feb 13, 2023 at 15:07

mikee-b · Accepted Answer · 2023-02-13 15:33:55Z

You only need to change "ROW A" to this :

 <th colspan="6">ROW A</th>

The number of columns is determined by the amount of columns in the row that has the most.

In this case, the highest number of columns of any row of the table is 6. If you want "ROW A" to be as wide as the table, you need a colspan of 6. If you want it to be half the width of the table, you would need a colspan of 3.

Thank you. I used this and wrapped the ROW A with <thead></thead> instead of <tr></tr>. It worked!

Collectives™ on Stack Overflow

HTML Table: Multiple header rows and column

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related