Sort Data

[secretply]

This programming is not a big need for me but it would be convenient for my users. Due to my data being somewhat personal, I will not show the code containing the data but show something similar with some other data (names used are fake). Here's what I have:

<span class="nameheader">Name</span><span class="hoursaccumulatedheader">Hours Accumulated</span><span class="graduationyearheader">Graduation Year</span><span class="contactinformationheader">Contact Information</span>

The above code generates as my "headers" (centered aligned) and would like to be sorted by alphabetical/numerical order when clicked.

.nameheader {background-color: #FFBA00; border-top: 1px #0000FF solid; border-right: 1px #0000FF solid; border-bottom: 1px #0000FF solid; border-left: 1px #0000FF solid; float: left; width: 24.5%; text-align: center; color: #0000FF; font-size: 14px; font-family: Arial;}
.hoursaccumulatedheader {background-color: #FFBA00; border-top: 1px #0000FF solid; border-right: 1px #0000FF solid; border-bottom: 1px #0000FF solid; float: left; width: 24.5%; text-align: center; color: #0000FF; font-size: 14px; font-family: Arial;}
.graduationyearheader {background-color: #FFBA00; border-top: 1px #0000FF solid; border-right: 1px #0000FF solid; border-bottom: 1px #0000FF solid; float: left; width: 24.5%; text-align: center; color: #0000FF; font-size: 14px; font-family: Arial;}
.contactinformationheader {background-color: #FFBA00; border-top: 1px #0000FF solid; border-right: 1px #0000FF solid; border-bottom: 1px #0000FF solid; float: left; width: 24.5%; text-align: center; color: #0000FF; font-size: 14px; font-family: Arial;}

The above is CSS applied to the span tag.

<span class="namespecial">Lopez, Ken</span><span class="hoursaccumulatedspecial">120</span><span class="graduationyearspecial">2009</span><span class="contactinformationspecial">email@domain.com</span>

The above code generates as the data entries (alphabetic data left aligned, numeric data center aligned) with a background color of #FBEC5D to show special status in the data.

.namespecial {background-color: #FBEC5D; border-right: 1px #0000FF solid; border-bottom: 1px #0000FF solid; border-left: 1px #0000FF solid; float: left; width: 24.5%; text-align: left; color: #0000FF; font-size: 13px; font-family: Arial;}
.hoursaccumulatedspecial {background-color: #FBEC5D; border-right: 1px #0000FF solid; border-bottom: 1px #0000FF solid; float: left; width: 24.5%; text-align: center; color: #0000FF; font-size: 13px; font-family: Arial;}
.graduationyearspecial {background-color: #FBEC5D; border-right: 1px #0000FF solid; border-bottom: 1px #0000FF solid; float: left; width: 24.5%; text-align: center; color: #0000FF; font-size: 13px; font-family: Arial;}
.contactinformationspecial {background-color: #FBEC5D; border-right: 1px #0000FF solid; border-bottom: 1px #0000FF solid; float: left; width: 24.5%; text-align: left; color: #0000FF; font-size: 13px; font-family: Arial;}

The above is CSS applied to the span tag.

<span class="nameregular">White, Jennifer</span><span class="hoursaccumulatedregular">950</span><span class="graduationyearregular">2007</span><span class="contactinformationregular">mail@url.net</span>

The above code generates as the data entries (alphabetic data left aligned, numeric data center aligned) with a background color of #FFFFFF to show regular member status in the data.

.nameregular {background-color: #FFFFFF; border-right: 1px #0000FF solid; border-bottom: 1px #0000FF solid; border-left: 1px #0000FF solid; float: left; width: 24.5%; text-align: left; color: #0000FF; font-size: 13px; font-family: Arial;}
.hoursaccumulatedregular {background-color: #FFFFFF; border-right: 1px #0000FF solid; border-bottom: 1px #0000FF solid; float: left; width: 24.5%; text-align: center; color: #0000FF; font-size: 13px; font-family: Arial;}
.graduationyearregular {background-color: #FFFFFF; border-right: 1px #0000FF solid; border-bottom: 1px #0000FF solid; float: left; width: 24.5%; text-align: center; color: #0000FF; font-size: 13px; font-family: Arial;}
.contactinformationregular {background-color: #FFFFFF; border-right: 1px #0000FF solid; border-bottom: 1px #0000FF solid; float: left; width: 24.5%; text-align: left; color: #0000FF; font-size: 13px; font-family: Arial;}

The above is CSS applied to the span tag.

Table tags might be easier but it messed up the layout of the page if I do it that way. I tried using Google but it shows a whole bunch of code and gives no explanation of what that specific code executes. Thank you very much for any help given.

[misson]

A table is most appropriate as the data is tabular in nature. Structure before layout. The CSS is immaterial for this problem.

To sort the data, you'll need to do it server side when the page is generated or client side using JS.

How is the page generated? Is all the data shown on one page, or is it broken up across many pages (like result pages in Google, Amazon, &c.)? Depending on the answers to these questions, the requirements may not be defined well enough.

[secretply]

Issue Resolved. I was able to find something on Google.