CODEWITHSUNDEEP
htmlhtml-table
MR.Internet
MR.Internet

Reputation: 645

HTML Merge Cells Form

I have the following structure that I should create as HTML Table. At first 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 code doesn't work. Please someone help here...

Upvotes: 0

Views: 230

Answers (1)

Mestica
Mestica

Reputation: 1529

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.

Upvotes: 2

Related Questions