Tabela HTML 5

by Yure Pereira

HTML

<link rel="stylesheet" href="https://raw.githubusercontent.com/YurePereira/FlexFlashFast/master/css/reset.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/YurePereira/FlexFlashFast/master/css/f3.tables.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/YurePereira/FlexFlashFast/master/css/f3.texts.css">
<table class="table">
   <caption>Notas</caption>
  <thead>
    <tr>
      <th>Avaliação 1:</th>
      <th>Avaliação 2:</th>
      <th>Trabalho:</th>
      <th>Avaliação Substitutiva:</th>
      <th>Nota Final:</th>
      <th>Falta(s):</th>
      <th>Situação:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td>0</td>
      <td>Aprovado</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td...

CSS

body {
  font-size: 12px;
  font-family: arial;
}

.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

.table {
  border-collapse: collapse;
  background-color: #fff;
  width: 100%;
}
.table caption {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  padding: 5px 0;
}
.table th,
.table td {
  padding: 5px;
}
.table thead {
  background-color: #333;
  color: #fff;
  height: 40px;
}

.table tbody tr {
  border-bottom: 1px solid #999;
}