Make a nice table with HTML Definition Lists (<dl>)

This page shows an example of how i am using HTML Definition Lists to present nice formatted resultspages:

Voorbeeld van het gebruik van de HTML-tag Definition List (<dl>) met opmaak:

Export geslaagd
Ja
Aantal gevonden
25
Aantal geexporteerd
23
Aantal niet-geexporteerd
2
Update tabel gelukt
Ja




De stylesheet

dl.result-summary
{
	position: relative;
	clear: both;
	width: 500px;
	margin: 0;
	padding: 0;
}
dl.result-summary dt, 
dl.result-summary dd
{
	background-color: #c6def0;
	position: relative;
	float: left;
	padding: 0 5px;
	margin: 0;
	height: 22px;
	line-height: 22px;
}
dl.result-summary dt.alt, dl.result-summary dd.alt
{
	background-color: #fff;
}
dl.result-summary dt
{
	font-weight: bold;
	width: 190px;
	text-align: right;
}
dl.result-summary dd
{
	margin-left: 1px;
	width: 289px;
	text-align: left;
}

De HTML

<dl class="result-summary">
    <dt>Export geslaagd</dt>
    <dd>Ja</dd>
 
    <dt class="alt">Aantal gevonden</dt>
    <dd class="alt">25</dd>
 
    <dt>Aantal geexporteerd</dt>
    <dd>23</dd>
 
    <dt class="alt">Aantal niet-geexporteerd</dt>
    <dd class="alt">2</dd>
 
    <dt>Update tabel gelukt</dt>
    <dd>Ja</dd>
</dl>

comments

No comments yet.

Sorry, the comment form is closed at this time.

Laatste notities

Categoriën