|
1 <!DOCTYPE HTML> |
|
2 <html> |
|
3 <head> |
|
4 <title>Balancing of tables (growing)</title> |
|
5 <style type="text/css"> |
|
6 |
|
7 table, td { |
|
8 border: none; |
|
9 margin: 0; |
|
10 padding: 0; |
|
11 border-spacing: 3px; |
|
12 } |
|
13 |
|
14 tr { height: 1.5em; } |
|
15 |
|
16 td { background: black; background: currentColor; } |
|
17 |
|
18 </style> |
|
19 </head> |
|
20 <body> |
|
21 |
|
22 <!-- width: 300px --><table><tr> |
|
23 <td style="color:aqua" width="75"> </td> |
|
24 <td style="color:yellow" width="25"> </td> |
|
25 <td style="color:red" width="0"></td> |
|
26 <td style="color:fuchsia" width="50"> </td> |
|
27 <td style="color:blue" width="150"> </td> |
|
28 </tr></table> |
|
29 |
|
30 <!-- width: 500px --><table><tr> |
|
31 <td style="color:aqua" width="150"> </td> |
|
32 <td style="color:yellow" width="50"> </td> |
|
33 <td style="color:red" width="0"></td> |
|
34 <td style="color:fuchsia" width="50"> </td> |
|
35 <td style="color:blue" width="250"> </td> |
|
36 </tr></table> |
|
37 |
|
38 <!-- width: 420px --><table><tr> |
|
39 <td style="color:aqua" width="105"> </td> |
|
40 <td style="color:yellow" width="35"> </td> |
|
41 <td style="color:red" width="0"></td> |
|
42 <td style="color:fuchsia" width="70"> </td> |
|
43 <td style="color:blue" width="210"> </td> |
|
44 </tr></table> |
|
45 |
|
46 <!-- width: 400px --><table><tr> |
|
47 <td style="color:aqua" width="50"> </td> |
|
48 <td style="color:yellow" width="50"> </td> |
|
49 <td style="color:red" width="0"></td> |
|
50 <td style="color:fuchsia" width="50"> </td> |
|
51 <td style="color:blue" width="250"> </td> |
|
52 </tr></table> |
|
53 |
|
54 <!-- width: 420px --><table><tr> |
|
55 <td style="color:aqua" width="75"> </td> |
|
56 <td style="color:yellow" width="85"> </td> |
|
57 <td style="color:fuchsia" width="50"> </td> |
|
58 <td style="color:blue" width="210"> </td> |
|
59 </tr></table> |
|
60 |
|
61 <!-- width: 400px --><table><tr> |
|
62 <td style="color:aqua" width="60"> </td> |
|
63 <td style="color:yellow" width="80"> </td> |
|
64 <td style="color:fuchsia" width="60"> </td> |
|
65 <td style="color:blue" width="200"> </td> |
|
66 </tr></table> |
|
67 |
|
68 <!-- width: 400px --><table><tr> |
|
69 <td style="color:aqua" width="100"> </td> |
|
70 <td style="color:yellow" width="100"> </td> |
|
71 <td style="color:fuchsia" width="100"> </td> |
|
72 <td style="color:blue" width="100"> </td> |
|
73 </tr></table> |
|
74 |
|
75 </body> |
|
76 </html> |