hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Simple CSS Help please, needed to replace remaining HTML table
Reply

Forum Jump

Simple CSS Help please, needed to replace remaining HTML table

Reply Post New Thread In Web Design and Content Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old
Disabled
 
Join Date: Dec 2003
Posts: 1,941

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



Sponsored Links
  #2  
Old
Junior Guru
 
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  
Old
Disabled
 
Join Date: Dec 2003
Posts: 1,941
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.

Sponsored Links
  #4  
Old
Disabled
 
Join Date: Dec 2003
Posts: 1,941
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  
Old
Junior Guru
 
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  
Old
WHT Addict
 
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.

Reply

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

Related posts from TheWhir.com
Title Type Date Posted
BGP Routing Table Size Limit Blamed for Tuesday’s Website Outages Web Hosting News 2014-08-13 10:36:33
Chinese Government Wants Domestic Banks to Replace IBM Servers with Local Brands to Protect Financial Security Web Hosting News 2014-05-27 11:13:19
How to Fix Heartbleed in Two Steps, and Other Security Threats to Watch Out For Web Hosting News 2014-05-01 08:25:25
.CO Internet Launches POP.co to Help Startups Get Online Fast Web Hosting News 2013-08-13 15:42:50
Web Host Hostway Replaces Legacy Webmail with Open-Xchange Web Hosting News 2013-02-01 11:17:40


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
Advertisement:
Web Hosting News:
WHT Membership
WHT Membership



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?