Comment formater plusieurs tables pour l'alignement vertical

J'ai hérité de code HTML et ont été invités à aligner les deux tables afin que le texte entre les deux colonnes.

Il y a une table externe qui fournit un à deux colonnes regarde cette chose, puis deux tables internes (un pour chaque colonne). Chaque table interne contient des boîtes contenant du texte. Il est de ces boîtes de texte que le client veut alignés entre les deux colonnes.

Je ne peux penser à des façons de rendre les lignes de texte "match" entre les deux colonnes, mais rien de simple ou élégant.

Voici le code html:

<html>
<head>
<title>Test</title>
</head>
<body  >
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="50%">
<hr align="left" />
<p><center><strong>Left Side</strong></center></p>
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="5%">
<strong>1:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
&nbsp;
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
<tr>
<td width="5%">
<strong>2:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
&nbsp;
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
</table>
</td>
<td width="50%">
<hr align="left" />
<p><center><strong>Right Side</strong></center></p>
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="5%">
<strong>1:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
&nbsp;
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
<tr>
<td width="5%">
<strong>2:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
&nbsp;
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

EDIT: de Plus de précisions et restrictions sur cette chose.

  1. Il est créé par une servlet programme, de sorte que la commande de deux colonnes est de la boucle de base. C'est, une boucle écrit le premier (à gauche) de la colonne, puis une autre boucle écrit le deuxième (à droite) de la colonne. Ils ne sont pas "blendable" boucles - ils doivent exécuter l'un après l'autre, ce qui réduit gravement ce que je suis autorisé à faire de la mise en forme.

  2. Le client a spécifié "non javascript" dans les servlets. C'est une ferme de restriction.

Je peux utiliser le CSS, mais les deux boucles (à gauche, puis à droite) sont fixes.

  • Pourriez-vous peut-être fournir une image de la façon dont vous souhaitez que l'alignement? Je ne suis pas 100% sûr de ce que vous me demandez.
  • La réponse ci-dessous, avec le code interleaved est parfait, exactement ce dont j'ai besoin. MAIS - en raison des contraintes sur les boucles, je ne peux pas interleave (gauche, droite, gauche, droite) du code.
InformationsquelleAutor Huntrods | 2009-05-13
  1. 2

    Pas très sûr de comprendre ce que vous voulez ici, semble que vous voulez lignes pour ajuster de manière dynamique leur hauteur en fonction de son homologue ligne sur l'autre colonne. I. e. la première rangée sur le côté gauche a un texte plus long que la première rangée sur le côté droit, mais vous voulez les deux deuxième lignes de départ aligné, en laissant un espace vide entre le texte de la première ligne sur la colonne de droite et la deuxième ligne sur la colonne de droite, correct?

    Est-ce le cas, votre solution est de supprimer la table d'enrubannage. Une table est déjà basé sur des colonnes, de sorte que vous n'avez pas besoin d'une table supplémentaire pour créer les colonnes.

    Essayez ce code:

    <html>
<head>
<title>Test</title>
</head>
<body>
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td colspan="2" width="50%">
<p><center><strong>Left Side</strong></center></p>
</td>
<td colspan="2" width="50%">
<p><center><strong>Right Side</strong></center></p>
</td>
<tr>
<tr>
<td width="5%" valign="top">
<strong>1:</strong>
</td>
<td width="45%" valign="top">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
<td width="5%" valign="top">
<strong>1:</strong>
</td>
<td width="45%" valign="top">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">&nbsp;</td>
<td width="45%">
<hr align="left" />
</td>
<td width="5%"> &nbsp; </td>
<td width="45%">
<hr align="left" />
</td>
</tr>
<tr>
<td width="5%" valign="top">
<strong>2:</strong>
</td>
<td width="45%" valign="top">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
<td width="5%" valign="top">
<strong>2:</strong>
</td>
<td width="45%" valign="top">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">&nbsp;</td>
<td width="45%">
<hr align="left" />
</td>
<td width="5%">&nbsp;</td>
<td width="45%">
<hr align="left" />
</td>
</tr>
</table>
</body>
</html>

    Pas besoin de dire que c'est un terrible et très old school façon de faire ce que vous faites, vous êtes mieux à l'aide de balises div et de css, mais comme vous l'avez dit vous avez hérité de la code, je comprends qu'un peu de refactoring n'est pas une option.

    • Vous pouvez remplacer toutes les lignes et les cellules par des divs, mais se débarrasser de la rondelle d'écartement des colonnes et dans la ligne "styles" (par manque d'un meilleur mot) à l'aide d'un peu de css, serait-il le faire. Je suppose que ça dépend du contenu que des tables ou des divs sont la voie à suivre.
    • C'est une bonne solution, mais les deux colonnes sont entrelacés (à gauche, puis à droite, puis à gauche, puis à droite...). En raison de la façon dont le code html est créé (voir l'edit de mon premier post), je ne peux pas utiliser cette approche. Je souhaite que je pourrais. Cheers, -R
    • ... et oui, c'est certainement le millésime 2000, html. 😉
    • si vous voulez dire que le contenu de l'ensemble de la colonne de gauche est créé en premier, puis l'ensemble de la colonne de droite... je suis sûr que il n'y a aucun moyen d'obtenir ce que vous voulez. Mais il est difficile de savoir si vous avez accès à du contenu "générateur" ou pas, pouvez-vous mettre plus de détails à votre question s'il vous plaît?
    • Correct. La colonne de gauche doit être entièrement créée, puis la colonne de droite. Je peux accéder au code, à un certain degré, mais ne peut pas changer ce détail spécifique du code. (ne peut pas accéder à ce composant).
    • Si vous avez fait de cette restriction, afin de créer une colonne d'abord, puis de l'autre, il n'y a aucun moyen possible de réaliser ce que vous voulez, sans beaucoup de difficile javascript. Cependant, je ne sais pas quelle raison avez-vous pu ne pas être capable de mettre en page vos contenus en lignes. Quel que soit le côté de serveur langage de script que vous utilisez, remplacer les sorties d'impression pour les variables, et une fois que vous avez toutes les variables puis les imprimer avec votre mise en page de choix, dans ce cas, les lignes de la table. Cela fonctionne pour vous?
    • J'ai été en mesure de convaincre le client afin de permettre une réécriture de la boucle, de sorte que cette approche pourrait être utilisée. N'a pas fallu longtemps, et maintenant j'ai fourni ce qu'ils voulaient. -R

    InformationsquelleAutor palako
  2. 0

    OK je crois que je comprends le problème, à partir de ce que les autres ont dit. Si vous êtes en mesure de modifier le code vous-même (vous n'avez pas explicitement dire), alors la solution la plus rapide est: est-ce

    • Utiliser plusieurs lignes dans la table externe, c'est à dire 2 colonnes x N lignes au lieu de 2x1.
    • Définir chaque cellule de cette table externe pour être alignés verticalement au milieu (c'est la valeur par défaut dans tous les navigateurs).
    • Mettre une table distincte à l'intérieur de chaque cellule. Dans la même ligne, les tableaux s'aligner au milieu.

    Il n'y a pas vraiment de CSS (c'est à dire de table non) des solutions que je peux penser que le travail de la croix-navigateur. Vous pouvez utiliser inline-block mais il y a des bémols.

    InformationsquelleAutor DisgruntledGoat
  3. 0

    Si je comprends bien, vous voulez les lignes de deux tables d'adapter la hauteur du rang le plus élevé des deux, pour chaque ligne de la table.

    Je pense que les deux seuls moyens pour ce faire sont:

    1. Utiliser javascript pour calculer, pour chaque hauteur de ligne pour chaque table et le plus élevé (le plus élevé de la ligne 1, la plus élevée de la ligne 2, etc.).
    2. Fusionner les deux tables dans une (meilleure, de fusionner tous les trois).

    Le second est évidemment la voie à suivre, mais le premier devrait aussi fonctionner si les deux tables de toujours avoir le même nombre de lignes (mais vous avez besoin que de toute façon) et vous ne pouvez pas changer le code html.

    Hormis cela, je ne pense pas qu'il y a un code html /css solution.

    InformationsquelleAutor jeroen