HTML Table issue

Question

I have a HTML table issue that I'd like to understand better.

Let's assume that I have a 3 row 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>

With a very long text, the contents in the first 2 rows appear like they are nearly centered. However, if I move the whole "A very long string" <td> into a separate <table> inside the row, I see that the other content doesn't center. Why is the display different when the <td> content is inside another table?

Answer 1

Can you please provide your second example? When I created the following, it still looked the same. There's a chance you didn't properly embed the table within a table cell with a colspan of 2.

<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 2

When explaining an issue with HTML, it is best to indicate which browsers were used to test...
Anyway, I did a quick test with FF3 and IE6, and I don't see the behavior you describe: with nested table, the long string has slightly more padding but the other content is still visually centered.
You should show your other code. Mine is:

<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 3

I think I know what you mean, is the second part of your question based on:

<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>

then I guess the reason the table contents are rendered left-aligned is that the inner table tags are hiding the colspan from the outer table.

The answer is to stop using html to style your table and to use CSS instead!

Answer 4

If your question ends up with 2 tables, with the original like this:

<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>

And the looooong text into its own:

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

Then the reason why the first two lines of the first table no longer look like they're centred is because they're not - ONLY if you're comparing relative to the second table.

If you debug with border="1" in your TABLE attributes, you will see that the table that they are contained in collapses to the widest possible table data cell. Because of this, they don't look like they're centred, even though they still are.

Add some arbitrary width to the first table and you will see that they are still centred.