[Résolu] Structurer un formulaire avec div

Bonjour ,
J'ai fait un formulaire que j'ai structuré avec un tableau,mais malheureusement j'utilise le même CSS pour toutes mes pages donc le formulaire a pris les bordure de mon tableau précédent
j'aimerais pouvoir avoir la même structuration avec "div" est-ce possible?
VOICI MON CODE

<table  cellspacing="0"  border="0">
                                            <br>
                                            <tr><td>
                                                <label>NATURE(5)</label><br></td>
                                                <td>
                                                <label>Valeur brute au bilan</label><br></td>
                                                <td>
                                                <label>Taux(6)</label><br></td>
                                                <td>
                                                <label>Valeur locative(7)</label><br></td></tr>

                                                <tr><td>
                                                <label>Constructions(non compris agencement et installations)</label> : <br>
                                                </td>
                                                <td>
                                                <label></label><br><input type="text" name="arrive" /></td>

                                                <td>
                                                    <label>15%</label><input type="radio" placeholder="0,50%" name="depart"size="5" />
                                                     <label>10%</label><input type="radio" placeholder="0,50%" name="depart"size="5" />
                                                    </td>

                                                    <td>
                                                        <label></label><br><input type="text" name="arrive" /></td>
                                                </tr>

                                                <tr><td>
                                                    <label>21-Bureaux</label> : <br>
                                                    </td>
                                                    <td>
                                                    <label></label><br><input type="text" name="arrive" /></td>
    
                                                    <td>
                                                        <label>15%</label><input type="radio" placeholder="0,50%" name="depart"size="5" />
                                                         <label>10%</label><input type="radio" placeholder="0,50%" name="depart"size="5" />
                                                        </td>
    
                                                        <td>
                                                            <label></label><br><input type="text" name="arrive" /></td>
                                                    </tr>

                                                    <tr><td>
                                                        <label>22-Magasins</label> : <br>
                                                        </td>
                                                        <td>
                                                        <label></label><br><input type="text" name="arrive" /></td>
        
                                                        <td>
                                                            <label>15%</label><input type="radio" placeholder="0,50%" name="depart"size="5" />
                                                             <label>10%</label><input type="radio" placeholder="0,50%" name="depart"size="5" />
                                                            </td>
        
                                                            <td>
                                                                <label></label><br><input type="text" name="arrive" /></td>
                                                        </tr>
                                                        <tr><td>
                                                            <label>23-Hangars</label> : <br>
                                                            </td>
                                                            <td>
                                                            <label></label><br><input type="text" name="arrive" /></td>
            
                                                            <td>
                                                                <label>15%</label><input type="radio" placeholder="0,50%" name="depart"size="5" />
                                                                 <label>10%</label><input type="radio" placeholder="0,50%" name="depart"size="5" />
                                                                </td>
            
                                                                <td>
                                                                    <label></label><br><input type="text" name="arrive" /></td>
                                                            </tr>

                                                            <tr><td>
                                                                <label>24-Usines</label> : <br>
                                                                </td>
                                                                <td>
                                                                <label></label><br><input type="text" name="arrive" /></td>
                
                                                                <td>
                                                                    <label>5,6%</label><input type="radio" placeholder="0,50%" name="depart"size="5" />
                                                                     
                                                                    </td>
                
                                                                    <td>
                                                                        <label></label><br><input type="text" name="arrive" /></td>
                                                                </tr
                                                                
                                                                <tr><td>
                                                                    <label>25-Batiments</label> : <br>
                                                                    </td>
                                                                    <td>
                                                                    <label></label><br><input type="text" name="arrive" /></td>
                    
                                                                    <td>
                                                                        <label>5,6%</label><input type="radio" placeholder="0,50%" name="depart"size="5" />
                                                                         <label>10%</label><input type="radio" placeholder="0,50%" name="depart"size="5" />
                                                                        </td>
                    
                                                                        <td>
                                                                            <label></label><br><input type="text" name="arrive" /></td>
                                                                    </tr>>

                                                                    <tr><td>
                                                                        <label>26-Terrains</label> : <br>
                                                                        </td>
                                                                        <td>
                                                                        <label></label><br><input type="text" name="arrive" /></td>
                        
                                                                        <td>
                                                                            <label>5,6%</label><input type="radio" placeholder="0,50%" name="depart"size="5" />
                                                                             <label>10%</label><input type="radio" placeholder="0,50%" name="depart"size="5" />
                                                                            </td>
                        
                                                                            <td>
                                                                                <label></label><br><input type="text" name="arrive" /></td>
                                                                        </tr>
                                                
                                                    </table>	

fleu a écrit :
si je l'ai mis dans<form>mais pareil je voulais savoir comment le faire avec un <div>

Hello,

Je ne comprends pas ce que va t'apporter un élément neutre comme <div> et pourquoi tu veux absolument utiliser cet élément.

Tu peux styler les éléments "sémantiques" tels que <form>, <fieldset> exactement de la même manière qu'avec un <div> et tu apporteras alors du sens à ton document.

Ta structure visuelle ressemble beaucoup à une grille donc je t'invite à utiliser la spécification Grid Layout pour placer tes éléments.

fleu a écrit :
J'ai fait un formulaire que j'ai structuré avec un tableau, mais malheureusement j'utilise le même CSS pour toutes mes pages donc le formulaire a pris les bordure de mon tableau précédent

Par contre, pour répondre plus précisément à cette problématique, tu n'es pas du tout obligé d'utiliser autre chose qu'un tableau simplement parce que... tu as déjà utilisé un tableau ailleurs. Rien ne t'empêche de donner des classes à tes éléments HTML et de cibler ces éléments via chaque classe plutôt que de cibler "l'élément table".

Par exemple, sur ton premier tableau, tu ajoutes une classe ".border" et tu appliques ta bordure sur cette classe :

.border {
  border: 2px solid hotpink;
}

Ainsi ton second tableau (celui du formulaire), qui n'aura pas cette classe, n'aura pas non plus la bordure associée.
Modifié par Raphael (07 Nov 2020 - 17:39)

Hello Raphael,
Merci pour ton apport j'ai finalement opter pour creer des classes .
Mais au fait j'aimerais apprendre l'utilisation de "div" pour faire pareil j'ai vu quelque part ils on utilisé "div class="col-md-12"" pour structurer mais quand j'essaie je n'arrive pas à avoir ce que je veux.donc si tu peux m'expliquer comment ça fonctionne ça m'aidera .
Merci.

Merci Raphael pour l'explication je comprend mieux