tabela site semadec

In this example below you will see how to do a tabela site semadec with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ericadn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ericadn ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>tabela site semadec</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>SEMADEC 2017</title>
        <link rel="stylesheet" href="style2.css">
        <meta name="viewport" content="width=device-width">
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="shortcut icon" href="icon.png" type="image/x-icon" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <header>
      <ul class="topnav">
      <li><a class="active" href="index.html">INÍCIO</a></li>
      <li><a href="agenda.html">Agenda</a></li>
      <li><a href="index.html#classificacao">Classificação</a></li>
      <li><a href="comunicados.html">Comunicados</a></li>
      <li class="right"><a href="http://eventos.ifrn.edu.br/semadeczn/admin/index.php/site/cadastro" target="_blank"><strong>INSCREVA-SE</strong></a></li>
    </ul>
    <a role="button" href="#container"><span class="seta glyphicon-chevron-down"></span></a>
    </header>
    <div class="container" id="container">
      <h2>Acompanhe os jogos</h2>
      <ul class="nav nav-tabs" role="tablist  ">
        <li role="presetation" class="active"><a aria-controls="30/07" data-toggle="tab" href="#menu1">31/07</a></li>
        <li role="presetation"><a aria-controls="30/07" data-toggle="tab" href="#menu2">01/07</a></li>
        <li role="presetation"><a aria-controls="30/07" data-toggle="tab" href="#menu3">02/07</a></li>
        <li role="presetation"><a aria-controls="30/07" data-toggle="tab" href="#menu4">03/07</a></li>
        <li role="presetation"><a aria-controls="30/07" data-toggle="tab" href="#menu5">04/07</a></li>
      </ul>

    <div class="tab-content">
    
    
    <div role="tabpanel" class="row tab-pane active" id="menu1">
      <table class="table table-striped table-data">
        
        <tr class="header">
          <th>Data</th>
          <th>Prova</th>
          <th>Resultado / Jogo</th>
          <th>Local</th>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEG</span> / 08:00</td>
          <td class="category"><strong>FUTEBOL SOCIETY</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span>Informática</span><i class="icon info"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">CAMPO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEG</span> / 08:00</td>
          <td class="category"><strong>VÔLEI DE PRAIA</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">AREIA</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEG</span> / 08:30</td>
          <td class="category"><strong>VÔLEI DE PRAIA</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span class="eletro-pad">Eletrônica</span><i class="icon eletro"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon comercio"></i><span>Comércio</span></span></div>
          </td>
          <td class="locale">AREIA</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEG</span> / 08:35</td>
          <td class="category"><strong>FUTEBOL SOCIETY</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon servidores"></i><span class="serv-pad">Servidores</span></span></div>
          </td>
          <td class="locale">CAMPO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEG</span> / 09:00</td>
          <td class="category"><strong>VÔLEI DE PRAIA</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span>Informática</span><i class="icon info"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">AREIA</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEG</span> / 09:30</td>
          <td class="category"><strong>VÔLEI DE PRAIA</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon servidores"></i><span class="serv-pad">Servidores</span></span></div>
          </td>
          <td class="locale">AREIA</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEG</span> / 10:00</td>
          <td class="category"><strong>FUTVÔLEI</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">AREIA</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEG</span> / 10:30</td>
          <td class="category"><strong>FUTVÔLEI</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="eletro-pad">Eletrônica</span><i class="icon eletro"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon comercio"></i><span class="comercio-pad">Comércio</span></span></div>
          </td>
          <td class="locale">AREIA</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEG</span> / 15:00</td>
          <td class="category"><strong>VÔLEI DE PRAIA</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">AREIA</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEG</span> / 15:30</td>
          <td class="category"><strong>VÔLEI DE PRAIA</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="serv-pad">Servidores</span><i class="icon servidores"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">AREIA</td>
        </tr>
        
      </table>
    </div>
    
    
    <div role="tabpanel" class="row tab-pane fade" id="menu2">
      <table class="table table-striped table-data">
        <tr class="header">
          <th>Date</th>
          <th>Prova</th>
          <th>Resultado / Jogo</th>
          <th>Local</th>
        </tr>
        
        <tr>
          <td class="data-time"><span>TER</span> / 08:00</td>
          <td class="category"><strong>FUTEBOL SOCIETY</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">CAMPO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>TER</span> / 08:00</td>
          <td class="category"><strong>VÔLEI</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>TER</span> / 08:35</td>
          <td class="category"><strong>FUTEBOL SOCIETY</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="serv-pad">Servidores</span><i class="icon servidores"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">CAMPO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>TER</span> / 08:50</td>
          <td class="category"><strong>VÔLEI</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span>Informática</span><i class="icon info"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>TER</span> / 09:40</td>
          <td class="category"><strong>VÔLEI</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon servidores"></i><span class="serv-pad">Servidores</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        
        <tr>
          <td class="data-time"><span>TER</span> / 10:30</td>
          <td class="category"><strong>HANDEBOL</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        
        <tr>
          <td class="data-time"><span>TER</span> / 11:00</td>
          <td class="category"><strong>HANDEBOL</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        
        <tr>
          <td class="data-time"><span>TER</span> / 11:30</td>
          <td class="category"><strong>HANDEBOL</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span class="eletro-pad">Eletrônica</span><i class="icon eletro"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon comercio"></i><span class="comercio-pad">Comércio</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        
        <tr>
          <td class="data-time"><span>TER</span> / 13:00</td>
          <td class="category"><strong>BASQUETE</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span>Informática</span><i class="icon info"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>TER</span> / 13:30</td>
          <td class="category"><strong>BASQUETE</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon servidores"></i><span class="serv-pad">Servidores</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>TER</span> / 14:00</td>
          <td class="category"><strong>FUTSAL</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span>Informática</span><i class="icon info"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        
        <tr>
          <td class="data-time"><span>TER</span> / 14:35</td>
          <td class="category"><strong>FUTSAL</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon servidores"></i><span class="serv-pad">Servidores</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
      </table>
    </div>
        
        
    <div role="tabpanel" class="row tab-pane fade" id="menu3">
      <table class="table table-striped table-data">
        <tr class="header">
          <th>Date</th>
          <th>Prova</th>
          <th>Resultado / Jogo</th>
          <th>Local</th>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 08:00</td>
          <td class="category"><strong>FUTEBOL SOCIETY</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span>Informática</span><i class="icon info"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">CAMPO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 08:00</td>
          <td class="category"><strong>VÔLEI</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span class="eletro-pad">Eletrônica</span><i class="icon eletro"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon comercio"></i><span class="comercio-pad">Comércio</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 08:35</td>
          <td class="category"><strong>FUTEBOL SOCIETY</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">CAMPO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 08:50</td>
          <td class="category"><strong>VÔLEI</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 09:40</td>
          <td class="category"><strong>VÔLEI</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="serv-pad">Servidores</span><i class="icon servidores"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 10:30</td>
          <td class="category"><strong>HANDEBOL</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="eletro-pad">Eletrônica</span><i class="icon eletro"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon comercio"></i><span class="comercio-pad">Comércio</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 11:00</td>
          <td class="category"><strong>HANDEBOL</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span>Informática</span><i class="icon info"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 11:30</td>
          <td class="category"><strong>HANDEBOL</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span>Informática</span><i class="icon info"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 13:00</td>
          <td class="category"><strong>BASQUETE</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 13:30</td>
          <td class="category"><strong>BASQUETE</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="serv-pad">Servidores</span><i class="icon servidores"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 14:00</td>
          <td class="category"><strong>BASQUETE</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="serv-pad">Servidores</span><i class="icon servidores"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 14:30</td>
          <td class="category"><strong>BASQUETE</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 15:00</td>
          <td class="category"><strong>VÔLEI DE PRAIA</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="serv-pad">Servidores</span><i class="icon servidores"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">AREIA</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 15:30</td>
          <td class="category"><strong>VÔLEI DE PRAIA</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">AREIA</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 16:00</td>
          <td class="category"><strong>VÔLEI DE PRAIA</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span>Informática</span><i class="icon info"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">AREIA</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUA</span> / 16:30</td>
          <td class="category"><strong>FUTVÔLEI</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span>Informática</span><i class="icon info"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
      </table>
    </div>
    
    
    <div role="tabpanel" class="row tab-pane fade" id="menu4">
      <table class="table table-striped table-data">
        <tr class="header">
          <th>Date</th>
          <th>Prova</th>
          <th>Resultado / Jogo</th>
          <th>Local</th>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 08:00</td>
          <td class="category"><strong>QUEIMADA</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span>Informática</span><i class="icon info"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 08:15</td>
          <td class="category"><strong>QUEIMADA</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon servidores"></i><span class="serv-pad">Servidores</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 08:30</td>
          <td class="category"><strong>QUEIMADA</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 08:45</td>
          <td class="category"><strong>QUEIMADA</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span>Informática</span><i class="icon info"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 09:00</td>
          <td class="category"><strong>QUEIMADA</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 09:15</td>
          <td class="category"><strong>QUEIMADA</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 09:30</td>
          <td class="category"><strong>VÔLEI</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span>Informática</span><i class="icon info"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 10:30</td>
          <td class="category"><strong>VÔLEI</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="serv-pad">Servidores</span><i class="icon servidores"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 11:10</td>
          <td class="category"><strong>VÔLEI</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 13:00</td>
          <td class="category"><strong>QUEIMADA</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 13:35</td>
          <td class="category"><strong>FUTSAL</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 14:35</td>
          <td class="category"><strong>FUTSAL</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span class="eletro-pad">Eletrônica</span><i class="icon eletro"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon comercio"></i><span class="comercio-pad">Comércio</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        
        
        <tr>
          <td class="data-time"><span>QUI</span> / 14:00</td>
          <td class="category"><strong>QUEIMADA</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="serv-pad">Servidores</span><i class="icon servidores"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 15:00</td>
          <td class="category"><strong>QUEIMADA</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="serv-pad">Servidores</span><i class="icon servidores"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 15:35</td>
          <td class="category"><strong>FUTSAL</strong><span class="gen-fem">Feminino</span></td>
          <td class="scores">
             <div><span><span>Informática</span><i class="icon info"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon eletro"></i><span class="eletro-pad">Eletrônica</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>QUI</span> / 16:00</td>
          <td class="category"><strong>QUEIMADA</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span class="comercio-pad">Comércio</span><i class="icon comercio"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon info"></i><span>Informática</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
      </table>
    </div>
    
    <div role="tabpanel" class="row tab-pane fade" id="menu5">
      <table class="table table-striped table-data">
        <tr class="header">
          <th>Date</th>
          <th>Prova</th>
          <th>Resultado / Jogo</th>
          <th>Local</th>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEX</span> / 09:00</td>
          <td class="category"><strong>FUTEBOL SOCIETY</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span>1° Lugar</span><i class="icon finalista-1"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon finalista-2"></i><span>2° Lugar</span></span></div>
          </td>
          <td class="locale">CAMPO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEX</span> / 09:00</td>
          <td class="category"><strong>VÔLEI</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span>1° Lugar</span><i class="icon finalista-1"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon finalista-2"></i><span>2° Lugar</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEX</span> / 10:00</td>
          <td class="category"><strong>BASQUETE</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span>1° Lugar</span><i class="icon finalista-1"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon finalista-2"></i><span>2° Lugar</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEX</span> / 11:00</td>
          <td class="category"><strong>QUEIMADA</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span>1° Lugar</span><i class="icon finalista-1"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon finalista-2"></i><span>2° Lugar</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEX</span> / 13:30</td>
          <td class="category"><strong>FUTSAL</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span>1° Lugar</span><i class="icon finalista-1"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon finalista-2"></i><span>2° Lugar</span></span></div>
          </td>
          <td class="locale">GINÁSIO</td>
        </tr>
        
        <tr>
          <td class="data-time"><span>SEX</span> / 15:30</td>
          <td class="category"><strong>VÔLEI DE PRAIA</strong><span class="gen-masc">Masculino</span></td>
          <td class="scores">
             <div><span><span>1° Lugar</span><i class="icon finalista-1"></i></span><span class="score"></span></div>
             <div>X</div>
             <div><span class="score"></span><span><i class="icon finalista-2"></i><span>2° Lugar</span></span></div>
          </td>
          <td class="locale">AREIA</td>
        </tr>
        
      </table>
      </div>
    </div>

      <h2 id="classificacao">Classificação nos Esportes</h2>
      <table class="table-responsive table table-striped table-data">
      <tr class="header classif">
      	<th class="classif posit-res"><div class="posit-#">#</div><div class="posit"> Posição</div></th>
        <th class="classif">Equipe</th>
        <th class="medalha"><img src="gold.png"></th>
        <th class="medalha"><img src="second.png"></th>
        <th class="medalha"><img src="third.png"></th>
        <th class="classif">Pontuação</th>
      </tr>
      <tr class="tr1">
        <td class="posit-res"><strong>1º</strong></td>
        <td>COMÉRCIO</td>
        <td class="m-responsive">0</td>
        <td class="m-responsive">0</td>
        <td class="m-responsive">0</td>
        <td><div>0</div></td>
      </tr>
      <!-- -->
      <tr class="tr1">
        <td class="posit-res"><strong>1º</strong</td>
        <td>ELETRÔNICA</td>
        <td class="m-responsive">0</td>
        <td class="m-responsive">0</td>
        <td class="m-responsive">0</td>
        <td><div>0</div></td>
      </tr>
      <!-- -->
      <tr class="tr1">
        <td class="posit-res"><strong>1º</strong></td>
        <td>INFORMÁTICA</td>
        <td class="m-responsive">0</td>
        <td class="m-responsive">0</td>
        <td class="m-responsive">0</td>
        <td><div>0</div></td>
      </tr>
      <!-- -->
      <tr class="tr1">
        <td class="posit-res"><strong>1º</strong></td>
        <td>SERVIDORES</td>
        <td class="m-responsive">0</td>
        <td class="m-responsive">0</td>
        <td class="m-responsive">0</td>
        <td><div>0</div></td>
      </tr>
      <!-- -->
      </table>

        <div class="row container-sobre">
            <div class="col-md-7">
                <h3>Sobre</h3>
                <p>
                  A Semana de Arte, Cultura e Desporto – SEMADEC. Trata-se de um evento institucional desenvolvido em todos os campi do IFRN. O seu objetivo consiste em propiciar espaços para o desporto com disputas de modalidades esportivas coletivas e individuais e a expressão artística por meio dos festivais de dança, intérprete e teatro, além de workshops, oficinas, jogos digitais, dentre outras atividades. No evento, temos também uma faceta voltada para a questão social decorrente das doações recebidas das equipes na gincana cultural, e assim, ajudamos algumas instituições carentes todos os anos. Atualmente, temos a equipe do curso de Eletrônica como maior detentora de títulos, cinco campeonatos, seguidos de Informática e Comércio (última equipe campeã). Bem-vindo à VIII Semadec!​
                </p>
            </div>
            <div class="col-md-5">
              <h3>Regulamentos</h3>
              <a class="as" target="_blank" href="breve.html">Regulamento Geral</a><br>
              <a class="as" target="_blank" href="breve.html">Regulamento dos jogos</a><br>
              <h3></h3>
          	  <a href="breve.html"><h4><strong>Inscreva-se nas Oficinas e Workshops</strong></h4></a>
         	</div>
      	</div>
  	</div>
  <div class="counter">
    <div class="container">
      <h2 class="title">JOGOS SEMADEC 2017</h2>
      <div class="itens-counter">
        <div class="item-count">
          <span>EQUIPES</span>
          <span>4</span>
        </div>
        <div class="item-count">
          <span>PROVAS</span>
          <span>155</span>
        </div>
        <div class="item-count">
          <span>ATLETAS</span>
          <span>500</span>
        </div>
      </div>
    </div>
  </div>
