MR.Internet MR.Internet - 3 months ago 8
HTML Question

HTML Merge Cells Form

"I have made a big improve to get the solution."

I have the following structure that I should create as HTML Table. It seems easy for me but when I have tried to build it. It took me a lot of time with no satisfactory result. Please take a look at the image below to see the type of table that I want to create.

enter image description here

I have tried to create as follows but no luck.



<table>
<caption>Browsers by Visitors</caption>
<thead>
<tr>
<th rowspan="3">Head One</th>
<th colspan="3" rowspan="2">Head Two</th>
<th colspan="3">Head Three</th>
<th rowspan="3">Head Four</th>
<th rowspan="3">Head Five</th>
</tr>
<tr>
<th>Sub1</th>
<th>Sub2</th>
<th>Sub3</th>
</tr>
<tr>
<th>Sub1</th>
<th>Sub2</th>
<th>Sub3</th>
</tr>
</thead>
<tbody>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>12</td>
<td>23</td>
<td>34</td>
<td>34</td>
</tr>
<tbody>
</table>





The above codes doesn't work. Please someone help Here...

Answer

Okay, so here it goes:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 5px;
    text-align: center;
}
<table style="width:100%">
    <tr>
      <th rowspan="2">Head One</th>
      <th colspan="3">Head Two</th>
      <th colspan="3">Head Three</th>
      <th rowspan="2">Head Four</th>
      <th rowspan="2">Head Five</th>
    </tr>

    <tr>
      <td>Sub1</td>
      <td>Sub2</td>
      <td>Sub3</td>
      <td>Sub1</td>
      <td>Sub2</td>
      <td>Sub3</td>
    </tr>
    <tr>
      <td>AAA</td>
      <td>1</td>
      <td>a</td>
      <td>12</td>
      <td>s</td>
      <td>s</td>
      <td>sd</td>
      <td>aaa</td>
      <td>asd</td>     
    </tr>
    <tr>
      <td>BBB</td>
      <td>2</td>
      <td>b</td>
      <td>23</td>
      <td>sd</td>
      <td>sd</td>
      <td>sd</td>
      <td>asdasd</td>
      <td>asdasd</td>     
    </tr>
    <tr>
      <td>CCC</td>
      <td>3</td>
      <td>c</td>
      <td>34</td>
      <td>sd</td>
      <td>sd</td>
      <td>sd</td>
      <td>asdas</td>
      <td>dsafsd</td>     
    </tr>
    <tr>
      <td>DDD</td>
      <td>4</td>
      <td>d</td>
      <td>34</td>
      <td>sd</td>
      <td>sd</td>
      <td>s</td>
      <td>asdasd</td>
      <td>asddasdf</td>     
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>     
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>     
    </tr>
</table>

Do try to read more on colspan, rowspan, th, tr, td, table collapsed borders here. I removed the thead and tbody in your code.

Comments