balisage sémantique HTML pour les tables complexes

Question

Quelles balises HTML voulez-vous utiliser pour décrire la table comme ceci:

  +--------+---------+---------+---------+ 
     | TH1 | TH2 | TH3 | TH4 | 
+--------+--------+---------+---------+---------+ 
| TR1 | str1 | 1 | 1 | 1 | 
+--------+--------+---------+---------+---------+ 
| TR2 | str2 | 1 | 2 | 1 | 
+--------+--------+---------+---------+---------+ 
| TR3 | str3 | 1 | 1 | 3 | 
+========+========+=========+=========+=========+ 
     | total | 3 | 4 | 5 | 
     +--------+---------+---------+---------+ 

Et le second:

  +--------+---------+---------+---------+ 
     | TH1 | TH2 | TH3 | TH4 |  
+========+========+=========+=========+=========+ 
|      GROUP 1     | 
+--------+--------+---------+---------+---------+ 
| TR1 | str1 | 1 | 1 | 1 | 
+--------+--------+---------+---------+---------+ 
| TR2 | str2 | 1 | 1 | 1 | 
+========+========+=========+=========+=========+ 
|      GROUP 2     | 
+--------+--------+---------+---------+---------+ 
| TR3 | str3 | 1 | 1 | 1 | 
+--------+--------+---------+---------+---------+ 
| TR4 | str4 | 1 | 2 | 1 | 
+--------+--------+---------+---------+---------+ 
| TR5 | str5 | 1 | 1 | 3 | 
+========+========+=========+=========+=========+ 
     | total | 5 | 6 | 7 | 
     +--------+---------+---------+---------+ 

(En supposant haut niveau d'accessibilité)

Answer 1

Je pense que vous cherchez quelque chose comme:

<table> 
     <thead> 
      <tr> 
       <th>TH1</th> 
       <th>TH2</th> 
       <th>TH3</th> 
       <th>TH4</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <td>total</td> 
       <td>3</td> 
       <td>4</td> 
       <td>5</td> 
      </tr> 
     </tfoot> 
     <tbody> 
      <tr> 
       <td>str1</td> 
       <td>1</td> 
       <td>1</td> 
       <td>1</td> 
      </tr> 
      <tr> 
       <td>str2</td> 
       <td>1</td> 
       <td>2</td> 
       <td>1</td> 
      </tr> 
      <tr> 
       <td>str3</td> 
       <td>1</td> 
       <td>1</td> 
       <td>3</td> 
      </tr> 
     </tbody> 
    </table> 

et

<table> 
     <thead> 
      <tr> 
       <th>TH1</th> 
       <th>TH2</th> 
       <th>TH3</th> 
       <th>TH4</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <td>total</td> 
       <td>3</td> 
       <td>4</td> 
       <td>5</td> 
      </tr> 
     </tfoot> 
     <tbody> 
      <tr> 
       <td colspan="4">Group 1</td> 
      </tr> 
      <tr> 
       <td>str1</td> 
       <td>1</td> 
       <td>1</td> 
       <td>1</td> 
      </tr> 
      <tr> 
       <td>str2</td> 
       <td>1</td> 
       <td>1</td> 
       <td>1</td> 
      </tr> 
      <tr> 
       <td colspan="4">Group 2</td> 
      </tr> 
      <tr> 
       <td>str3</td> 
       <td>1</td> 
       <td>1</td> 
       <td>1</td> 
      </tr> 
      <tr> 
       <td>str4</td> 
       <td>1</td> 
       <td>1</td> 
       <td>3</td> 
      </tr> 
      <tr> 
       <td>str5</td> 
       <td>1</td> 
       <td>1</td> 
       <td>3</td> 
      </tr> 
     </tbody> 
    </table> 

tout style est à vous, bien sûr. Vos photos décrivent-elles la structure ou comment vous voulez que les bordures de cellules apparaissent?