How to use col and rowspan at the same time?

Question

I'm trying to replicate this table: I have trouble with the third table head, I don't know how to make that double row and those 5 columns and how to do the table rows and table data to make it fit the head.

I never used colgroup and rowspan before, I tried to mix some examples I've found but i'm not having success.

This is what I have so far:

<table border="1">
<caption>
  Poster availability
</caption>
<col>
<colgroup span="5"></colgroup>
<col>
<thead>
  <tr>
    <th scope="col">Poster name</th>
    <td rowspan="2"></td>
    <th scope="colrow" colspan="5">Color</th>
    <th scope="col">Sizes available</th>
  </tr>
  <tr>
    <th>1</th>
    <th scope="col">2</th>
    <th scope="col">3</th>
    <th scope="col">4</th>
    <th scope="col">5</th>
    <th  scope="col">6</th>
    <th>7</th>
  </tr>
</thead>

<tbody>
    <tr>
        <th scope="col">1</th>
        <th scope="col">2</th>
        <th scope="col">3</th>
        <th scope="col">4</th>
        <th scope="col">5</th>
        <th scope="col">6</th>
        <th scope="col">7</th>
    </tr>
</tbody>

Answer 1

This is the way I solved it, just in case other newbie like me has the same problem

<table border="1">
    <col> 
    <col>
    <colgroup span="5"></colgroup>
     <col> 
        <tr>
            <td rowspan="2">EVIDENCIA DE APRENDIZAJE</td>
            <th rowspan="2">%</th>
            <th colspan="5" scope="colgroup">INDICADOR DE ALCANCE</th>
            <th rowspan="2">INSTRUMENTOS DE EVALUACIÓN</th>
        </tr>
        <tr>
        <th scope="col">A</th>
        <th scope="col">B</th>
        <th scope="col">C</th>
        <th scope="col">D</th>
        <th scope="col">E</th>
        </tr> 

        <tr>
            <td>EVIDENCIA 1</td>
            <td>50%</td>
            <td>A1</td>
            <td>B2</tds>
            <td>C3</td>
            <td>D4</td>
            <TD>E1</TD>
            <td>Instrumento 1</td>
        </tr>
    </table>