Comunidade Vida Evangélica
Exemplo de Formatação de Tabela
O exemplo abaixo apresenta uma tabela simples, demonstrando a relação Aluno / Notas / Responsável.
As bordas no HTML, por padrão são duplas. Neste exemplo vamos alterar para bordar simples (contraída) de uma linha.
O nome do aluno e do responsável serão alinhados à esquerda, notas e faltas à direita.
| Aluno | Nota | Falta | Responsável |
|---|---|---|---|
| Estevão | 10 | 0 | Lú |
| Othávio | 10 | 0 | Gil |
| Adrielly | 10 | 0 | Telinha |
Código CSS para estilizar a nossa tabela
<style type="text/css">
body {font-family: arial; background-color:oldlace; color: green;}
/*Formatando estilo da tabela*/
table {border-collapse: collapse; border-width: 1px;}
table td.numerico {text-align: right;}
table tbody {color: red;}
table thead {color: blue;}
</style>
Veja o código HTML completo
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Exemplo de Formatação de Tabela</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
body {font-family: arial; background-color:oldlace; color: green;}
/*Formatando estilo da tabela*/
table {border-collapse: collapse; border-width: 1px;}
table td.numerico {text-align: right;}
table tbody {color: red;}
table thead {color: blue;}
</style>
<body>
<h1>Exemplo de Formatação de Tabela</h1>
<p>O exemplo abaixo apresenta uma tabela simples, demonstrando a relação <span class="bold">Aluno / Notas / Responsável</span>.</p>
<p>As bordas no HTML, por padrão são duplas. Neste exemplo vamos alterar para bordar simples (contraída) de uma linha></p>
<p>O nome do aluno e do responsável serão alinhados à esquerda, notas e faltas à direita.</p>
<table border="1">
<caption>Notas, Falta e Responsáveis</caption>
<thead>
<tr>
<th>Aluno</th>
<th>Nota</th>
<th>Falta</th>
<th>Responsável</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>Estevão</td>
<td class="numerico">10</td>
<td class="numerico">0</td>
<td>Lú</td>
<tr>
<td>Othávio</td>
<td class="numerico">10</td>
<td class="numerico">0</td>
<td>Gil</td>
<tr>
<td>Adrielly</td>
<td class="numerico">10</td>
<td class="numerico">0</td>
<td>Telinha</td>
</tr>
</tbody>
</table>
</body>
</html>
FaceBook
Twitter
Linkedin
Pinterest
YouTube
Blogs