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

[lexington]

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:

/* 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:

<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

[Michael-DAS]

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:

.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

<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>

[lexington]

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.

[lexington]

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.

[Michael-DAS]

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.

.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;
}

<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>

[Eoin_]

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.