CSS Simulated table Effect

 

1. Simulated table effect, passed the test in IE6, IE7, IE8, Firefox, and opera
   
   

   Although this method is not recommended for table simulation, it can be done.

2. <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
3. <
   Html
   Xmlns
   = "Http://www.w3.org/1999/xhtml"
   >
   
4. <
   Head
   >
   
5. <
   Meta
   HTTP-equiv
   = "Content-Type"
   Content
   = "Text/html; charsets = UTF-8"
   />
   
6. <
   Title
   >
   Div + CSS simulate table effect-by koyoz.com </
   Title
   >
   
7. <
   Style
   Type
   = "Text/CSS"
   >
   
8. * {Margin: 0; padding: 0}
9. # Main {margin: 100px 0 0 200px}
10. # Main ul {width: 520px; Height: 165px; List-style: None}
11. # Main Li {border-left: 1px solid # CCC; border-top: 1px solid # CCC; float: Left; width: 102px; Height: 33px; text-align: center; line-Height: 33px}
12. # Main Li. B {border-bottom: 1px solid # CCC}
13. # Main Li. r {border-Right: 1px solid # CCC}
14. </
    Style
    >
    
15. </
    Head
    >
    
17. <
    Body
    >
    
18. <
    Div
    ID
    = "Main"
    >
    
19. <
    Ul
    >
    
20. <
    Li
    >
    11 </
    Li
    >
    
21. <
    Li
    >
    11 </
    Li
    >
    
22. <
    Li
    >
    11 </
    Li
    >
    
23. <
    Li
    >
    11 </
    Li
    >
    
24. <
    Li
    Class
    = "R"
    >
    11 </
    Li
    >
    
25. <
    Li
    >
    </
    Li
    >
    
26. <
    Li
    >
    </
    Li
    >
    
27. <
    Li
    >
    </
    Li
    >
    
28. <
    Li
    >
    </
    Li
    >
    
29. <
    Li
    Class
    = "R"
    >
    11 </
    Li
    >
    
30. <
    Li
    >
    </
    Li
    >
    
31. <
    Li
    >
    </
    Li
    >
    
32. <
    Li
    >
    </
    Li
    >
    
33. <
    Li
    >
    </
    Li
    >
    
34. <
    Li
    Class
    = "R"
    >
    11 </
    Li
    >
    
35. <
    Li
    >
    </
    Li
    >
    
36. <
    Li
    >
    </
    Li
    >
    
37. <
    Li
    >
    </
    Li
    >
    
38. <
    Li
    >
    </
    Li
    >
    
39. <
    Li
    Class
    = "R"
    >
    11 </
    Li
    >
    
40. <
    Li
    Class
    = "B"
    >
    </
    Li
    >
    
41. <
    Li
    Class
    = "B"
    >
    </
    Li
    >
    
42. <
    Li
    Class
    = "B"
    >
    </
    Li
    >
    
43. <
    Li
    Class
    = "B"
    >
    </
    Li
    >
    
44. <
    Li
    Class
    = "B R"
    >
    11 </
    Li
    >
    
45. </
    Ul
    >
    
46. </
    Div
    >
    
47. </
    Body
    >
    
48. </
    Html
    >