ol ul li / Historie mit Jahreszahlen als HTML Liste

Hallo zusammen!

Folgendes Problem:
In einem aktuellen Projekt soll es eine Seite names Historie geben. Auf dieser Seite möchte das Unternehmen in einer Kurzübersicht die eigene Historie darstellen.

Das ganz soll so aussehen:

1938 IrgendeinEreignis
1948 IrgendeinEreignis
1963 IrgendeinEreignis
1971 IrgendeinEreignis
1988 IrgendeinEreignis

Bei den zu verwendenden HTML Elementen habe ich natürlich sofort an eine "geordnete oder ungeordnete Liste" gedacht und folgendes Markup fabriziert:

[list=1]
	<li value="1938">IrgendeinEreignis
	<li value="1948">IrgendeinEreignis
	<li value="1963">IrgendeinEreignis
	<li value="1971">IrgendeinEreignis
	<li value="1988">IrgendeinEreignis
[/list]

Die Stylesheet dazu sehen wie folgt aus:

#history {				
	display: block;
	margin: 1.4em 0 .8em 4em;
}

	#history li {
		list-style: decimal outside;
		margin: 0 0 .8em 0;
	}

Soweit so gut!
Ein großes Problem gibt es jetzt jedoch.
Wie bei einer OL so üblich, steht hinter jeder Zahl ein "." (Punkt). Der darf bei einer Jahresaufzählung aber nicht sein. Was also tun?

Eine UL basteln und die Jahreszahlen direkt ins Listenelement mit hineinschreiben?
Geht nicht, weil bei längerem Text dann die zweite Zeile direkt unter der Zahl anfängt (so wie bei "list-style: inside;").

Hat jemand ne Idee, wie soetwas semantisch korrekt umzusetzen ist?
Per Definitionsliste vielleicht? Wenn ja, wie? Das "Floating" und "Clearing" funktioniert bei DT- und DD-Elementen leider nicht so, wie man das von normalen Blockelementen kennt.

Hoffe auf rege Beteiligung und zündende Ideen.

Gruß
Heiko

Zitat von sejuma

Ich bin bekennender CSS-Fan. Aber was spricht für diese strukturierte Darstellung gegen eine Tabelle?

Ansonsten fällt mir noch die Definitionsliste ein, wenn das Ereignis nicht zwingend in der gleichen Zeile wie die Jahreszahl sein muss:

Code

<dl>
  <dt>1938 </dt>
  <dd>Irgendein Ereignis Irgendein Irgendein Ereignis Irgendein EreignisIrgendein Ereignis Irgendein EreignisEreignis Irgendein Ereignis Irgendein EreignisIrgendein Ereignis Irgendein Ereignis</dd>
  <dt>1948</dt>
  <dd>ein anderes Ereignis</dd>
</dl>

Moinsen!

Über eine Tabelle hab ich auch schon nachgedacht, aber wenn man sonst nur "tabellenlos" denkt, mag man diese Dinger schon gar nicht mehr benutzen.
Du als >>CSS Fan<< mit einer tabellenlosen Seite kennst das sicher.

Also dann in etwa so?

<table>
	<colgroup>
    	<col width="10%">
    	<col width="90%">
  	</colgroup>
	<tr>
		<th>Jahreszahl</th>
		<td>Ereignis</td>
	</tr>

	<tr>	
		<th>Jahreszahl</th>
		<td>Ereignis</td>
	</tr>

	<tr>	
		<th>Jahreszahl</th>
		<td>Ereignis</td>
	</tr>
</table>

Bei der Verwendung von Tabellen gibt es jedoch das Problem, dass man den "table rows" keinen Margin geben kann. Das hieße also, dass die Reihen direkt aneinander kleben. Cellspacing oder Cellpadding hingegen wirken sich auf alle Tabellenfelder aus.

Einzige möglichkeit wäre den ths und tds ein Padding zu geben. Dies meiner Meinung nach aber eine nicht so elegante Methode.

Mit einer Definitionsliste hab ich auch schon rumgespielt. Das sah folgendermaßen aus:

Markup:

<dl>
	<dt>1938</dt>
	<dd>IrgendeinEreigniss</dd>

	<dt>1948</dt>
	<dd>IrgendeinEreigniss</dd>

	<dt>1963</dt>
	<dd>IrgendeinEreigniss</dd>

	<dt>1971</dt>
	<dd>IrgendeinEreigniss</dd>
</dl>

Stylesheets in etwa so:

dt {
	float: left;
	clear: left;
	width: 10%;
	text-align: right;
}

	dd {
		float: left;
		margin: 0 0 0 .8em;
		width: 80%;
	}

Bringt jedoch eider nicht den gewünschten Erfolg.
Hab auch schon "dd { clear: right; }" probiert und funzt auch nicht.
Der nachfolgende Definitionslisten-Term fließt immer hinter die Definition und ignoriert "dt { clear: left; }" oder "dd { clear: right; }" völlig!

Ein

DT DD

DT DD

DT DD

scheint also auch nicht machbar.