</body>
<footer>
  <section class="container">
    <div class="row">
      <div class="col-sm-3">
        <h4>Semadec 2017</h4>
        <dl>
          <dd><a href="breve.html">Inscreva-se nas oficinas e Workshops</a></dd>
          <dd><a href="http://eventos.ifrn.edu.br/semadeczn/admin/index.php/site/cadastro" target="_blank">Inscreva-se nas modalidades</a></dd>
        </dl>
      </div>
      <div class="col-sm-3">
        <h4>Regras</h4>
        <dl>
          <dd><a target="_blank" href="breve.html">Regulamento Geral</a></dd>
          <dd><a target="_blank" href="breve.html">Regulamento do festival de dança</a></dd>
          <dd><a target="_blank" href="breve.html"></a></dd>
          <dd><a target="_blank" href="breve.html"></a></dd>
          <dd><a target="_blank" href="breve.html"></a></dd>
          <dd><a target="_blank" href="breve.html"></a></dd>
          <dd><a target="_blank" href="breve.html"></a></dd>
          <dd><a target="_blank" href="breve.html"></a></dd>
        </dl>
      </div>
      <div class="col-sm-3">
        <h4>Cultural</h4>
        <dl>
          <dd>Dança</dd>
          <dd>Fotografia</dd>
          <dd>Gincana Cultural</dd>
          <dd>Intérpretes</dd>
          <dd>Redação</dd>
          <dd>Teatro</dd>          
        </dl>
      </div>
    </div>
  </section>
  <div class="rights">
    <div class="container">
      SEMADEC - 2017. Comissão de Organização. Todos os direitos reservados.
    </div>
  </div>
