Tabbed spacing HTML/CSS Best practice?

[mzpresto]

Hi

I was wondering what the best practice is to do tabbed spaces in HTML / CSS for stuff like menus, opening times, contact detail etc.

If I "paste special" in dreamweaver it kind of works, although not accross browsers and it is just adding loads of &nbsp tags for every space... Not a good method I am sure.

How would you line this up for example so it was tabbed:


Email: enquiries@ecofrost-uk.com

Phone: 01274 649720

Mobile: 07531712315

Address: 4 Mendip Way
Bradford
West Yorkshire
BD12 0ED

Would you make 2 divs?

This is how it looks at the moment, the address is not lined up properly:

http://vicarscafebistro.co.uk/website/contact.html

This is the horrendously messy code I have at the moment

<div class="text"> 
<p><img src="Contact.jpg" alt="Contact us" width="139" height="37" /></p> 
<p>&nbsp;</p> 
<p>Email:&nbsp;&nbsp;&nbsp;          <a href="mailto:enquiries@ecofrost-uk.com">enquiries@ecofrost-uk.com</a></p> 
<p>&nbsp;</p> 
<p>Phone:&nbsp;         01274 649720</p> 
<p>&nbsp;</p> 
<p>Mobile:&nbsp;         07531712315</p> 
<p>&nbsp;</p> 
 
<p>Address:&nbsp;      4  Mendip Way<br /> 
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Bradford<br /> 
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  West Yorkshire<br /> 
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  BD12 0ED</p> 
<!-- end .text --></div>

Thanks in advance

[tracknut]

To me, it fits within the definition of "tabular data" and I would put it in a table.

Dave

[mzpresto]

Cool yeah I can do that, I was just trying to avoid tables at all costs, and wondered if there was a CSS way, but I guess for some stuff you just need tables

What are the DT and DD tabs? I heard something about them once?

Thanks

[tracknut]

Originally Posted by mzpresto

Cool yeah I can do that, I was just trying to avoid tables at all costs, and wondered if there was a CSS way, but I guess for some stuff you just need tables

Not the right move, IMO. Tables are a fundamental part of html, not something to be avoided at all costs. They should be used when you are displaying tabular data, and they should be styled with css.

What are the DT and DD tabs? I heard something about them once?

Thanks

Definitions lists - you could get the layout you want with a definition list, but semantically I don't think you've got a list of "definitions" here.

Dave

[mzpresto]

Thanks tracknut, I thought I was failing by using tables and going for the easy way out lol!

I'll add them to a table, it makes sense

[alliv105]

Really depends on the exact "look" or "format" you need. If you want the second column to be aligned in every row (starting from the same horizontal position), using the table is the easiest way. But since using tables in html are generally frowned upon, you can use div's with with width's that you need. That's probably the best way, and you won't have to worry about tabbed spaces since you can set the paddings.