Lors de la création de pages Web, nous rencontrons souvent le problème des largeurs de tableau mal alignées. J'ai examiné en détail les paramètres de hauteur et de largeur de la balise table en HTML, et maintenant je le résume comme suit :
1. Les paramètres de largeur et de hauteur dans le tableau et leurs fonctions : La hauteur définie dans le 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 hauteur du Le tableau sera automatiquement étendu, lorsque le contenu ou la hauteur des lignes du 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 la balise tr 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 le sera. n'ont bien sûr aucun effet. 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 que la valeur de hauteur totale est mentionnée ici. 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 ont des valeurs spécifiques définies et que d'autres ne définissent pas de valeurs spécifiques par défaut, assurez-vous d'abord des besoins de base de chaque TR, puis satisfaites le reste des TR avec des valeurs spécifiques définies, puis tous les TR. sans valeurs spécifiques définies tr. Dans ce dernier cas, nous devons également considérer la situation où la largeur totale n'est pas suffisante pour la valeur de réglage totale de tr. Si elle n'est pas suffisante, elle doit répondre aux besoins de base de tr. La hauteur de la table sera automatiquement. étendu ici. Considérons ensuite tr avec un ensemble de hauteur, et enfin, considérons tr sans ensemble de hauteur.
3. Les paramètres de largeur et de hauteur et leurs fonctions dans la balise td : La largeur et la hauteur dans la balise td sont toutes deux efficaces. Regardons d'abord la largeur de TD. La largeur d'un certain TD est liée à la largeur de chaque TD dans la colonne. La plus grande largeur est considérée comme la largeur de chaque TD dans cette colonne. 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. La valeur de réglage la plus élevée sera utilisée si l'une a une valeur définie et l'autre n'en a pas. une valeur définie, la valeur définie sera utilisée.
1. Utilisez des méthodes traditionnelles
<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>Le problème possible avec les deux méthodes ci-dessus est que si le contenu dépasse le paramètre, par exemple si la largeur de l'image est supérieure à 100, il s'agrandira naturellement et ajustera automatiquement la largeur du tableau.
3. Utilisez CSS
<style>.td{width:100px;overflow:hidden}</style><table width=400> <tr> <td class=td></td> <td class=td></td> <td classe =td></td> <td class=td></td> </tr> <table>En utilisant cette méthode, 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. ou auto, vous pouvez utiliser cette méthode. Si vous définissez la valeur de l'attribut de débordement sur scroll ou auto, vous pouvez utiliser cette méthode. Si elle est définie sur scroll ou auto, vous pouvez utiliser la barre de défilement pour ajuster le moment où elle dépasse...
RésumerCe qui précède est la méthode de définition de la largeur et de la hauteur des cellules du tableau HTML que l'éditeur vous présente. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra. temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !