Home > OS >  How to build this table by using colspan and rowspans?
How to build this table by using colspan and rowspans?

Time:10-04

Im new to html. Can someone help me how to do this kind of table? Im really having a hard time for this one since it is so complex. I tried several things but it makes it worse. Thanks in advance.

enter image description here

Here is what I tried and the result is this.

enter image description here

I cant post the code since it restricts me to post too much code

CodePudding user response:

<table style="width:100%;">
    <tr style="width:100%;height:30px;">
        <td colspan="2" style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td colspan="2" style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td rowspan = "5" style="border:solid black; width:5px;"></td>
        <td rowspan="5" style="border:solid black; width:15px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td colspan="4" style="border:solid black; width:20px;"></td>
        <td  style="border:solid black; width:20px;"></td>
        <td  style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td colspan="2" style="border:solid black; width:20px;"></td>
        <td colspan="3" style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td colspan="2" style="border:solid black; width:20px;"></td>
        <td colspan="3" style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td colspan="5" style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td colspan="2" style="border:solid black; width:20px;"></td>
        <td colspan="3" style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr style="width:100%;height:30px;">
    <tr style="width:100%;height:30px;">
        <td colspan="7" style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
</table>

CodePudding user response:

.table{
        width: 50%;
        border: 1px solid black;
        border-collapse:collapse;   
    }
    .table td {
        border: 1px solid black;
        padding: 2px;
            
    }
<table class="table">
  <tr>
    <td colspan="2"></td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td colspan="2">text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td rowspan="5">text</td>
    <td rowspan="5">text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td colspan="4">text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td colspan="2">text</td>
    <td colspan="3">text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td colspan="2">text</td>
    <td colspan="3">text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td colspan="5">text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td colspan="2">text</td>
    <td colspan="3">text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td colspan="7">text</td>
    <td>text</td>
    <td>text</td>
  </tr>
</table>

  • Related