List Help

[colonelswizz]

I am newbie at web design and I am trying to make a simple list with a matching data.

Example

Name Email
John Steeps john@xxxx.com

Can someone please tell me how I can structure this with css?

[Fang]

A table could be used

[claytonseo]

if you have tubelar data, you should use a table, dont use tables for designing, im just saying that because people still use tables for design.

[cheri_lm]

I don't think you can 'structure' with CSS, only formatting type tasks: like colors, sizes, etc, assigning attribute's colors by unique names. Do you understand using tables, what others are trying to say? Your columns organize your data, then your pt size lines it up. But it would be helpful to understand how to do nested tables and so on. Lay out your what you want your web page to look like on a sheet, then make your table code from your layout.

[ohiowebpro]

CSS can be used with HTML. CSS is far more useful than being just for colors and text.

Pure and simple...

CSS:

#divtable {width: 300px; clear: both;}
#name {float: left; width: 150px;}
#email {float: right; width: 150px;}

HTML:

<div id="divtable">
<div id="name">
<h2>Name</h2>
<p>John Steeps</p>
</div>
<div id="email">
<h2>Email</h2>
<p>john@xxxx.com</p>
</div>
</div>

[colonelswizz]

Thanks for the tips. I should have been more clear in my original question. I do understand tables that is how my site is currently scripted. I need to make several layout changes so I have decided to redo the entire site to make it more web friendly. So I am learning more about css and div's instead of using tables. So what I was wanting to know is how to use css with ul & li's to display a 2 column list with corresponding data in the 2nd column. This what I have done to get the output that I am looking for.

/*CSS*/

#agentlist {
width:550px;
float:left;
margin:5px auto;
padding:0 0 15px 15px ;
display:inline;
}
#agentlist ul {
list-style-type:none;
margin:0 auto;
}
#agentlist li.name {
float:left;
width:250px;
padding: 0;
margin:0 auto;
display:inline;
line-height:18px;
}
#agentlist li.name a {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
color:#000;
}
#agentlist li.name a:hover {
text-decoration:underline;
color:#33c;
}
#agentlist li.email {
float:right;
width:250px;
padding: 0;
margin:0 auto;
display:inline;
line-height:18px;
}
#agentlist li.email a {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
text-decoration:none;
color:#33c;
}
#agentlist li.email a:hover {
text-decoration:underline;
color:#33c;
}

/*HTML*/

<div id="agentlist">

<h1>Agents</h1>

<ul>
<li class="name"><a href="#">John Doe</a></li>
<li class="email"><a href="mailto:###">doe@gmail.com</a></li>
<li class="name"><a href="#">Jane Snow</a></li>
<li class="email"><a href="mailto:###">snow@gmail.com</a></li>
</ul>

</div>

This seems to work fine cross browser. If this can be improved upon I am all ears

[Fang]

By using a table or definition list.
The name and email are related, an unordered list shows no correlation.

[cheri_lm]

I guess I don't understand your problem. It seems you already have your answer. OhioWebPro gave you the table but you are saying you don't want to use tables, just CSS. You should be able to figure it out from here.

[cheri_lm]

Thank you, OhioWebPro. (I am originally a Buckeye too). I didn't know you could structure the table in CSS. I've only had the beginning class that comes in with HTML, ASP, and PHP. Now I think I'll take the advanced CSS/HTML class.