CSS - Tabelas Style
A tag table define uma tabela HTML.
Uma tabela HTML consiste no elemento table e em um ou mais elementos tr, th e td.
O elemento tr define uma linha da tabela, o elemento th define um cabeçalho da tabela e o elemento td define uma célula da tabela.
Uma tabela HTML mais complexa também pode incluir elementos caption, col, colgroup, thead, tfoot e tbody.
Times: | e-mail: | Telefone: | Cidade: |
---|---|---|---|
Flamengo | Flamengo@gmail.com | (21)12341234 | Brasilia |
Botafogo | Botafogo@gmail.com | (21)12341234 | |
Total : 2 |
codigo HTML
x
<table>
<caption>Cadastro dos melhores Times</caption>
<colgroup>
<col class="times"/>
<col class="email"/>
<col class="telefone"/>
<col class="cidade"/>
</colgroup>
<thead>
<tr>
<th>Times:</th>
<th>e-mail:</th>
<th>Telefone:</th>
<th>Cidade:</th>
</tr>
</thead>
<tbody>
<tr>
<td>Flamengo</td>
<td>Flamengo@gmail.com</td>
<td>(21)12341234</td>
<td rowspan="2">{JsonRegiao.capital}</td>
</tr>
<tr>
<td>Botafogo</td>
<td>Botafogo@gmail.com</td>
<td>(21)12341234</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total : 2</td>
</tr>
</tfoot>
</table>
<caption>Cadastro dos melhores Times</caption>
<colgroup>
<col class="times"/>
<col class="email"/>
<col class="telefone"/>
<col class="cidade"/>
</colgroup>
<thead>
<tr>
<th>Times:</th>
<th>e-mail:</th>
<th>Telefone:</th>
<th>Cidade:</th>
</tr>
</thead>
<tbody>
<tr>
<td>Flamengo</td>
<td>Flamengo@gmail.com</td>
<td>(21)12341234</td>
<td rowspan="2">{JsonRegiao.capital}</td>
</tr>
<tr>
<td>Botafogo</td>
<td>Botafogo@gmail.com</td>
<td>(21)12341234</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total : 2</td>
</tr>
</tfoot>
</table>
codigo CSS
x
table, th, td {border: 1px solid #000;}
.times {background-color:red;}
.email {background-color:green;}
.telefone {background-color:blue;}
.cidade {background-color:blue;}
.times {background-color:red;}
.email {background-color:green;}
.telefone {background-color:blue;}
.cidade {background-color:blue;}