CODEWITHSUNDEEP
htmlhtml-table
F Wi
F Wi

Reputation: 139

How can I span one column over 2 rows?

I have my code:

       <table>
            <caption>Average salary</caption>
            <tr>
                <th colspan="2">Occupation</th>
                <th colspan="2">Salary (kr)</th>
            </tr>
            <tr>

                <th colspan="2"></th>
                <th>Men</th>
                <th>Women</th>
            </tr>
            <tr>
                <td colspan="2">Assistant nurse</th>
                <td>24 500</td>
                <td>24 800</td>

            </tr>
             <tr>
                <td colspan="2">Consultant system development</th>
                <td>43 000</td>
                <td>43 500</td>

            </tr>


        </table>

and it looks like this

enter image description here

how can I make the "occupation" heading span the two first rows also? Just adding rowspan after colspan does not work.

Upvotes: 0

Views: 75

Answers (2)

Johannes
Johannes

Reputation: 67798

You can add rowspan="2" to the first cell, but then you have to omit the first cell in the second row:

table {
border-collapse: collapse;
}
th, td {
border: 1px solid #bbb;
padding: 5px;
}
 <table>
            <caption>Average salary</caption>
            <tr>
                <th colspan="2" rowspan="2">Occupation</th>
                <th colspan="2">Salary (kr)</th>
            </tr>
            <tr>
                <th>Men</th>
                <th>Women</th>
            </tr>
            <tr>
                <td colspan="2">Assistant nurse</th>
                <td>24 500</td>
                <td>24 800</td>

            </tr>
             <tr>
                <td colspan="2">Consultant system development</th>
                <td>43 000</td>
                <td>43 500</td>

            </tr>


        </table>

Upvotes: 1

Aman B.
Aman B.

Reputation: 148

Make it this : <th colspan="2" rowspan="2">Occupation</th>

You have to put rowspan also to expand to two rows.

Upvotes: 0

Related Questions