Beispiel: Tabellensortierer

Im SI definierte Dezimalpräfixe
Vorsilbe Kurzzeichen Zehnerpotenz
(10 hoch)
Wert Zahl
Yotta Y 24 Quadrillion 1 000 000 000 000 000 000 000 000
Zetta Z 21 Trilliarde 1 000 000 000 000 000 000 000
Exa E 18 Trillion 1 000 000 000 000 000 000
Peta P 15 Billiarde 1 000 000 000 000 000
Terra T 12 Billion 1 000 000 000 000
Giga G 9 Miliarde 1 000 000 000
Mega M 6 Million 1 000 000
Kilo k 3 Tausend 1 000
Hekto* h 2 Hundert 100
Deka* da 1 Zehn 10
- - 0 Eins 1
Dezi* d -1 Zehntel 0,1
Zenti* c -2 Hundertstel 0,01
Milli m -3 Tausendstel 0,001
Mikro μ -6 Millionstel 0,000 001
Nano n -9 Milliardstel 0,000 000 001
Piko p -12 Billionstel 0,000 000 000 001
Femto f -15 Billiardstel 0,000 000 000 000 001
Atto a -18 Trillionstel 0,000 000 000 000 000 001
Zepto z -21 Trilliardstel 0,000 000 000 000 000 000 001
Yokto y -24 Quadrillionstel 0,000 000 000 000 000 000 000 001
* Die zu Hekto(h), Deka(da), Dezi(d) und Zenti(c) gehörigen Vielfache sind keine Potenzen von 1000
Quelle

Generierter Code

CSS

			
<style>
.sortbutton { 
	width:100%; 
	height:100%; 
	border: none; 
	background-color: transparent; 
	font: inherit; 
	color: inherit; 
	text-align: inherit; 
	padding: 0; 
	cursor: pointer; 
} 
.sortierbar thead th span.visually-hidden { 
	position: absolute !important; 
	clip: rect(1px, 1px, 1px, 1px) !important; 
	padding: 0 !important; 
	border: 0 !important; 
	height: 1px !important; 
	width: 1px !important; 
	overflow: hidden !important; 
	white-space: nowrap !important; 
} 
.sortierbar caption span{ 
	font-weight: normal; 
	font-size: .8em; 
}
.sortbutton::after { 
	display: inline-block; 
	letter-spacing: -.2em; 
	margin-left:.1em; 
	width: 1.8em;
}
.sortbutton.sortedasc::after { 
	content: "▲▽";
} 
.sortbutton.sorteddesc::after { 
	content: "△▼";
} 
.sortbutton.unsorted::after { 
	content: "△▽";
} 
.sortbutton.sortedasc > span.visually-hidden:first-of-type { 
	display: none;
} 
.sortbutton.sorteddesc > span.visually-hidden:last-of-type { 
	display: none;
} 
.sortbutton.unsorted > span.visually-hidden:last-of-type { 
	display: none;
} 
</style>
			

HTML

			
<thead>
	<tr>
		<th abbr="">
			<span class="visually-hidden">Vorsilbe</span>
			<button type="button" class="sortbutton unsorted">
				<span class="visually-hidden">Sortiere aufsteigend nach </span>
				<span class="visually-hidden">Sortiere absteigend nach </span>
				Vorsilbe
			</button>
		</th>
		...
		<th abbr="Tabelle ist aufsteigend nach dieser Spalte sortiert">
			<span class="visually-hidden">Wert</span>
			<button type="button" class="sortbutton sortedasc">
				<span class="visually-hidden">Sortiere aufsteigend nach </span>
				<span class="visually-hidden">Sortiere absteigend nach </span>
				Wert
			</button>
		</th>
		...
	</tr>
</thead>