tables xhtml - bon usage

Question

J'ai une question assez simple. Est-ce une bonne pratique d'écrire des tables avec 2 en-têtes différents et de répéter des sous-en-têtes comme dans l'exemple 1 ou est-il préférable/plus sémantique de diviser ce code en 2 tables (voir l'exemple 2)?

Exemple 1:

<table> 
<tr> 
    <th colspan="3">HEADER 1</th> 
</tr> 
<tr> 
    <th>sub-header 1</th> 
    <th>sub-header 2</th> 
    <th>sub-header 3</th> 
</tr> 
<tr> 
    <td>data</td> 
    <td>data</td> 
    <td>data</td> 
</tr> 
<tr> 
    <td>data</td> 
    <td>data</td> 
    <td>data</td> 
</tr> 
<tr> 
    <th colspan="3">HEADER 2</th> 
</tr> 
<tr> 
    <th>sub-header 1</th> 
    <th>sub-header 2</th> 
    <th>sub-header 3</th> 
</tr> 
<tr> 
    <td>data</td> 
    <td>data</td> 
    <td>data</td> 
</tr> 
<tr> 
    <td>data</td> 
    <td>data</td> 
    <td>data</td> 
</tr> 

Exemple 2:

<table> 
    <tr> 
    <th colspan="3">HEADER 1</th> 
    </tr> 
    <tr> 
    <th>sub-header 1</th> 
    <th>sub-header 2</th> 
    <th>sub-header 3</th> 
    </tr> 
    <tr> 
    <td>data</td> 
    <td>data</td> 
    <td>data</td> 
    </tr> 
    <tr> 
    <td>data</td> 
    <td>data</td> 
    <td>data</td> 
    </tr> 
</table> 
<table> 
    <tr> 
    <th colspan="3">HEADER 2</th> 
    </tr> 
    <tr> 
    <th>sub-header 1</th> 
    <th>sub-header 2</th> 
    <th>sub-header 3</th> 
    </tr> 
    <tr> 
    <td>data</td> 
    <td>data</td> 
    <td>data</td> 
    </tr> 
    <tr> 
    <td>data</td> 
    <td>data</td> 
    <td>data</td> 
    </tr> 
</table> 

Answer 1

Il vaut mieux/plus sémantique à utiliser autant ou aussi peu de tables que vous avez besoin de transmettre les informations que vous souhaitez transmettre. Si vous n'utilisiez pas le langage HTML et disiez que vous étiez en train de disposer les données sur une feuille de papier pour la compréhension de quelqu'un d'autre, utiliseriez-vous zéro, un, deux ou plusieurs tableaux? Voilà combien de tables vous devriez utiliser.