Tabela (básico) e borda personalizada em HTML5 CSS3, vídeo 65

Neste vídeo vemos o principio de se criar uma tabela com HTML, com layout onde as linhas formam um zebrado e com uma borda personalizada que na verdade não é uma borda.

Código fonte HTML:

<table class="tabelas">
      <caption>TITULO</caption>
      <tr>
            <td class="subt"></td>
            <td class="colunafake" bgcolor='#363036'></td>
            <td class="subt"></td>
      </tr>
      <tr>
            <td class="colum" bgcolor='#363036'></td>
            <td class="colunafake" bgcolor='#696969'></td>
            <td class="coldois" bgcolor='#363036'></td>
      </tr>
      <tr>
            <td class="colum" bgcolor='#696969'></td>
            <td class="colunafake" bgcolor='#363036'></td>
            <td class="coldois" bgcolor='#696969'></td>
      </tr>
<!padrão se repete a cada duas linhas>
      <tr>
            <td class="colum" bgcolor='#363036'></td>
            <td class="colunafake" bgcolor='#696969'></td>
            <td class="coldois" bgcolor='#363036'></td>
      </tr>
      <tr>
            <td class="colum" bgcolor='#696969'></td>
            <td class="colunafake" bgcolor='#363036'></td>
            <td class="coldois" bgcolor='#696969'></td>
      </tr>
<!...>
</table>

Código fonte CSS:

.colunafake {
      width: 1px;
}
.subt {
      text-align: center;
      background-color: #696969;
      padding-right: 5px;
      padding-left: 5px;
}
.colum {
      text-align: center;
}
.coldois {
      padding-right: 5px;
      padding-left: 5px;
}
.tabelas {
      color: #f0ffff;
      line-height: 150%;
}
.tabelas caption {
      text-transform: uppercase;
      background-color: #363036;
}
.tabelas:hover {
      line-height: 200%;
}

Vídeo:

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.