Table with 3 headers but two columns

Question

Is there a way to do this type of table using HTML / CSS?

Header1 | Header2 | Header 3
--------+---------+----------
0       | 1  asdasdasdasd 7
2       | 5  asdasdasdasd 3
9       | 7  asdasdasdasd 2

Possible duplicate of [Merge two HTML table cells](http://stackoverflow.com/questions/4342336/merge-two-html-table-cells) — enguerranws, Jul 04 '16 at 16:46

score 2 · Answer 1 · answered Jul 04 '16 at 16:13

2

If you have <table> markup then <td colspan=2> will help you. If you want this with <div>s and so with pure CSS then you will need so called grid systems

answered Jul 04 '16 at 16:13

c-smile

26,734
7
59
86

GoMega54 · Answer 2 · 2016-07-04T16:28:34.160

2

By using colspan you can make cells span multiple columns.

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>0</td>
        <td colspan="2">1 asdasdasdasd 7</td>
    </tr>
    <tr>
        <td>2</td>
        <td colspan="2">5 asdasdasdasd 3</td>
    </tr>
    <tr>
        <td>9</td>
        <td colspan="2">7 asdasdasdasd 2</td>
    </tr>
</table>

edited Jul 04 '16 at 16:28

answered Jul 04 '16 at 16:23

GoMega54

148
2
11

1

Forgive the edit, but a `row` can always span multiple columns; it's the `` element that needs to span multiple columns with the `colspan` attribute. :) – David Thomas Jul 04 '16 at 16:25

Table with 3 headers but two columns

2 Answers2