Trois méthodes pour résoudre les problèmes d'alignement de largeur et de hauteur de tableau en HTML

De nombreux programmeurs seront confrontés au problème que les tableaux ne peuvent pas être alignés lors de la création de sites Web. Alors, comment définir la largeur et la hauteur des cellules dans les tableaux en HTML ? Résumons les trois méthodes de définition de l'alignement de la largeur et de la hauteur du tableau en HTML.

Lorsque les programmeurs créent des pages Web, ils rencontrent souvent le problème des largeurs de tableau mal alignées. J'ai examiné les détails des paramètres de hauteur et de largeur du tableau de balises de table en HTML, et je les résume maintenant comme suit :

1 Les paramètres de largeur et de hauteur dans le tableau et leurs fonctions <.> : définir la hauteur du tableau définit en fait une valeur minimale, c'est-à-dire que lorsque le contenu du tableau ou la hauteur totale de la ligne dépasse cette valeur définie, la valeur de la hauteur du tableau sera automatiquement étendue lorsque le contenu ou la hauteur de la ligne. dans le tableau n'atteint pas cette valeur, il s'étendra automatiquement jusqu'à cette valeur. La valeur de largeur définie dans le tableau est généralement la valeur maximale de la largeur du tableau et ne peut pas être modifiée, même si la largeur du contenu interne la dépasse. (Si le contenu interne est une image, la largeur du tableau peut être modifiée.)

2

Les paramètres de largeur et de hauteur dans la balise tr et leurs fonctions  : Le paramètre de largeur dans le tr. La balise n'a aucun effet, car comme on peut le voir dès le premier point, la largeur du tableau ne peut pas être modifiée, et la balise tr ne fonctionnera bien sûr pas. Il n'est donc possible de discuter que du réglage de la hauteur en tr. Le réglage de la hauteur en tr est lié aux réglages entre plusieurs tr. Lorsque plusieurs trs sont définis avec des valeurs de hauteur spécifiques, la hauteur de chaque tr est allouée à la valeur de hauteur totale proportionnellement à la valeur définie. Notez qu'il s'agit de la valeur de hauteur totale. Lorsque plusieurs trs ne définissent pas une valeur de hauteur spécifique, la valeur de hauteur totale est uniformément répartie. Lorsque certains TR sont définis avec des valeurs spécifiques et que d'autres ne sont pas définis avec des valeurs spécifiques par défaut, assurez-vous d'abord des besoins de base de chaque TR, puis le reste répondra aux TR avec des valeurs spécifiques définies, puis tous les TR sans valeurs spécifiques seront définis tr. Dans ce dernier cas, il faut considérer que la largeur totale n'est pas suffisante pour la valeur totale de réglage de tr. Si elle n'est pas suffisante, elle doit répondre aux besoins de base de tr. La hauteur de la table sera ici automatiquement étendue. Considérons ensuite tr avec une hauteur définie, et enfin tr sans hauteur définie.

3.

Les paramètres de largeur et de hauteur dans la balise td et leurs fonctions  : La largeur et la hauteur dans la balise td sont toutes efficaces. Regardons d'abord la largeur d'un TD. La largeur d'un certain TD est liée à la largeur de chaque TD dans la colonne. La plus grande largeur parmi eux est considérée comme la largeur de chaque TD dans cette colonne. most. Où, vous devez saisir la largeur d'un certain TD d'un point de vue global. Vous ne pouvez pas déterminer sa largeur à partir du paramètre de largeur de celui-ci. Une fois que nous aurons déterminé la largeur de chaque colonne, les choses seront plus faciles à gérer. À l'heure actuelle, la répartition de la largeur entre chaque TD est basée sur la règle de répartition de la hauteur de chaque tr dans le deuxième article. La seule différence est que par défaut, la largeur de chaque TD n'est pas répartie de manière égale, mais proportionnellement à leur valeur réelle. contenu. Jetons un coup d'œil au réglage de la hauteur de td. Ceci est relativement simple, cependant, la hauteur de chaque td dépend de la hauteur maximale de la ligne où se trouve le td pour déterminer la hauteur de chaque td dans cette ligne. de chaque rangée est déterminé par tr. Le principe d'attribution des hauteurs est le même. Une autre chose à noter est la relation entre la hauteur de td et la hauteur de tr. Tout d'abord, il doit être basé sur les besoins du contenu. Sur cette base, il sera déterminé en fonction de la valeur définie. Le paramètre ayant une valeur plus élevée sera utilisé si l'un a une valeur définie et l'autre non. ont une valeur définie, alors la valeur définie sera utilisée.

1, utilisez la méthode traditionnelle

 <table width="400"> 
<tr> 
<td width="100"></td> 
<td width="100"></td> 
<td width="100"></td> 
<td width="100"></td> 
</tr> 
<table>

2, utilisez CSS

<style>
.td{width:100px;}
</style>
<table width="400"> 
<tr> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
</tr> 
<table>

Les problèmes qui peuvent survenir avec les deux méthodes ci-dessus sont, si le contenu dépasse le paramètre, par exemple si la largeur de l'image est supérieure à 100, il s'agrandira naturellement, ajustera automatiquement la largeur du tableau

3 et utilisera CSS pour aligner

<style>
.td{width:100px;overflow:hidden}
</style>
<table width="400"> 
<tr> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
</tr> 
<table>

De cette façon, vous pouvez masquer la partie excédentaire. Si vous avez besoin d'un contrôle strict, vous pouvez utiliser cette méthode si vous définissez la valeur de l'attribut de débordement sur défilement ou automatiquement, vous pouvez utiliser cette méthode. valeur d'attribut pour faire défiler ou automatiquement, vous pouvez utiliser cette méthode. Si tel est le cas, vous pouvez utiliser la barre de défilement pour ajuster le moment où elle dépasse la limite.

Ce qui précède est une introduction complète aux trois méthodes pour résoudre le problème de l'alignement de la largeur et de la hauteur des tableaux en HTML. Si vous souhaitez en savoir plus sur les didacticiels HTML, veuillez faire attention au site Web PHP chinois.

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!