Beispiel: Tabellensortierer

Zahlen mit Dezimalkomma

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
Tera 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 svg { 
	margin-left: .2em; height: .7em; 
} 
.sortbutton.sortedasc svg path:last-of-type { 
	fill: currentColor !important; 
} 
.sortbutton.sorteddesc svg path:first-of-type { 
	fill: currentColor!important; 
}
.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="" scope="col" role="columnheader" aria-sort="none">
		<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
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 100">
				<path d="M0 0 L50 100 L100 0 Z" style="stroke:currentColor;fill:transparent;stroke-width:10;"></path>
				<path d="M80 100 L180 100 L130 0 Z" style="stroke:currentColor;fill:transparent;stroke-width:10;"></path>
			</svg>
		</button>
	</th>
	...					
	<th abbr="Tabelle ist aufsteigend nach dieser Spalte sortiert" scope="col" role="columnheader" aria-sort="ascending">
		<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
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 100">
				<path d="M0 0 L50 100 L100 0 Z" style="stroke:currentColor;fill:transparent;stroke-width:10;"></path>
				<path d="M80 100 L180 100 L130 0 Z" style="stroke:currentColor;fill:transparent;stroke-width:10;"></path>
			</svg>
		</button>
	</th>
	...
	</tr>
</thead>