Ranking - Corrida FX

In this example below you will see how to do a Ranking - Corrida FX with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 4rweb, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 4rweb ©
  • HTML
  • CSS
  • JavaScript
    <style>
  
  body{
  margin: 0px;
  }
  .style0
  	{mso-number-format:General;
  	text-align:general;
  	vertical-align:bottom;
  	white-space:nowrap;
  	mso-rotate:0;
  	mso-background-source:auto;
  	mso-pattern:auto;
  	color:black;
  	font-size:11.0pt;
  	font-weight:400;
  	font-style:normal;
  	text-decoration:none;
  	font-family:Calibri, sans-serif;
  	mso-font-charset:0;
  	border:none;
  	mso-protection:locked visible;
  	mso-style-name:Normal;
  	mso-style-id:0;}
  .style16
  	{mso-number-format:0%;
  	mso-style-name:Percent;
  	mso-style-id:5;}
  td
  	{mso-style-parent:style0;
  	padding-top:1px;
  	padding-right:1px;
  	padding-left:1px;
  	mso-ignore:padding;
  	color:black;
  	font-size:11.0pt;
  	font-weight:400;
  	font-style:normal;
  	text-decoration:none;
  	font-family:Calibri, sans-serif;
  	mso-font-charset:0;
  	mso-number-format:General;
  	text-align:general;
  	vertical-align:bottom;
  	border:none;
  	mso-background-source:auto;
  	mso-pattern:auto;
  	mso-protection:locked visible;
  	white-space:nowrap;
  	mso-rotate:0;}
  .xl65
  	{mso-style-parent:style0;
  	background:white;
  	mso-pattern:black none;}
  .xl66
  	{mso-style-parent:style16;
  	mso-number-format:0%;
  	background:white;
  	mso-pattern:black none;}
  .xl67
  	{mso-style-parent:style0;
  	mso-number-format:0;
  	background:white;
  	mso-pattern:black none;}
  .xl68
  	{mso-style-parent:style0;
  	color:white;
  	text-align:center;
  	background:#222B35;
  	mso-pattern:black none;}
  .xl69
  	{mso-style-parent:style0;
  	text-align:center;
  	background:white;
  	mso-pattern:black none;}
  .xl70
  	{mso-style-parent:style0;
  	text-align:right;
  	background:white;
  	mso-pattern:black none;}
</style>

