413286-4a.html (1629B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Span & its columns have no width</title> 5 <style> 6 table { width: 500px; } 7 td { height: 2em; } 8 td.aqua { background: aqua } 9 td.lime { background: lime } 10 td.blue { background: blue } 11 td.pink { background: pink } 12 td.yellow { background: yellow } 13 14 td.lowPct { width: 10% } 15 td.medPct { width: 40% } 16 td.specWidth { width: 50px } 17 </style> 18 </head> 19 <body> 20 <h2>No third column</h2> 21 <table cellpadding="0" cellspacing="0"> 22 <tr> 23 <td colspan="2" class="aqua"></td> 24 </tr><tr> 25 <td class="lime"></td> 26 <td class="blue"></td> 27 </tr> 28 </table> 29 30 <h2>Third column with low percent width</h2> 31 <table cellpadding="0" cellspacing="0"> 32 <tr> 33 <td colspan="2" class="aqua"></td> 34 <td class="yellow lowPct"></td> 35 </tr><tr> 36 <td class="lime"></td> 37 <td class="blue"></td> 38 <td class="pink lowPct"></td> 39 </tr> 40 </table> 41 42 <h2>Third column with medium percent width</h2> 43 <table cellpadding="0" cellspacing="0"> 44 <tr> 45 <td colspan="2" class="aqua"></td> 46 <td class="yellow medPct"></td> 47 </tr><tr> 48 <td class="lime"></td> 49 <td class="blue"></td> 50 <td class="pink medPct"></td> 51 </tr> 52 </table> 53 54 <h2>Third column with preferred width</h2> 55 <table cellpadding="0" cellspacing="0"> 56 <tr> 57 <td colspan="2" class="aqua"></td> 58 <td class="yellow specWidth"></td> 59 </tr><tr> 60 <td class="lime"></td> 61 <td class="blue"></td> 62 <td class="pink specWidth"></td> 63 </tr> 64 </table> 65 </body> 66 </html>