Using Div instead of table

[michaelm]

Hey all,
I thought I would use you as a resource because I am having trouble figuring out how to even look this up elsewhere.
I want to create some css to display a list of dates to the beginning of our topics... but I want to bring some uniformity to it.
I can do what I want using a 3x2 (rows x columns) but divs are more flexible, and tables aren't best practice.
See the two examples below. How do I recreate my preferred using divs and CSS so it is easily replicated in future topics? It may seem basic, I know it has something to do with floats and clear and all that, but I could use some tips.

This is what we currently do:
Reviewed 9/1/2014
Updated 8/18/2014
Retired 11/1/2014

What I want (more easily read, separated better, dates in a consistent column, with 2 digit and 4 digit entries to create symmetry)
*******apparently I cannot create the spacing I want here either, imagine if you typed "reviewed" and pressed tab twice, moving the date over so they line up in a psuedo column, so all the dates would line up...
Reviewed 09/01/2014
Updated 08/18/2014
Retired 11/01/2014

Also, if anyone has a preference on one or the other, maybe the one I want isn't better?

[kwag_myers]

Have you considered adding more columns?

datesTable.png

I kept the separators visible so you can see how I set it up. I set the table width at 200px in the Table Properties, and column widths at 85px, 31px (repeat 2 columns), and blank in the TableStyle CSS. Also, I only used one table row and I added a class to the td style with a 1px letter-spacing:

Code: Select all

td.dates
{
	letter-spacing: 1px;
}

My suggestion is to get a table set up and copy it from the Text Editor to a NotePad file. Then just paste the code into the Text Editor and revise the dates as needed.

[michaelm]

I am trying to accomplish the alignment with CSS without a table.
I am told a table is not best practice.

[SteveS]

I don't know if you can achieve what you are trying to do easily. Browsers are designed to ignore extra white space, which is why you can't use the tab key or extra spaces to align text.

One workaround is to use pre tags. Pre, or preformatted, tells the browser to render as you have designed, so you can use spaces to align text or numbers. This, however, is not best practice as changing font or even browser zoom can break the alignment.

You could try a floated element, but I don't think it is worth the hassle.

Although some people consider tables not best practice, they are (in my book) best practice for displaying information. Which is what you are trying to do. I think the best practice thing might have come about because we used to use tables with borders set to 0 to layout web pages...

[atomdocs]

Although some people consider tables not best practice, they are (in my book) best practice for displaying information.

I agree. In this case, Michael, I also think a table would be fine, and you can hide the borders so that it doesn't look like a table. The problem with tables is that they are not responsive, so as Steve says, a whole web page set up as tables won't respond nicely on different screen sizes or browser windows. But in this instance, the table will be narrow enough that it won't affect the ux on different screens. And for PDF, tables are fine because you already control the page size.

[michaelm]

That is what I was beginning to think. I appreciate the input!