#framework BAT

List of Colors with custom Pager Style #2

This page uses a Hashtag List to show all standardized color names supported by web browsers. Each page show 7 colors; pagers are added automatically. The Table is styled using Bootstrap 3 default theme classes.

Name	Hex	Red	Green	Blue
Red	#FF0000	255	0	0
OrangeRed	#FF4500	255	69	0
Tomato	#FF6347	255	99	71
Coral	#FF7F50	255	127	80
DarkOrange	#FF8C00	255	140	0
Orange	#FFA500	255	165	0
Yellow	#FFFF00	255	255	0

Processed this Hashtag Markup:

<# start list for colors;
	show 7 rows per page;
#>

<# start header #>
<table class="table table-striped table-hover">
	<thead>
	<tr>
		<th>Color</th>
		<th>Name</th>
		<th>Hex</th>
		<th class="text-right">Red</th>
		<th class="text-right">Green</th>
		<th class="text-right">Blue</th>
	</tr>
	</thead>
<# end header #>

<# start row #>
	<tr>
		<td style="background-color:<# hex #>">&nbsp;</td>
		<td><# name #></td>
		<td class="monospace"><# hex #></td>
		<td class="text-right"><# r #></td>
		<td class="text-right"><# g #></td>
		<td class="text-right"><# b #></td>
	</tr>
<# end row #>

<# start footer #>
</table>
<# end footer #>

<# end list #>

<style>
	.hashtag-pager a:link,	
	.hashtag-pager a:visited { 
		color: #0063E3;
		display: block; 
		float: left;
		padding: 3px 6px;
		text-decoration: none;
	}
	.hashtag-pager a:hover { border:solid 1px #666666; }
	.hashtag-pager .hashtag-pager-previous-off,
	.hashtag-pager .hashtag-pager-next-off { border:hidden 1px; padding:3px 6px; }
	.hashtag-pager .hashtag-pager-next a,
	.hashtag-pager .hashtag-pager-previous a { border:hidden 1px;  padding:3px 6px; }
	.hashtag-pager .hashtag-pager-next a:link, 
	.hashtag-pager .hashtag-pager-previous a:link, 
	.hashtag-pager .hashtag-pager-next a:visited, 
	.hashtag-pager .hashtag-pager-previous a:visited { border:hidden 1px; padding:3px 6px; }
	.hashtag-pager .hashtag-pager-next a:hover, 
	.hashtag-pager .hashtag-pager-previous a:hover { border:hidden 1px; }
	.hashtag-pager .hashtag-pager-active { background:transparent; color:#FF0084; padding:4px 7px; }
</style>

Alternate Method - List of Colors without pagers

The Hashtag Markup Language provides List Templates to process a series of Records.

The examples in this section cover the various List Directives, and demonstrate the capabilities of Hashtag Markup in List Templates.