Tableau HTML

Le tableau est défini par la balise <table> Chaque tableau comporte un certain nombre de lignes (définies par des balises <tr>) et chaque ligne est divisée en un certain nombre de cellules (définies par des balises <td>). Les lettres td font référence aux données du tableau, au contenu des cellules de données. Les cellules de données peuvent contenir du texte, des images, des listes, des paragraphes, des formulaires, des lignes horizontales, des tableaux, etc.

Instance de tableau

<table border="1">
 <tr>
 <td>row 1, cell 1</td>
 <td>row 1, cell 2</td>
 </tr>
 <tr>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>
 </tr>
 </table>

Propriétés de table et de bordure HTML

Si la propriété border n'est pas définie, le tableau n'affichera pas de bordures. Parfois, cela est utile, mais la plupart du temps, nous souhaitons que la bordure soit visible.

Utilisez l'attribut border pour afficher un tableau avec une bordure :

<table border="1">
 <tr>
 <td>Row 1, cell 1</td>
 <td>Row 1, cell 2</td>
 </tr>
 </table>

En-tête de tableau HTML

L'en-tête de tableau est défini à l'aide de la balise <th>

La plupart des navigateurs afficheront l'en-tête du tableau sous forme de texte en gras et centré :

<html>
<head>
<table border="1">
 <tr>
 <th>Header 1</th>
 <th>Header 2</th>
 </tr>
 <tr>
 <td>row 1, cell 1</td>
 <td>row 1, cell 2</td>
 </tr>
 <tr>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>
 </tr>
 </table>
 </head>
 </html>
举个例子：
<html>
<head>
<meta charset="utf-8">
    <title>无标题页</title>
    <style type="text/css">
        .tb
        {
         border-width:1px;
         border-collapse:collapse;
         border-color:black;
         border-style:solid;
        }
        td
        {
         border-width:1px;
         border-collapse:collapse;
         border-color:black;
         border-style:solid;
        }
    </style>
</head>
<body>
    <div>
    <table width="600" height="400" border="1">
     <tr>
      <td colspan="3"></td>
     </tr>
      <tr>
       <td rowspan="3"></td>
       <td> </td>
       <td> </td>
     </tr>
      <tr>
       <td> </td>
       <td> </td>
     </tr>
     <tr>
       <td> </td>
       <td> </td>
     </tr>
    </table>
    </div>
</body>
</html>

balise de tableau HTML

Balise

<tr> Définir les cellules du tableau

<caption> ‐ gt; à définir >

<thead> Définir l'en-tête du tableau

<tbod> pied> pour définir le pied de page du tableau

Formation continue

nouveau fichier

<html> <head> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </head> </html> 举个例子： <html> <head> <meta charset="utf-8"> <title>无标题页</title> <style type="text/css"> .tb { border-width:1px; border-collapse:collapse; border-color:black; border-style:solid; } td { border-width:1px; border-collapse:collapse; border-color:black; border-style:solid; } </style> </head> <body> <div> <table width="600" height="400" border="1"> <tr> <td colspan="3"></td> </tr> <tr> <td rowspan="3"></td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Tableau HTML

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]