Results 1 to 6 of 6
  1. #1

    Simple CSS Help please, needed to replace remaining HTML table

    Hello, I am still learning how to create CSS tables and I did a little bit myself but need help with one thing please. The following code displays the way I want, but could you please remove the <table> stuff from the following code and replace it with CSS?

    CSS:

    Code:
    /* Member page rows */
    
    .Member {
    	float: left;
    	margin: 10px 10px 0px 10px;
    	font-size : 13px; 
    	width: 260px; 
    	overflow: hidden;
    }
    
    .MemLeft {
        float: left; 
    	width: 68px; 
    	height: 22px;
    }
    
    .MemRight {
    	overflow:hidden;
        height:22px; 
    }
    HTML:
    Code:
    <div class="Member">
      <table>
        <tr>
          <td width="70" rowspan="2"><a href="/48"><img src="/images/default_user.jpg" alt="" id="fImage" /></a>&nbsp;</td>
        </tr>
        <tr>
          <td width="240" valign="top"><div class="MemLeft">Username:</div>
            <div class="MemRight"><a href="/48">Tester 1</a></div>
            <div class="MemLeft">Amount:</div>
            <div class="MemRight"><b>$15.00</b></div>
            <div class="MemLeft">Joined:</div>
            <div>07-26-2009</div></td>
        </tr>
      </table>
    </div>
    <div class="Member">
      <table>
        <tr>
          <td width="70" rowspan="2"><a href="/17"><img src="/images/default_user.jpg" alt="" id="fImage" /></a>&nbsp;</td>
        </tr>
        <tr>
          <td width="240" valign="top"><div class="MemLeft">Username:</div>
            <div class="MemRight"><a href="/17">Tester2</a></div>
            <div class="MemLeft">Amount:</div>
            <div class="MemRight"><b>$5.00</b></div>
            <div class="MemLeft">Joined:</div>
            <div>07-21-2009</div></td>
        </tr>
      </table>
    </div>
    Basically so that it would be all CSS based instead of using a basic table, tr, and td rows. Thanks a lot

  2. #2
    Join Date
    Mar 2009
    Location
    Rocky Face, GA
    Posts
    196
    Most CSS "tables", or tabular data, is constructed using ordered & unordered lists, floating the list element to the left/right and then sizing it accordingly.

    A basic example would be:

    Code:
    .mytable ul {
    	width: 600px;
    	margin: 0;
    	padding: 0;
    }
    
    .mytable li {
    	float: left;
    }
    
    .mytable li.cell01 {
    	width: 200px;
    }
    
    .mytable li.cell02 {
    	width: 200px;
    }
    
    .mytable li.cell03 {
    	width: 200px;
    }
    Then using HTML to construct the list/table, such as

    HTML Code:
    <div class="mytable">
    
    	<ul>
    		<li class="cell01">This is Cell 01</li>
    		<li class="cell02">This is Cell 02</li>
    		<li class="cell03">This is Cell 03</li>
    	</ul>
    
    </ul>
    Michael T. @ Resellr.Net - CEO
    The Premier Reseller Hosting Solution
    Visit Us @ Resellr.Net | Follow Resellr.Net on Twitter

  3. #3
    Thanks but could anyone provide me with the exact coding needed to replace my example? Plus I noticed when using u or li it sometimes adds tab spaces or that li dot so I try to stick to div tags. My example is different since it has a rowspan with cells stacked on top of each other on the right and an image on the left.

  4. #4
    If you view my html example in your browser, you will see that there are columns within one cell. How can that be acheieved in CSS, so that it has a "rowspan" effect in the row on the left, and the middle with multiple columns.

  5. #5
    Join Date
    Mar 2009
    Location
    Rocky Face, GA
    Posts
    196
    You basically need to modify the CSS to suit, the above is just an example of how to go about getting it to work with CSS.

    Code:
    .mytable ul {
    	width: 600px;
    	margin: 0;
    	padding: 0;
    }
    
    .mytable li {
    	float: left;
    }
    
    .mytable li.rowspan {
    	width: 600px;
    }
    
    .mytable li.cell01 {
    	width: 200px;
    }
    
    .mytable li.cell02 {
    	width: 200px;
    }
    
    .mytable li.cell03 {
    	width: 200px;
    }
    HTML Code:
    <div class="mytable">
    
    	<ul>
    		<li class="rowspan">This is 600px wide</li>
    		<li class="cell01">This is Cell 01 (200px)</li>
    		<li class="cell02">This is Cell 02 (200px)</li>
    		<li class="cell03">This is Cell 03 (200px)</li>
    	</ul>
    
    </ul>
    Michael T. @ Resellr.Net - CEO
    The Premier Reseller Hosting Solution
    Visit Us @ Resellr.Net | Follow Resellr.Net on Twitter

  6. #6
    Join Date
    Mar 2009
    Location
    Dublin/Wicklow
    Posts
    145
    There is absolutely no need to replace a HTML table with CSS if the HTML is used to show tabular data. HTML tables have not been deprecated, and there are still very valid reasons for using them.

Similar Threads

  1. Convert HTML Table header into CSS/HTML
    By HS Nick in forum Design Requests
    Replies: 3
    Last Post: 07-04-2009, 03:39 PM
  2. html table help needed
    By portalplanet in forum Employment / Job Offers
    Replies: 5
    Last Post: 07-10-2006, 03:43 PM
  3. A simple HTML question. Help Needed...
    By DataDork in forum Web Design and Content
    Replies: 2
    Last Post: 01-20-2006, 12:28 AM
  4. A simple html table question
    By artied2 in forum Programming Discussion
    Replies: 2
    Last Post: 06-29-2003, 07:34 AM
  5. Competition HTML Table design needed
    By Desperate in forum Employment / Job Offers
    Replies: 2
    Last Post: 06-10-2003, 06:14 PM

Posting Permissions

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