HTML-Tabellenproblem

Question

Ich habe ein Problem mit einer HTML-Tabelle, das ich gerne besser verstehen würde.

Nehmen wir an, ich habe ein 3-zeiliges HTML

<table>
    <tr>
        <td style="text-align:right;">A1</td>
        <td>A2</td>
    </tr>
    <tr>
        <td style="text-align:right;">B1</td>
        <td>B2</td>
    </tr>
    <tr>
        <td colspan="2">A very loooooooong string here</td>
    </tr>
</table>

Bei einem sehr langen Text erscheint der Inhalt in den ersten 2 Zeilen fast zentriert. Wenn ich jedoch den gesamten "A very long string" verschiebe <td> in eine separate <table> innerhalb der Zeile, sehe ich, dass der andere Inhalt nicht zentriert ist. Warum ist die Anzeige anders, wenn die <td> Inhalt innerhalb einer anderen Tabelle ist?

Answer 1

Wenn Ihre Frage mit 2 Tabellen endet, mit dem Original wie folgt:

<table>
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
</table>

Und der laaaaange Text in sich selbst:

<table>
 <tr>
  <td colspan="2">A very loooooooong string here</td>
 </tr>
</table>

Der Grund, warum die ersten beiden Zeilen der ersten Tabelle nicht mehr so aussehen, als wären sie zentriert, ist, dass sie es nicht sind - NUR wenn Sie relativ zur zweiten Tabelle vergleichen.

Wenn Sie Debuggen mit border="1" in Ihren TABLE-Attributen, werden Sie sehen, dass die Tabelle, in der sie enthalten sind, auf die breitestmögliche Tabellenzelle zusammenfällt. Aus diesem Grund sehen sie nicht so aus, als wären sie zentriert, obwohl sie es noch sind.

Fügen Sie der ersten Tabelle eine beliebige Breite hinzu und Sie werden sehen, dass sie immer noch zentriert sind.

Answer 2

Können Sie bitte Ihr zweites Beispiel nennen? Als ich das folgende Beispiel erstellt habe, sah es noch genauso aus. Es besteht die Möglichkeit, dass Sie die Tabelle nicht richtig in eine Tabellenzelle mit einem colspan von 2 eingebettet haben.

<table border="1">
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
 <tr>
  <td colspan="2">
    <table border="1"><tr>
        <td>A very loooooooong string here</td>
    </tr></table>
  </td>
 </tr>
</table>

Answer 3

Wenn Sie ein HTML-Problem erklären, geben Sie am besten an, welche Browser zum Testen verwendet wurden...
Wie auch immer, ich habe einen schnellen Test mit FF3 und IE6 gemacht, und ich sehe das von Ihnen beschriebene Verhalten nicht: Bei einer verschachtelten Tabelle hat die lange Zeichenfolge etwas mehr Abstand, aber der andere Inhalt ist immer noch visuell zentriert.
Sie sollten Ihren anderen Code zeigen. Meiner ist:

<table>
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
 <tr>
  <td colspan="2"><table><tr><td>A very loooooooong string here</td></tr></table></td>
 </tr>
</table>

Answer 4

Ich glaube, ich weiß, was Sie meinen, worauf der zweite Teil Ihrer Frage beruht:

<table>
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
 <tr>
  <table><td colspan="2">A very loooooooong string here</td></table>
 </tr>
</table>

dann vermute ich, dass der Grund, warum der Tabelleninhalt linksbündig dargestellt wird, darin liegt, dass die inneren Tabellen-Tags den colspan von der äußeren Tabelle verbergen.

Die Antwort lautet: Verwenden Sie kein HTML mehr, um Ihre Tabelle zu gestalten, sondern verwenden Sie stattdessen CSS!