Tableau sans bordure en HTML

Le tableau sans bordures est une vue de conception de la page Web utilisant un tableau HTML. L'utilisation du tableau simplifie la présentation des informations volumineuses sous la forme la plus simple.

• Tableau avec ou sans bordures utilisé pour la comparaison entre les éléments.
• Les informations textuelles et numériques peuvent toutes deux être présentes sous forme de tableau.

Dans la page HTML, une grande partie de la structure tabulaire est créée sans bordure. L'utilisation de la bordure dans la conception du tableau dépend de ses utilisations. Une conception tabulaire sur la page peut être créée en utilisant le code HTML suivant.

Exemple :

<table>
<thead>
<th>S.No</th>
<th>Name</th>
<th>Date of Birth</th>
<th>Profile</th>
<th>Salary</th>
</thead>
<tbody>
<tr>
<td>1</td><td>Jeff Smith</td>
<td>35</td>
<td>Assistant Manager</td>
<td>120,000</td>
</tr>
<tr>
<td>2</td>
<td>Maria Garcia</td>
<td>42</td>
<td>Department Head</td>
<td>85,000</td>
</tr>
<tr>
<td>3</td>
<td>David Rodriguez</td>
<td>37</td>
<td>Senior Sales Executive</td>
<td>45,000</td>
</tr>
<tr>
<td>4</td>
<td>Eyon Shih</td>
<td>32</td>
<td>Sales Executive</td>
<td>35,000</td>
</tr>
</tbody>
</table>

La structure du tableau ci-dessus affichera les données au format de tableau comme indiqué dans la capture d'écran ci-dessous.

Dans la capture d'écran ci-dessus, la bordure n'est pas disponible. Par défaut, la bordure reste indisponible dans la conception du tableau. Pour activer la bordure dans le tableau, vous devez ajouter une bordure de style ; cette bordure contient trois éléments tels que la taille de la bordure (comme en px), le type de bordure (comme solide, fine, héritée, etc.) et la troisième est la couleur (comme le rouge, le bleu, le noir, vert, code couleur).

table{
border : 1px solid #000000;
}

La bordure du tableau facilite la représentation du tableau, la séparation des lignes et des colonnes.

Types de tableau sans bordure

Voici les types de tableaux sans bordures :

1. Tables gigognes

Les tables gigognes font référence aux tables à l'intérieur du tableau. L'imbrication des tables n'est pas une bonne pratique, mais dans certains cas, il devient nécessaire d'utiliser une table à l'intérieur de la table. Il peut être ridicule d'utiliser l'imbrication de tables en raison de son accessibilité et de son balisage déroutant.

Exemple :

Dans le tableau ci-dessous, deux tables sont imbriquées à l'intérieur des colonnes de la table parent.

Code :

<table width="80%" cellspacing="0" cellpadding="5">
<thead>
<th>Description</th>
<th>Electricals & Electronics</th>
<th>Computers & Accessories</th>
</thead>
<tbody>
<tr>
<td class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</td>
<td>
<table width="400" cellspacing="0">
<tbody>
<tr>
<td>Television</td>
<td>Washing Machine</td>
<td>Fan</td>
</tr>
<tr>
<td>Induction</td>
<td>Room Heater</td>
<td>Iron</td>
</tr>
<tr>
<td>Inverter Kits</td>
<td>Circuits</td>
<td>CPU</td>
</tr>
<tr>
<td>Keyboard</td>
<td>Mouse</td>
<td>Scanner</td>
</tr>
</tbody>
</table>
</td>
<td>
<table width="250" cellspacing="0">
<tbody>
<tr>
<td>Laptop</td>
<td>Monitor</td>
<td>CPU</td>
</tr>
<tr>
<td>Keyboard</td>
<td>Mouse</td>
<td>Scanner</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Style :

Le style ci-dessous est utilisé pour représenter une vue plus claire de la conception de la table imbriquée.

Code :

<style type="text/css">
table th{
width: 200px;
text-align: center;
}
td.text{
text-align: justify;
padding: 5px;
}
table table, table table td{
border: 1px solid #000;
}
</style>

Sortie :

Table parent n'ayant pas de bordure. mais la table intérieure contenant la bordure. Pour une représentation claire, la bordure est utilisée dans le tableau imbriqué. Nous pouvons supprimer la bordure de la table imbriquée en supprimant le style lié à la bordure.

2. Tables de zébrures

Les tableaux Zebra Striping font référence aux tableaux ayant des couleurs différentes dans les rangées alternées. Des couleurs différentes dans les rangées alternées facilitent la distinction des rangées les unes des autres. Il est plus facile de voir une ligne particulière du tableau grâce à sa couleur. Le placement d'un style sur les balises du tableau peut également être ajouté à l'aide de jQuery.

Exemple :

Un exemple est celui de base ; ici, le tableau de balises HTML crée une conception tabulaire et après cela, un style ajouté pour faire de ce tableau un tableau Zebra Striping.

Code :

<table width="50%" cellspacing="0">
<thead>
<th width="100">S.No.</th>
<th width="150">Country Code</th>
<th width="200">Country</th>
<th width="150">Phone Code</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>AW</td>
<td>Aruba</td>
<td>297</td>
</tr>
<tr>
<td>2</td>
<td>AU</td>
<td>Australia</td>
<td>61</td>
</tr>
<tr>
<td>3</td>
<td>AT</td>
<td>Austria</td>
<td>43</td>
</tr>
<tr>
<td>4</td>
<td>AZ</td>
<td>Azerbaijan</td>
<td>994</td>
</tr>
<tr>
<td>5</td>
<td>BS</td>
<td>Bahamas</td>
<td>1241</td>
</tr>
<tr>
<td>6</td>
<td>BH</td>
<td>Bahrain</td>
<td>973</td>
</tr>
</tbody>
</table>

Style :

Le CSS donné ci-dessous crée le tableau HTML Zebra striping.

Code :

<style type="text/css">
table th, table td{
text-align: center;
}
tbody tr:nth-child(even) {
background: #e8e7e1;
}
</style>

Sortie :

Dans le résultat ci-dessous, nous pouvons voir comment alterner les lignes du tableau ayant des couleurs différentes.

Conclusion

Le tableau sans bordure est l'un des modes de représentation du tableau. Le format de tableau peut également être obtenu en utilisant d'autres balises HTML comme ul > li, div, etc., mais l'utilisation d'un tableau pour la structure tabulaire réduit le travail de style tandis que l'utilisation de div pour la conception tabulaire augmente en raison de l'approche de conception réactive.

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!