How to create a table using colspan, rowspan or css in html?

Question

How can I create a table like the above example using HTML and CSS. I've tried the following:

<table>
    <tr>
    <th>XXX</th>
    <th>XXX</th>
    </tr>
    <tr>
    <td>XXX</td>
    <td>XXX</td>
    </tr>
    <tr>
    <td>XXX</td>
    <td>XXX</td>
    </tr>
    <tr>
    <td>XXX</td>
    <td>XXX</td>
    </tr>
</table>

but it won't work. Can anyone help?

You'll need to use a combination of `colspan` and `rowspan`. — Hidden Hobbes, Jun 15 '17 at 07:14
get some knowledge about using `rowspan` and `colspan`. It is not that difficult to understand. [here is the help](https://stackoverflow.com/a/9830847/5015089) — Haseeb Zulfiqar, Jun 15 '17 at 07:30

score 2 · Accepted Answer · answered Jun 15 '17 at 07:17

Something like this

<table border="1" cellpadding="10" cellspacing="0" style="width:100%">
  <tr>
    <td style="width:50%">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>

score 0 · Answer 2 · answered Jun 15 '17 at 07:16

<table>
<tr>
<th colspan="2">XXX</th>
<th colspan="2">XXX</th>
</tr>
<tr>
<td colspan="2">XXX</td>
<td colspan="2">XXX</td>
</tr>
<tr>
<td colspan="2">XXX</td>
<td rowspan="2">XXX</td>
</tr>
<tr>
<td colspan="2">XXX</td>
<td>XXX</td>
</tr>
<tr>
<td colspan="2">XXX</td>
<td rowspan="2">XXX</td>
</tr>
<tr>
<td>XXX</td>
<td>XXX</td>
</tr>
<tr>
<td colspan="2">XXX</td>
<td rowspan="2">XXX</td>
</tr>

How to create a table using colspan, rowspan or css in html?

2 Answers2