SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    SitePoint Enthusiast m0n5t3r's Avatar
    Join Date
    Jul 2003
    Location
    Romania
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, you can... but why?
    m0n5t3r's nest
    --
    earth is 98% full ... please delete anyone you can.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  4. #4
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Same why ?
    For understanding style...

    Thank you for your example code.

    It helped a lot.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •