mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-14 11:40:13 +01:00
72 lines
1.9 KiB
HTML
72 lines
1.9 KiB
HTML
|
<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>
|
||
|
|
|
||
|
|
|