cells without table

Code:

<table border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan ="7" height="1" bgcolor="black"></td> </tr> <tr> <td width="1" bgcolor="black"></td> <td width="100" align="center" height="30">cell 11</td> <td width="1" bgcolor="black"></td> <td width="100" align="center">cell 12</td> <td width="1" bgcolor="black"></td> <td width="100" align="center">cell 13</td> <td width="1" bgcolor="black"></td> </tr> <tr> <td colspan ="7" height="1" bgcolor="black"></td> </tr> <tr> <td width="1" bgcolor="black"></td> <td width="100" align="center" height="30">cell 21</td> <td width="1" bgcolor="black"></td> <td width="100" align="center">cell 22</td> <td width="1" bgcolor="black"></td> <td width="100" align="center">cell 23</td> <td width="1" bgcolor="black"></td> </tr> <tr> <td colspan ="7" height="1" bgcolor="black"></td> </tr> <tr> <td width="1" bgcolor="black"></td> <td width="100" align="center" height="30">cell 31</td> <td width="1" bgcolor="black"></td> <td width="100" align="center">cell 32</td> <td width="1" bgcolor="black"></td> <td width="100" align="center">cell 33</td> <td width="1" bgcolor="black"></td> </tr> <tr> <td colspan ="7" height="1" bgcolor="black"></td> </tr> </table>

The above code will show a table which has 9 cells.
<table> is used in the above tag.
I like to know whether we can make it without table?

Can I make it using only CSS?

How can I make the same result with the above result without table?

Thanks in Advance

yeah, you can... but why?

Same why - but here you go ;)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> #outer { width:302px; border:1px solid #000; } .cell1 { border-right:1px solid #000; border-bottom:1px solid #000; } .cell2 {border-right:1px solid #000;} .cell3 {border-bottom:1px solid #000;} .cell3 {border-bottom:1px solid #000;} .cell4 {border-right:1px solid #000;} .cell1, .cell2, .cell3,.cell4,.cell5 { width:100px; height:30px; line-height:30px; float:left; text-align:center; } </style> </head> <body> <div id="outer"> <div class="cell1">cell 11</div> <div class="cell1">cell 12</div> <div class="cell3">cell 13</div> <div class="cell1">cell 21</div> <div class="cell1">cell 22</div> <div class="cell3">cell 23</div> <div class="cell4">cell 31</div> <div class="cell4">cell 32</div> <div class="cell5">cell 33</div> </div> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan ="7" height="1" bgcolor="black"></td> </tr> <tr> <td width="1" bgcolor="black"></td> <td width="100" align="center" height="30">cell 11</td> <td width="1" bgcolor="black"></td> <td width="100" align="center">cell 12</td> <td width="1" bgcolor="black"></td> <td width="100" align="center">cell 13</td> <td width="1" bgcolor="black"></td> </tr> <tr> <td colspan ="7" height="1" bgcolor="black"></td> </tr> <tr> <td width="1" bgcolor="black"></td> <td width="100" align="center" height="30">cell 21</td> <td width="1" bgcolor="black"></td> <td width="100" align="center">cell 22</td> <td width="1" bgcolor="black"></td> <td width="100" align="center">cell 23</td> <td width="1" bgcolor="black"></td> </tr> <tr> <td colspan ="7" height="1" bgcolor="black"></td> </tr> <tr> <td width="1" bgcolor="black"></td> <td width="100" align="center" height="30">cell 31</td> <td width="1" bgcolor="black"></td> <td width="100" align="center">cell 32</td> <td width="1" bgcolor="black"></td> <td width="100" align="center">cell 33</td> <td width="1" bgcolor="black"></td> </tr> <tr> <td colspan ="7" height="1" bgcolor="black"></td> </tr> </table> </body> </html>

Paul

Quote:

Originally Posted by Paul O'B

Same why ?

For understanding style...

Thank you for your example code.

It helped a lot.