CODEWITHSUNDEEP
htmlhtml-table
podesclease
podesclease

Reputation: 3

HTML Table: Multiple header rows and column

I need something like this in HTML

please click here for the layout

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?

Upvotes: 0

Views: 73

Answers (1)

mikee-b
mikee-b

Reputation: 44

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.

Upvotes: 2

Related Questions