Début avec les tables HTML

Formulaires HTML: Guide pour créer des formulaires réactifs et adaptés aux mobiles

Les tables HTML sont utilisées pour afficher les données de la table sur les pages Web. Ils sont parfaits pour afficher des informations de manière organisée et peuvent être conçues à l'aide de CSS pour correspondre à l'apparence et au style d'un site Web. Ce tutoriel couvrira les bases de la création de tables HTML et de l'ajout de styles pour les rendre réactifs et adaptés aux mobiles.

points clés

Les tables HTML
• sont des outils puissants pour afficher des données de table sur les pages Web et peuvent créer des tables, des lignes et des cellules à l'aide de balises <table>, <code><tr> et <code><td>. <li> Les propriétés CSS telles que les bordures, les remplissages, les couleurs d'arrière-plan et les requêtes multimédias pour différentes tailles d'écran peuvent être implémentées pour rendre les tables HTML réactives et conviviales. </li> <li> L'accessibilité des tables HTML peut être améliorée en ajoutant des titres avec des balises <code><caption></caption> et des résumés avec des balises <summary></summary> qui fournissent des descriptions et des résumés pour les utilisateurs non visuels.

Créer une table HTML

Pour créer une table HTML, nous devons utiliser la balise <table>. Dans les balises <code><table>, nous devons créer une ou plusieurs balises <code><tr> qui définissent chaque ligne de la table. Dans chaque balise <code><tr>, nous pouvons créer une ou plusieurs balises <code><td> qui définissent les cellules de la table. Voici un exemple de table HTML de base: <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;table&gt; &lt;tr&gt; &lt;td&gt;单元格1&lt;/td&gt; &lt;td&gt;单元格2&lt;/td&gt; &lt;td&gt;单元格3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;单元格4&lt;/td&gt; &lt;td&gt;单元格5&lt;/td&gt; &lt;td&gt;单元格6&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> Cela crée une table avec deux lignes et trois colonnes, chaque cellule montrant son contenu. </p> <p> <a href="https://www.php.cn/link/a382db0a40615cdbe363ae0b4b2eb262"> Afficher l'exemple du codepen </a> (remplacer par la liaison codepen réelle, si elle est présente) </p> <h2> Ajouter des lignes et des colonnes </h2> <p> Pour ajouter une nouvelle ligne à la table, nous avons juste besoin de créer une nouvelle balise <code><tr>. Pour ajouter une nouvelle cellule à une table, nous pouvons créer une nouvelle balise <tr> dans la balise <td> existante. Voici un exemple de table avec quatre lignes et trois colonnes:

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
  <tr>
    <td>单元格7</td>
    <td>单元格8</td>
    <td>单元格9</td>
  </tr>
  <tr>
    <td>单元格10</td>
    <td>单元格11</td>
    <td>单元格12</td>
  </tr>
</table>

Cela créera une table avec quatre lignes et trois colonnes.

Définir le style de table HTML

Vous pouvez utiliser CSS pour styliser des tables HTML pour changer leur apparence. Certaines des propriétés CSS les plus courantes utilisées pour styliser les tables comprennent les bordures, les remplissages et les couleurs d'arrière-plan. Voici un exemple de la façon de coiffer une table en utilisant les bordures et les couleurs d'arrière-plan:

table {
  border: 1px solid black;
  background-color: #f2f2f2;
}
td {
  padding: 8px;
}

Cela créera une table avec des bordures noires et des couleurs d'arrière-plan gris clair, chaque cellule remplie de 8 pixels.

Afficher l'exemple du codepen (remplacer par la liaison codepen réelle, si elle est présente)

Créer des formes réactives et adaptées aux mobiles

L'un des défis de l'utilisation de tables HTML est de les rendre réactifs et adaptés aux mobiles. Une façon d'y parvenir est d'utiliser CSS pour ajuster la disposition de la table en fonction de la taille de l'écran. Une façon consiste à utiliser l'attribut display pour modifier la disposition de la table d'une disposition fixe à une disposition réactive. Cela peut utiliser des requêtes multimédias pour localiser des tailles d'écran spécifiques. Voici un exemple de la façon de rendre une table réactive:

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

Lorsque la largeur de l'écran est inférieure à 600 pixels, cela modifie la disposition du tableau de la disposition fixe à la disposition réactive.



Afficher l'exemple du codepen (remplacer par la liaison codepen réelle, si elle est présente)

Ajouter le titre et le résumé

Un autre aspect important de l'utilisation de tables HTML est de les rendre accessibles aux utilisateurs non visuels. Une façon consiste à ajouter un titre et un résumé à la table. La balise <caption> peut être utilisée pour ajouter un titre à une table qui décrit le contenu de la table. Voici un exemple de la façon d'ajouter un titre à une table:

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
  <tr>
    <td>单元格7</td>
    <td>单元格8</td>
    <td>单元格9</td>
  </tr>
  <tr>
    <td>单元格10</td>
    <td>单元格11</td>
    <td>单元格12</td>
  </tr>
</table>

Cela ajoutera un titre à la table qui affiche les ventes par mois. Les balises <summary> peuvent être utilisées pour fournir un résumé des formulaires pour les lecteurs d'écran et autres technologies d'assistance. Voici un exemple de la façon d'ajouter un résumé à un tableau:

table {
  border: 1px solid black;
  background-color: #f2f2f2;
}
td {
  padding: 8px;
}

Cela fournira un résumé du tableau pour les lecteurs d'écran et autres technologies d'assistance, indiquant qu'il montre les ventes par mois.

N'est-il pas bon d'utiliser le formulaire?

Non! Les tableaux sont une partie importante de HTML. Ils sont essentiels pour afficher des données tabulaires de manière sémantique et accessible. Dans les premiers jours du World Wide Web, avant le début du CSS, les tables ont fourni un moyen de disposer de la conception Web, mais ce n'était pas son objectif. Heureusement, ces jours sont passés longtemps (enfin, surtout, mais pour certains clients de messagerie!), Nous pouvons maintenant nous concentrer sur la façon dont les tables HTML vraiment - et extrêmement importantes pour afficher les données —— la fonction.

Conclusion

Les tables HTML sont des outils puissants pour afficher des données de table sur les pages Web. Avec CSS, vous pouvez styliser la table pour correspondre à l'apparence et au style d'un site Web et le rendre réactif et adapté aux mobiles aux utilisateurs sur différents appareils. L'ajout de titres et de résumé à un tableau peut aider à améliorer l'accessibilité pour les utilisateurs handicapés. En utilisant ces techniques, nous pouvons créer des formes efficaces qui sont à la fois visuellement attrayantes et puissantes.

HTML Form FAQ (FAQ)

Comment fusionner les cellules de la table HTML?

Les cellules

dans les tables HTML peuvent être fusionnées à l'aide des propriétés "ColSpan" et "Rowspan". La propriété "ColSpan" permet aux cellules de s'étendre sur plusieurs colonnes, et la propriété "Rowspan" permet aux cellules de s'étendre sur plusieurs lignes. Par exemple, si vous souhaitez réaliser une cellule à deux colonnes, vous pouvez utiliser le code suivant: <td colspan="2">内容</td>. De même, si vous souhaitez faire une cellule à deux lignes, vous pouvez utiliser le code suivant: <td rowspan="2">内容</td>.

Comment ajouter des bordures aux tables HTML?

Vous pouvez utiliser la propriété "Border" dans la balise <table> pour ajouter des bordures aux tables HTML. Par exemple, <code><table border="1"> créera une table bordée. Cependant, cette propriété n'est pas prise en charge dans HTML5. Au lieu de cela, vous pouvez ajouter des bordures à l'aide de CSS. Par exemple, vous pouvez ajouter des bordures en utilisant le code suivant: <code>table, th, td {border: 1px solid black;}.

Comment styliser des tables HTML à l'aide de CSS?

CSS peut être utilisé pour styliser des tables HTML en positionnant les éléments "Table", "Th" et "TD". Par exemple, vous pouvez modifier la couleur d'arrière-plan du titre de table (TH) et des données de table (TD) en utilisant le code suivant: th {background-color: #f2f2f2;} td {background-color: #ffffff;}. Vous pouvez également ajouter des remplissages, modifier les couleurs du texte et plus encore.

Comment rendre les tables HTML réactives?

CSS peut être utilisé pour rendre les tables HTML réactives. Vous pouvez utiliser la propriété "Overflow" pour ajouter des barres de défilement à la table lorsque la largeur de la table est inférieure à la taille de l'écran. Par exemple, vous pouvez utiliser le code suivant pour rendre un tableau réactif: table {width: 100%; overflow: auto;}.

Comment ajouter un titre à une table HTML?

Vous pouvez utiliser la balise "Légende" pour ajouter un titre à une table HTML. La balise "Légende" doit être insérée après la balise

. Par exemple, <caption>表格标题.

Comment aligner le texte dans la table HTML?

Vous pouvez utiliser la propriété "Text-Align" dans CSS pour aligner le texte dans les tables HTML. Par exemple, vous pouvez utiliser le code suivant pour centrer le texte: th, td {text-align: center;}.

Comment ajouter une couleur d'arrière-plan à la table HTML?

Vous pouvez ajouter de la couleur d'arrière-plan aux tables HTML à l'aide de la propriété "Background-Color" dans CSS. Par exemple, vous pouvez ajouter une couleur d'arrière-plan à un tableau en utilisant le code suivant: table {background-color: #f2f2f2;}.

Comment ajouter l'effet de survol à la table HTML?

Vous pouvez utiliser la pseudo-classe ": Hover" dans CSS pour ajouter un effet de survol aux tables HTML. Par exemple, vous pouvez utiliser le code suivant pour modifier la couleur d'arrière-plan d'une ligne de table lorsque le pointeur de la souris plane sur une ligne de table: tr:hover {background-color: #f5f5f5;}.

Comment ajouter des barres de défilement aux tables HTML?

Vous pouvez utiliser la propriété "Overflow" dans CSS pour ajouter des barres de défilement aux tables HTML. Par exemple, vous pouvez ajouter une barre de défilement à une table en utilisant le code suivant: table {overflow: auto;}.

Comment ajouter des couleurs de ligne alternées aux tables HTML?

Vous pouvez ajouter des couleurs de ligne alternées aux tables HTML en utilisant la pseudo-classe ": nth-enfant" dans CSS. Par exemple, vous pouvez ajouter des couleurs de ligne alternées en utilisant le code suivant: tr:nth-child(even) {background-color: #f2f2f2;}.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!