<table border=0 cellpadding=0 cellspacing=0>
  <col width=65 style='width:65pt'>
    <col width=100 style='mso-width-source:userset;mso-width-alt:4266;width:100pt'>
      <col width=65 span=3 style='width:65pt'>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl68 width=65 style='height:14.0pt;width:65pt'>Rnk</td>
          <td class=xl68 width=100 style='width:100pt'>GR</td>
          <td class=xl68 width=65 style='width:65pt'>Maqs<br>Vendidas</td>
          <td class=xl68 width=65 style='width:65pt'>Meta<br>1100</td>
          <td class=xl68 width=65 style='width:65pt'>%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>1º</td>
          <td class=xl65>NORTE</td>
          <td class=xl67 align=right>117</td>
          <td class=xl67 align=right>176</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#63BE7B;mso-pattern:black none'>70%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>2º</td>
          <td class=xl65>SUL</td>
          <td class=xl67 align=right>100</td>
          <td class=xl67 align=right>160</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#67BF7C;mso-pattern:black none'>69%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>3º</td>
          <td class=xl65>SP CAPITAL</td>
          <td class=xl67 align=right>92</td>
          <td class=xl67 align=right>154</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#C2DA81;mso-pattern:black none'>61%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>4º</td>
          <td class=xl65>NORDESTE</td>
          <td class=xl67 align=right>104</td>
          <td class=xl67 align=right>218</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#FCBF7B;mso-pattern:black none'>50%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>5º</td>
          <td class=xl65>CENTRO LESTE</td>
          <td class=xl67 align=right>87</td>
          <td class=xl67 align=right>238</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#F8696B;mso-pattern:black none'>39%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>6º</td>
          <td class=xl65>SP INTERIOR</td>
          <td class=xl67 align=right>55</td>
          <td class=xl67 align=right>154</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#F8696B;mso-pattern:black none'>39%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl65 style='height:14.0pt'>&nbsp;</td>
          <td class=xl65>&nbsp;</td>
          <td class=xl65>&nbsp;</td>
          <td class=xl65>&nbsp;</td>
          <td class=xl65>&nbsp;</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl68 style='height:14.0pt'>Rnk</td>
          <td class=xl68>RPN</td>
          <td class=xl68>Maqs<br>Vendidas</td>
          <td class=xl68>Meta<br>1100</td>
          <td class=xl68>%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>1º</td>
          <td class=xl65>ROSEMARY REIS</td>
          <td class=xl70>72</td>
          <td class=xl67 align=right>53</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#63BE7B;mso-pattern:black none'>137%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>2º</td>
          <td class=xl65>MARCOS MAIURI</td>
          <td class=xl70>51</td>
          <td class=xl67 align=right>53</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#91CC7E;mso-pattern:black none'>110%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>3º</td>
          <td class=xl65>GIOVANNA MULLER</td>
          <td class=xl70>56</td>
          <td class=xl67 align=right>57</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#A2D17F;mso-pattern:black none'>100%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>4º</td>
          <td class=xl65>KATIA MANDARANO</td>
          <td class=xl70>46</td>
          <td class=xl67 align=right>48</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#A4D17F;mso-pattern:black none'>99%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>5º</td>
          <td class=xl65>PATRICIA NOBREGA</td>
          <td class=xl70>56</td>
          <td class=xl67 align=right>57</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#A5D27F;mso-pattern:black none'>98%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>6º</td>
          <td class=xl65>TIAGO SILVA</td>
          <td class=xl70>36</td>
          <td class=xl67 align=right>51</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#C7DB81;mso-pattern:black none'>78%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>7º</td>
          <td class=xl65>GUSTAVO GIANDOSO</td>
          <td class=xl70>27</td>
          <td class=xl67 align=right>48</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#DDE283;mso-pattern:black none'>64%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>8º</td>
          <td class=xl65>RENATA LIMA</td>
          <td class=xl70>33</td>
          <td class=xl67 align=right>66</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#E8E583;mso-pattern:black none'>58%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>9º</td>
          <td class=xl65>RODRIGO SASSI</td>
          <td class=xl70>25</td>
          <td class=xl67 align=right>53</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#F7E984;mso-pattern:black none'>49%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>10º</td>
          <td class=xl65>RICARDO BARROS</td>
          <td class=xl70>22</td>
          <td class=xl67 align=right>52</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#FDEB84;mso-pattern:black none'>45%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>11º</td>
          <td class=xl65>KARINA RODRIGUES</td>
          <td class=xl70>24</td>
          <td class=xl67 align=right>53</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#FEE583;mso-pattern:black none'>42%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>12º</td>
          <td class=xl65>TANIA GOMES</td>
          <td class=xl70>20</td>
          <td class=xl67 align=right>57</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#FEE482;mso-pattern:black none'>42%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>13º</td>
          <td class=xl65>IVOMARA SARTÓRIO</td>
          <td class=xl70>19</td>
          <td class=xl67 align=right>55</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#FDCB7D;mso-pattern:black none'>35%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>14º</td>
          <td class=xl65>RENATA MATTOS</td>
          <td class=xl70>14</td>
          <td class=xl67 align=right>57</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#FCB77A;mso-pattern:black none'>29%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>15º</td>
          <td class=xl65>BEATRIZ MESQUITA</td>
          <td class=xl70>12</td>
          <td class=xl67 align=right>57</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#FBA676;mso-pattern:black none'>24%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>16º</td>
          <td class=xl65>MARCO ROSA</td>
          <td class=xl70>13</td>
          <td class=xl67 align=right>57</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#FBA476;mso-pattern:black none'>23%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>17º</td>
          <td class=xl65>RITA SILVA</td>
          <td class=xl70>9</td>
          <td class=xl67 align=right>48</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#FA9A74;mso-pattern:black none'>20%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>18º</td>
          <td class=xl65>KENNY RIBEIRO</td>
          <td class=xl70>12</td>
          <td class=xl67 align=right>57</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#FA9974;mso-pattern:black none'>20%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>19º</td>
          <td class=xl65>MARCO JÚNIOR</td>
          <td class=xl70>5</td>
          <td class=xl67 align=right>66</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#F8746D;mso-pattern:black none'>9%</td>
        </tr>
        <tr height=14 style='height:14.0pt'>
          <td height=14 class=xl69 style='height:14.0pt'>20º</td>
          <td class=xl65>SANDRA OLIVEIRA</td>
          <td class=xl70>3</td>
          <td class=xl67 align=right>53</td>
          <td class=xl66 align=right style='font-size:11.0pt;color:black;font-weight:
  400;text-decoration:none;text-underline-style:none;text-line-through:none;
  font-family:Calibri;background:#F8696B;mso-pattern:black none'>6%</td>
        </tr>
</table>

/*Downloaded from https://www.codeseek.co/4rweb/ranking-corrida-fx-EVMvyN */
    


/*Downloaded from https://www.codeseek.co/4rweb/ranking-corrida-fx-EVMvyN */
    

Comments