Maison >interface Web >tutoriel HTML >Disposition du tableau HTML
Disposition du tableau HTML
- PHPzoriginal
- 2024-09-04 16:54:321082parcourir
La disposition de votre tableau dans un document HTML peut être définie à l'aide de la propriété width et, en cours de processus, en limitant la largeur du tableau, sans modification, ce qui le rend fixe, quelle que soit la durée pendant laquelle le contenu se trouve à l'intérieur des cellules ou quel navigateur affiche. les paramètres sont. OU nous pouvons utiliser une propriété HTML connue sous le nom de table-layout.
La propriété table-layout est telle qu'elle permet de définir un ensemble d'instructions pour le navigateur que le navigateur doit utiliser lors de la présentation de votre tableau, ainsi que des cellules et colonnes de votre tableau.
Donc, en bref, on peut dire qu'une propriété table-layout contient un algorithme qui est donné au navigateur à suivre pour disposer votre tableau. Une propriété de mise en page de table peut être définie sur différentes valeurs, mais cela dépend entièrement du choix de l'utilisateur. Les navigateurs appliquent automatiquement certaines règles, définissant la manière dont les cellules et les colonnes seront disposées, si la propriété table-layout n'est pas utilisée. Ces règles sont également appliquées lorsque la valeur de la propriété table-layout est définie sur « auto ».
Syntaxe :
Vous trouverez ci-dessous la syntaxe simple de la propriété table-layout.
ObjectName
{
table-layout: auto|fixed|initial|inherit;
}
Valeurs de mise en page de tableau HTML
Les valeurs à utiliser pour la propriété table-layout, comme indiqué ci-dessus, dépendent entièrement et varient en fonction du choix de conception et des goûts du programmeur. Voici les valeurs qui peuvent être utilisées avec la propriété table-layout.
1. auto
'auto' est la valeur 'par défaut' de la propriété table-layout. Autrement dit, même si le programmeur ne définit pas la propriété table-layout, les navigateurs utilisent les contraintes « auto » pour définir un tableau et la disposition des cellules et des colonnes du tableau. La largeur du tableau et des cellules du tableau dépend du contenu à l'intérieur des cellules, c'est-à-dire que la largeur du tableau est ajustée en fonction du plus grand contenu des cellules, la conservation est incassable.
Vous trouverez ci-dessous un exemple montrant une disposition de table avec « auto » comme valeur.
Exemple
Cet exemple montre un tableau avec une largeur de tableau de 100 % et la valeur de mise en page du tableau est définie sur « auto ».
Code :
<body> <h2>The <code>table-layout</code> property demo</h2> <table> <thead> <tr> <th>table-layout demo</th> <th>table-layout demo</th> <th>table-layout demo</th> <th>table-layout demo</th> </tr> </thead> <tbody> <tr> <td>This text is much bigger content for the demo. Adding more text here. More text being added here.</td> <td>table-layout demo</td> <td>table-layout demo</td> <td>table-layout demo</td> </tr> <tr> <td>table-layout demo</td> <td>table-layout demo</td> <td>table-layout demo</td> <td>table-layout demo</td> </tr> </tbody> <tfoot> <tr> <td>table-layout demo</td> <td>table-layout demo</td> <td>table-layout demo</td> <td>table-layout demo</td> </tr> </tfoot> </table> </body>
Sortie :
Notez que le tableau a sa largeur ajustée en fonction du contenu des cellules, la première colonne est ajustée en fonction du contenu important de la deuxième ligne, première cellule. Alors que les autres colonnes sont divisées également puisqu'elles contiennent le même contenu rédigé.
2. corrigé
La valeur « fixe » comme son nom l’indique définit le tableau et la largeur de sa colonne en fonction des largeurs prédéfinies des éléments col (le cas échéant) et de la largeur du tableau. Cette propriété de valeur « fixe » peut également être déterminée par la largeur de la toute première ligne de cellules du tableau. Le reste de la largeur de la cellule n’a pas d’importance et n’affecte pas la largeur du tableau.
Nous devrons donner la largeur du tableau, une valeur au lieu de « auto » (une valeur par défaut). Dans les exemples ci-dessous, la largeur est définie sur 100 %.
Exemple n°1
En utilisant le même tableau créé ci-dessus, mais en définissant la disposition du tableau sur une valeur « fixe » et la largeur du tableau sur 100 %. Les valeurs CSS telles que définies dans le programme sont indiquées ci-dessous, le code HTML est le même.
Code :
table {
width: 100%;
margin: 10px auto;
table-layout: fixed;
}
Sortie :
Exemple n°2
Cet exemple montre à quel point une largeur fixe d'une cellule est importante et a ses effets lors de l'utilisation de la disposition de table comme propriété fixe.
Ici, nous définissons la largeur de la première cellule à 400 px à des fins de démonstration afin d'exagérer la différence d'affichage. Observez maintenant que la valeur de la propriété « fixe » n’a aucun effet sur les autres cellules puisque toutes les autres cellules ont le même contenu.
Exemple n°3
Observez maintenant l’exemple ci-dessous. Ce tableau est le même que ci-dessus avec un contenu beaucoup plus grand dans l'une des autres cellules et une largeur définie sur 250 px.
Notez si la propriété a été définie sur auto ;
table {
width: 100%;
margin: 10px auto;
table-layout: auto;
}
Sortie :
Mais ici, lorsque la propriété «fixed» est utilisée, elle bascule le tableau en conséquence.
table {
width: 100%;
margin: 10px auto;
table-layout: fixed;
}
- It does not touch the fixed width of the first cell.
- Divides the rest of the table equally, no matter the content.[Text Wrapping Break]
There are two more values that are Global Values.
- initial: This value when used, sets the property to the default initial value.
- inherit: You can also inherit a table layout design or property from a parent element.
Since when we use the ‘fixed’ table layout algorithm or layout method, your complete table gets rendered as soon as the browser receives the table’s first row and analyzes it. If the table is really large, users will only be able to see the table’s top row if the ‘fixed’ layout method is used which puts up a good effect on users, giving them the impression that the table is getting loaded faster.
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!