Les tableaux HTML

Structure d'un tableau complet

En html le tableau ce fait dans une balise <table>,nous avons un <thead>, pour l en-tête des colonnes et <tfoot> pour les pieds de la table, la balise <th> définit les en-tête du tableaux , nous avons les lignes de tableaux qui sont définit avec la balise <tr> et les données du tableaux son dans une balise <td>.

    
        
        <table>
            <caption>définit une légende ou le titre sur un tableaux</caption>
            <thead>
                <tr>
                    <th>voyages</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>mer</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>japon</td>
                    <td>perou</td>
                </tr>
                <tr>
                    <td>vietnam</td>
                    <td>australie</td>
                </tr>
            </tbody>
        </table>
        
    

Exemple d'un tableau complet

        

définit une légende ou le titre sur un tableau
            

                

                    
voyages
                
            
            

                

                    
mer
                
            
            

                

                    
japon
                    
perou
                
                

                    
vietnam
                    
australie
                
            
        

Colspan

    
        
        <table>
        <tbody>
            <caption>titre: colspan</caption>
                <tr>
                    <th colspan="5">animaux</th>
                    <th>fruits</th>
                </tr>
                <tr>
                    <td>chat</td>
                    <td>chien</td>
                    <td>grenouille</td>
                    <td>écureuil</td>
                    <td>hamster</td>
                    <td>pomme</td>
                </tr>
                <tr>
                    <td>rat</td>
                    <td>pie</td>
                    <td>panda</td>
                    <td>cheval</td>
                    <td>aigles</td>
                    <td>orange</td>
                </tr>
            </tbody>
        </table>
        
    

Exemple d'un colspan sur 5 colonnes

        

        
titre: colspan
            

                

                    
animaux
                    
fruits
                
                

                    
chat
                    
chien
                    
grenouille
                    
écureuil
                    
hamster
                    
pomme
                
                

                    
rat
                    
pie
                    
panda
                    
cheval
                    
aigles
                    
orange
                
            
        

Rowspan

    
        
        <table>
        <tbody>
                <caption>titre: rowspan</caption>
                <tr>
                    <th>animaux</th>
                    <td>hamster</td>
                    <td>chat</td>
                </tr>
                <tr>
                    <th rowspan="2" >fruits</th>
                    <td>pomme</td>
                    <td>kiwi</td>
                </tr>
                <tr>
                    <td>orange</td>
                    <td>banane</td>
                </tr>
            </tbody>
        </table>
        
    

Exemple d'un rowspan sur 2 lignes

        

            

                
titre: rowspan
                

                    
animaux
                    
hamster
                    
chat
                
                

                    
fruits
                    
pomme
                    
kiwi
                
                

                    
orange
                    
banane