</footer>
</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ericadn/tabela-site-semadec-KvwGqL */
@charset "UTF-8";
header {
  margin-top: 51px;
  height: 500px;
  background-image: URL("semadec.jpg");
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}
header ul.topnav {
  top: -1px;
  position: fixed;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  z-index: 1;
  overflow: hidden;
  background-color: #101010;
  opacity: 0.93;
}
header ul.topnav li {
  float: left;
}
header ul.topnav li a {
  font-size: 16px;
  display: block;
  color: #fff;
  text-align: center;
  padding: 15px 19px;
  text-decoration: none;
}
header ul.topnav li a:hover:not(.active) {
  background-color: #4e574e;
}
header ul.topnav li a.active {
  z-index: 1;
  background-color: #4faa33;
}
header ul.topnav li.right {
  float: right;
}
@media screen and (max-width: 600px) {
  header {
    margin-top: 239px;
  }
  header ul.topnav {
    top: -239px;
    position: relative;
  }
  header ul.topnav li.right,
  header ul.topnav li {
    float: none;
  }
}
.seta {
  position: relative;
  left: 48%;
  top: 85%;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-size: x-large;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #212121;
  padding: 10px;
  border-radius: 5px;
}
.seta:hover {
  background-color: rgba(33,33,33,0.58);
}
* {
  font-family: 'Raleway', sans-serif;
}
h2 {
  padding-bottom: 16px;
  padding-top: 40px;
}
@media (max-width: 600px) {
  .header {
    display: none;
  }
  tr {
    margin-bottom: 50px;
    border: 1px solid #c1c1c1;
  }
  .data-time,
  .category,
  .scores,
  .locale,
  tr {
    width: 100%;
    display: block;
    text-align: center;
  }
  body .counter .title {
    font-size: 23px;
    padding-top: 15px;
  }
  body .counter .itens-counter .item-count span:last-child {
    font-size: 25px;
  }
  div.counter {
    padding: 26px 10px;
  }
  .seta {
    display: none;
  }
  .table-responsive {
    display: block;
    width: 100%;
    position: relative;
  }
  .posit {
    display: none;
  }
  .posit-# {
    display: block;
  }
  .table-responsive thead,
  .table-responsive tbody,
  .table-responsive th,
  .table-responsive td,
  .table-responsive tr {
    display: block;
    margin-bottom: 0.5px;
  }
  .table-responsive td,
  .table-responsive th {
    display: inline-block;
    height: 50px;
    width: 41%;
    text-align: left;
  }
  .table-responsive tbody {
    width: auto;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
  }
  .table-responsive th.medalha,
  .table-responsive td.m-responsive {
    display: none;
  }
  .table-responsive th.posit-res,
  .table-responsive td.posit-res {
    width: 15%;
  }
}
@media (min-width: 601px) {
  th div {
    display: inline-block;
  }
}
@media (max-width: 314px) {
  tr {
    font-size: 0.8em;
  }
  .scores div:first-child span i {
    display: none;
  }
  .scores div:last-child span i {
    display: none;
  }
}
.score {
  border-radius: 4px;
  margin: 5px;
  padding: 5px 10px 5px 10px;
  font-size: 1.1em;
  border: 1px solid #c0c0c0;
}
.serv-pad {
  padding-left: 4px;
}
.comercio-pad {
  padding-left: 10px;
}
.eletro-pad {
  padding-left: 7px;
}
body {
  font-family: 'Rockkitt', sans-serif;
}
.title-section {
  margin: 0;
  padding: 1em 0.8em;
  font-size: 17px;
}
.title-section.blue {
  background-color: #0e65ab;
  color: #fff;
}
.title-section .number-day {
  color: #fff;
  display: inline-block;
  height: 30px;
  width: 30px;
  text-align: center;
  padding: 0.2em 0.7em;
  margin-top: -10px;
  border-radius: 50%;
}
.title-section .number-day:hover {
  text-decoration: none;
  border: 1px solid;
}
.table-data {
  color: #777;
}
.table-data.table .header th {
  font-weight: normal;
  font-size: 1.2em;
  padding-top: 2em;
  background-color: #fff;
}
.table-data.table td:first-child {
  padding-left: 2em;
}
.table-data.table .header .classif {
  vertical-align: middle;
  padding-top: 20px;
  padding-bottom: 20px;
}
.table-data.table .tr1 {
  border-left: 3px solid #0e65ab;
}
.table-data.table td {
  vertical-align: middle;
  padding: 15px 5px;
}
.table-data th span,
.table-data th b,
.table-data td span,
.table-data td b {
  color: #000;
}
.table-data th strong,
.table-data td strong {
  display: block;
  color: #000;
}
.table-data td div {
  display: inline;
}
.table-data td .gen-masc {
  color: #8eb8ce;
}
.table-data td .gen-fem {
  color: #ce92a9;
}
.table-data .icon {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin: 0 8px;
}
.table-data .icon.comercio {
  background-color: #f1c40f;
}
.table-data .icon.eletro {
  background-color: #c0392b;
}
.table-data .icon.info {
  background-color: #3498db;
}
.table-data .icon.servidores {
  background-color: #000;
}
.table-data.table .header th.medalha {
  vertical-align: middle;
  padding-top: 8px;
  padding-left: 0px;
}
.container-sobre {
  display: inline-block;
  border: 1px solid #0e65ab;
  padding: 40px 40px 40px 40px;
  background: #daeaf0;
  margin: 80px 0px 80px 0px;
  border-radius: 10px;
/* mouse over link */
/* selected link */
}
.container-sobre a {
  padding-left: 10px;
  color: #000;
  line-height: 1.7;
}
.container-sobre a:hover {
  color: #7f8c8d;
  text-decoration: none;
}
.container-sobre a:active {
  color: #0e65ab;
}
.container-sobre p {
  color: #4d4d4d;
}
.container-sobre h3 {
  padding-bottom: 20px;
  border-bottom: solid 1px #b7dcfa;
}
.counter {
  text-align: center;
  background-color: #4faa33;
  font-family: 'Raleway', sans-serif;
  color: #fff;
  padding: 3.5em;
}
.counter .title {
  margin: 0 0 1em;
  font-size: 25px;
}
.counter .itens-counter .item-count {
  display: inline-block;
  text-align: left;
  border-left: 1px solid rgba(255,255,255,0.5);
  padding-left: 10px;
  margin-left: 2em;
}
.counter .itens-counter .item-count:first-child {
  margin-left: 0;
}
.counter .itens-counter .item-count span {
  display: block;
}
.counter .itens-counter .item-count span:last-child {
  font-size: 35px;
  font-weight: 200;
}
footer {
  border-top: 1px solid #ddd;
  padding-top: 10px;
  margin-top: 10px;
  background-color: #fff;
}
footer h4 {
  color: #000;
}
footer a {
  color: #777;
  text-transform: uppercase;
  font-size: 12px;
  display: block;
  padding: 0.3em 0.1em;
}
footer a:hover {
  text-decoration: none;
  color: #000;
}
footer .rights {
  margin-top: 1em;
  background-color: #eee;
  padding: 1em;
  color: #7f8c8d;
}

Comments