communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Balise de table du didacticiel de base HTML

Balise de tableau

La page Web a des fonctions similaires à celles de word Bien sûr, il y aura aussi des fonctions similaires à celles d'Excel, et table en fait partie







<🎜><🎜><🎜><🎜>

La structure du tableau

<table>

;</td>

                                                                                               ;

                                                                                                                                                       td>

                      <td></td> lt;/tr>

< ;/table>

<table>Attributs

Largeur : largeur du tableau, l'unité peut être un pourcentage ou une valeur fixe. Hauteur : Hauteur de la table.

Aligner : alignement horizontal du tableau, valeurs : gauche, centre, droite
Bordure : épaisseur de la bordure.

  • Bordercolor : couleur de la bordure.

  • bgColor : couleur de fond du tableau.

  • arrière-plan : URL de l'image d'arrière-plan.

  • cellpadding : la distance entre le bord de la cellule et le contenu (distance de remplissage)

  • Cellpacing : la distance entre les cellules (espacement)

  • règles : fusionner les lignes de bordure des cellules, valeur : toutes

  • Remarque : la compatibilité des règles n'est pas bonne, veuillez utiliser CSS pour la remplacer.

  • Dessinons en fait un tableau
  • <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr>
             <td>工号</td>
             <td>姓名</td>
             <td>职位</td>
         </tr>
         <tr>
             <td>001</td>
             <td>小明</td>
             <td>设计师</td>
         </tr>
         <tr>
             <td>002</td>
             <td>小方</td>
             <td>工程师</td>
         </tr>
         <tr>
             <td>003</td>
             <td>小白</td>
             <td>程序员</td>
         </tr>
     </table> 
    </body>
</html>

< tr> Attributs - balises de ligne

bgColor : couleur de fond de la ligne

height : Hauteur de la ligne

aligner : Le texte dans la ligne est centré horizontalement, valeurs : gauche, centre, droite

  • valign : Centré verticalement, valeurs : haut (haut), milieu (milieu), bas (bas)

    • <td> ou <th> ; est une cellule ordinaire, <th> est une cellule d'en-tête, affichée en gras et centrée.

    width : largeur de cellule

      height : hauteur de cellule

      • bgColor : Cell couleur d'arrière-plan

      • arrière-plan : image d'arrière-plan de la cellule

      • aligner : alignement horizontal

      • valign : vertical alignement

      • rowspan : fusionner les cellules supérieures et inférieures. Les attributs de fusion doivent être placés dans la première cellule.

      • colspan : fusionner les cellules gauche et droite. Lors de la fusion, il doit y avoir des ajouts et des soustractions, garantissant que le nombre de cellules dans chaque ligne reste inchangé.

      • Exemple : 
    • <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr bgColor="red" align="center">
             <th>星期日</th> 
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
             <th>星期六</th>
         </tr>
         <tr bgColor="yellow" align="center">
             <td height="50">25</td>
             <td>26</td>
             <td>27</td>
             <td>28</td>
             <td>29</td>
             <td>30</td>
             <td>1</td>
         </tr>
         <tr align="center">
             <td  height="50">2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
             <td>8</td>
         </tr>
     </table> 
    </body>
</html>

      Remarque : L'attribut est sensible à la casse. Si bgColor est écrit comme bgcolor, il n'aura aucun effet
      • <🎜. >

    Vous pouvez saisir chaque attribut et afficher l'effet de sortie

    balise de légende


    Ajouter un titre et un résumé au tableau

    Résumé

    Le contenu du résumé ne sera pas affiché dans le navigateur. Sa fonction est d'augmenter la lisibilité (sémantisation) du tableau, de permettre aux moteurs de recherche de mieux comprendre le contenu du tableau et également de permettre aux lecteurs d'écran de mieux aider les utilisateurs spéciaux à lire le contenu du tableau.

    Syntaxe : <table summary="table introduction text">

    Titre

    est utilisé pour décrire le contenu du tableau, la position d'affichage du titre : au dessus du tableau.

    Syntaxe :

    <table> <caption>Texte du titre</caption> <tr>

    <td>…</td>

                                                     

    <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"summary="日历信息">
         <caption>2016.10日历</caption>
         <tr bgColor="red" align="center">
             <th>星期日</th> 
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
             <th>星期六</th>
         </tr>
         <tr bgColor="yellow" align="center">
             <td height="50">25</td>
             <td>26</td>
             <td>27</td>
             <td>28</td>
             <td>29</td>
             <td>30</td>
             <td>1</td>
         </tr>
         <tr align="center">
             <td  height="50">2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
             <td>8</td>
         </tr>
     </table> 
    </body>
</html>




    Formation continue
    ||
    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"> <tr> <td>工号</td> <td>姓名</td> <td>职位</td> </tr> <tr> <td>001</td> <td>小明</td> <td>设计师</td> </tr> <tr> <td>002</td> <td>小方</td> <td>工程师</td> </tr> <tr> <td>003</td> <td>小白</td> <td>程序员</td> </tr> </table> </body> </html>
    soumettreRéinitialiser le code
    Section précédente section suivante
    Liste des didacticiels
    obtenir de l'aide
    • Recommandations de cours
    • Téléchargement du didacticiel
    Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

    Les étudiants qui ont regardé ce cours apprennent également

    Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492776 joue