colocar elementos html code example

Example 1: fusion de cellule html

<style>
td,th{border:1px black solid; padding: 15px; text-align:center;}

table{border-collapse:collapse ;margin: 30px;}
</style>



<table>
            
            <thead>
              <tr>
                <th>Prénoms</th>
                <th>Noms</th>
                <th>Célibataire</th>
                <th>Couple</th>
                
              </tr>
            </thead>
            
            <tbody>
              <tr>
                <td rowspan=>Pierre</td>   
                <td rowspan=2>jardinier</td>
                <td>oui</td>
                <td>non</td>
              </tr>
              <tr>
                <td>Clarisse</td>
                <td>vendeuse</td>
                <td>non</td>
                <td>oui</td>
              </tr>
               <tr>
                <td>Bernard</td>
                <td colspan="">Politicien</td>
                <td colspan="2">??</td>
              </tr>
            </tbody>
            
            <tfoot>
               <th>Prénom</th>
               <th>Profession</th>
               <th>Célibataire</th>
              <th>Couple</th>
            </tfoot>
            
           </table><br/>
        
        <table>
          <tr>
            <th>Prénom</th>
            <td>Pierre</td>
             <td>Simon</td>
             <td>Yves</td>
          </tr>
          
          <tr>
            <th>Profession</th>
            <td>Jardinier</td>
             <td>Ecrivain</td>
             <td>Politicien</td>
          </tr>
          <tr>
            <th>Célibataire</th>
            <td>oui</td>
             <td>non</td>
             <td rowspan="2">??</td>
          </tr>
          <tr>
            <th>Couple</th>
            <td>non</td>
             <td>oui</td>

          </tr>
          
        </table>

Example 2: como trocar ordem dos elementos pelo dispositivo html

.container div {
width: 100px;
height: 50px;
display: inline-block;
}

.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }

@media screen and (max-width: 531px) {
.container { display: flex; flex-flow: column-reverse; }
}