Comment créer des tableaux HTML verticaux avec CSS ?

Création de tableaux HTML verticaux

En HTML, les tableaux sont généralement affichés avec des lignes horizontales et des colonnes verticales. Cependant, vous pouvez rencontrer des scénarios dans lesquels vous souhaitez inverser cette orientation, en créant des tableaux « verticaux » avec des lignes verticales et des en-têtes de tableau à gauche.

Pour y parvenir, une solution CSS simple peut être utilisée :

<code class="css">tr { display: block; float: left; }
th, td { display: block; }</code>

Ce CSS réorganise les éléments du tableau de manière à ce que les lignes individuelles soient affichées sous forme de blocs verticaux les unes à côté des autres, les cellules d'en-tête du tableau apparaissant à gauche.

Accès aux lignes dans Tableaux verticaux

Bien que le CSS transforme l'apparence du tableau, il n'affecte pas la façon dont vous accédez aux lignes dans le code HTML. Vous pouvez toujours utiliser l'option élément pour insérer des données de manière dynamique, comme vous le feriez dans un tableau horizontal traditionnel.

Considérations de style supplémentaires

Pour améliorer davantage l'apparence visuelle de votre tableau vertical, vous pouvez envisager :

• Utiliser border-collapse pour supprimer les bordures entre les cellules adjacentes.
• Ajuster les propriétés de largeur et de hauteur du et / éléments pour des dimensions de cellule optimales.

Exemple de code

Voici un exemple de tableau HTML vertical que vous pouvez personnaliser :

<code class="css">/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }

/* border-collapse */
tr>*:not(:first-child) { border-top: 0; }
tr:not(:first-child)>* { border-left:0; }</code>

<code class="html"><table>
<tr>
    <th>name</th>
    <th>number</th>
</tr>
<tr>
    <td>James Bond</td>
    <td>007</td>
</tr>
<tr>
    <td>Lucipher</td>
    <td>666</td>
</tr>
</table></code>

En implémentant ces styles CSS, vous pouvez facilement créer des tableaux verticaux en HTML tout en conservant la fonctionnalité et l'accessibilité des tableaux traditionnels.

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!