Mock up- Cursos Fit Poblacion por Campus

by Benjamín Xolotl Torres Luna

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<body>
  <h1>Visualización de población de materia por campus </h1>
  <div class="barra-busqueda">

    <label for="periodo">Periodo</label>
    <select name="periodo" id="periodo">
      <option>201711</option>
      <option>201712</option>
      <option>201713</option>
      <option>201811</option>
    </select>
    Materia:
    <input type="text" placeholder="Escribe cualquier cosa" name="materia">
    <button id="search" class="search-button" name="search" onclick="muestraTabla();">Buscar</button>

  </div>
  
 <table width="100%" class="poblacionTable escondido"  align="center"  cellspacing="0">
    <thead>
      <tr class="tableizer-firstrow">
        <th> CD1003 </th>
        <th>CD1003.801</th>
        <th>CD1003.802</th>
        <th>CD1003.803</th>
        <th>CD1003.804</th>
        <th>CD1003.805</th>
        <th class="total">TOTAL</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Aguascalientes</td>
        <td>2</td>
        <td>2</td>
        <td>0</td>
        <td>2</td>
        <td>0</td>
        <td class="total">6</td>
      </tr>
      <tr>
        <td>Chiapas</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td class="total">0</td>
      </tr>
      <tr>
        <td>Chihuahua</td>
        <td>2</td>
        <td>2</td>
        <td>0</td>
        <td>2</td>
        <td>0</td>
        <td class="total">6</td>
      </tr>
      <tr>
        <td>Ciudad de México</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
       ...

CSS

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  text-align: center;
  color: #0065A9;
}
.tableizer-firstrow th:first-child{
  font-weight: bold;
}

th {
  padding: 10px 6px 10px 6px;
  text-align: center;
  background-color: #0065A9;
  color: white;
}

table,
td {
  text-align: center;
  border: 1px solid #DDDDDD;
}

tr:nth-of-type(even){
	background: #EEEEEE;
}

tfoot,
.total {
  font-weight: bold;
  color: red;
}

.escondido {
  display: none;
}

.search-button {
  padding: 2px 2px 2px 2px;
  width: 120px;
}

.barra-busqueda {
  padding: 5px 5px 5px 5px;
  text-align: center;
}

JavaScript

function muestraTabla() {
  $('.poblacionTable').show();
}

$(".search-button").button({
  icon: "ui-icon-search"
});