cells without table

**dotJoon** · Sep 13, 2004, 00:38

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

**m0n5t3r** · Sep 13, 2004, 02:27

yeah, you can... but why?

**Paul O'B** · Sep 13, 2004, 15:03

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