| <html><head> |
| <style> |
| table { |
| width: 600px; |
| border: 1px solid red; |
| empty-cells: show; |
| } |
| td { |
| border: 1px solid green; |
| } |
| table.inner {margin: 20px; width: 600px;} |
| </style><head> |
| <body> |
| |
| <pre>These tables below all have the HTML + CSS ... |
| |
| <TABLE><tr> table { |
| <td><TABLE style='margin: 20px; padding: 19px;'> width: 600px; |
| <tr><td></td></tr> border: 1px solid red; |
| </TABLE></td> empty-cells: show;} |
| </tr></TABLE> td { |
| border: 1px solid green;} |
| table.inner {margin: 20px;} |
| |
| ... and differ only in the value of 'padding:'. From top table to |
| bottom: 0px, 10px, 19px, 20px, 25px. Note that for a <u><i>table over-constrained |
| within another table</i></u>, <i><u>when (padding >=margin)</u></i>, the margin is <i><u>all allocated |
| to the right hand side</u></i> of the table (and to the left if 'direction: rtl;'.</pre> |
| |
| <TABLE style='width: 600px; border: 1px dotted blue;'><tr> |
| <td>600px table for width comparison</td> |
| </tr></TABLE> |
| |
| <TABLE><tr> |
| <td><TABLE class='inner' style='padding: 0px;'> |
| <tr><td></td></tr> |
| </TABLE></td> |
| </tr></TABLE> |
| |
| |
| <TABLE><tr> |
| <td><TABLE class='inner' style='padding: 10px;'> |
| <tr><td></td></tr> |
| </TABLE></td> |
| </tr></TABLE> |
| |
| |
| <TABLE><tr> |
| <td><TABLE class='inner' style='padding: 19px;'> |
| <tr><td></td></tr> |
| </TABLE></td> |
| </tr></TABLE> |
| |
| |
| <TABLE><tr> |
| <td><TABLE class='inner' style='padding: 20px;'> |
| <tr><td></td></tr> |
| </TABLE></td> |
| </tr></TABLE> |
| |
| <TABLE><tr> |
| <td><TABLE class='inner' style='padding: 25px;'> |
| <tr><td></td></tr> |
| </TABLE></td> |
| </tr></TABLE> |
| |
| |
| </body> |
| </html> |
| |
| |
