third_party/WebKit/LayoutTests/tables/mozilla/bugs/bug7112-1.html

   1 <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
   2 <p>This is a table with a <code>td align=center</code> that has a p, a table,
   3 and a p.</p>
   4 <table border width="30%">
   5  <tr>
   6   <td align=center>
   7    <p>text</p>
   8    <table width=80% border>
   9     <tr>
  10      <td>text 3</td>
  11     </tr>
  12    </table>
  13    <p>text</p>
  14   </td>
  15  </tr>
  16 </table>
  17
  18 <p>This time the inner table has <code>width="100%"</code>, so you can see
  19 that the CSS spec isn't quite being followed.  The CSS spec says that
  20 the align=center carries down as text-align and never acts to move blocks.
  21 You're not moving the block for the table (above), but you're not doing
  22 the text-align inside it either.  In quirks mode you should do the former,
  23 in standard mode, the latter.</p>
  24
  25 <table border width="30%">
  26  <tr>
  27   <td align=center>
  28    <p>text</p>
  29    <table border width="100%">
  30     <tr>
  31      <td>text 3</td>
  32     </tr>
  33    </table>
  34    <p>text</p>
  35   </td>
  36  </tr>
  37 </table>
  38 <BR>
  39 <table width=300 border align="center">
  40 <tr><td>Data of Table 1!</td></tr>
  41 </table>
  42
  43 <BR>
  44
  45 <table width=300 border style="text-align: center">
  46 <tr><td>Data of Table 2!</td></tr>
  47 </table>
  48
  49 <BR>
  50
  51 <div style="border: 1px solid black" align="center">
  52 <table>
  53 <tr><td>Data of Table 3!</td></tr>
  54 </table>
  55 </div>
  56
  57 <BR>
  58
  59 <div style="text-align: center; border: 1px solid black;">
  60 <table>
  61 <tr><td>Data of Table 4!</td></tr>
  62 </table>
  63 </div>
  64
  65 <BR>
  66
  67 <table width=100%>
  68  <tr>
  69   <td align=center>
  70    Text, followed by
  71    <table>
  72     <tr>
  73      <td>
  74       A table.
  75      </td>
  76     </tr>
  77    </table>
  78   </td>
  79  </tr>
  80 </table>
  81
  82 <p>...should look identical to the first one below:</p>
  83
  84 <table width=100%>
  85  <tr>
  86   <td>
  87    <div align=center>Text, followed by</div>
  88    <table width=100%>
  89     <tr>
  90      <td>
  91       <div align=center>A table.</div>
  92      </td>
  93     </tr>
  94    </table>
  95   </td>
  96  </tr>
  97 </table>
  98
  99 <p>However, in standard mode, the first table should look like this:
 100
 101 <table width=100%>
 102  <tr>
 103   <td>
 104    <div align=center>Text, followed by</div>
 105    <table width=100%>
 106     <tr>
 107      <td>
 108       A table.
 109      </td>
 110     </tr>
 111    </table>
 112   </td>
 113  </tr>
 114 </table>
 115
 116 <p>For reference, the second table has its text all centered, the third table has the "A table." line
 117 aligned left.</p>
 118
 119 <hr>
 120
 121 <p> See also: <a href="tablealign.strict.html">Strict Mode Version</a> </p>
 122 -->
 123