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:
The above code generates as my "headers" (centered aligned) and would like to be sorted by alphabetical/numerical order when clicked.
The above is CSS applied to the span tag.
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.
The above is CSS applied to the span tag.
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.
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.
Code:
<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.
Code:
.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.
Code:
<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.
Code:
.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.
Code:
<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.
Code:
.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.
Last edited: