| <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> |
| <p>This is a table with a <code>td align=center</code> that has a p, a table, |
| and a p.</p> |
| <table border width="30%"> |
| <tr> |
| <td align=center> |
| <p>text</p> |
| <table width=80% border> |
| <tr> |
| <td>text 3</td> |
| </tr> |
| </table> |
| <p>text</p> |
| </td> |
| </tr> |
| </table> |
| |
| <p>This time the inner table has <code>width="100%"</code>, so you can see |
| that the CSS spec isn't quite being followed. The CSS spec says that |
| the align=center carries down as text-align and never acts to move blocks. |
| You're not moving the block for the table (above), but you're not doing |
| the text-align inside it either. In quirks mode you should do the former, |
| in standard mode, the latter.</p> |
| |
| <table border width="30%"> |
| <tr> |
| <td align=center> |
| <p>text</p> |
| <table border width="100%"> |
| <tr> |
| <td>text 3</td> |
| </tr> |
| </table> |
| <p>text</p> |
| </td> |
| </tr> |
| </table> |
| <BR> |
| <table width=300 border align="center"> |
| <tr><td>Data of Table 1!</td></tr> |
| </table> |
| |
| <BR> |
| |
| <table width=300 border style="text-align: center"> |
| <tr><td>Data of Table 2!</td></tr> |
| </table> |
| |
| <BR> |
| |
| <div style="border: 1px solid black" align="center"> |
| <table> |
| <tr><td>Data of Table 3!</td></tr> |
| </table> |
| </div> |
| |
| <BR> |
| |
| <div style="text-align: center; border: 1px solid black;"> |
| <table> |
| <tr><td>Data of Table 4!</td></tr> |
| </table> |
| </div> |
| |
| <BR> |
| |
| <table width=100%> |
| <tr> |
| <td align=center> |
| Text, followed by |
| <table> |
| <tr> |
| <td> |
| A table. |
| </td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| </table> |
| |
| <p>...should look identical to the first one below:</p> |
| |
| <table width=100%> |
| <tr> |
| <td> |
| <div align=center>Text, followed by</div> |
| <table width=100%> |
| <tr> |
| <td> |
| <div align=center>A table.</div> |
| </td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| </table> |
| |
| <p>However, in standard mode, the first table should look like this: |
| |
| <table width=100%> |
| <tr> |
| <td> |
| <div align=center>Text, followed by</div> |
| <table width=100%> |
| <tr> |
| <td> |
| A table. |
| </td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| </table> |
| |
| <p>For reference, the second table has its text all centered, the third table has the "A table." line |
| aligned left.</p> |
| |
| <hr> |
| |
| <p> See also: <a href="tablealign.strict.html">Strict Mode Version</a> </p> |
| --> |
| |
