As tabelas HTML permitem que os desenvolvedores da Web organizem dados em linhas e colunas.
Tabela simples
<table style="width:100%">
<tr>
<th>primeiro nome</th>
<th>último nome</th>
<th>idade</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Tabela mais completa
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>tabela</h2>
<table>
<tr>
<th>empresa</th>
<th>contato</th>
<th>pais</th>
</tr>
<tr>
<td>joe</td>
<td>manuel</td>
<td>alemanha</td>
</tr>
<tr>
<td>Centro</td>
<td>Francisco</td>
<td>Mexico</td>
</tr>
<tr>
<td>joana</td>
<td>Rolanda</td>
<td>brasil</td>
</tr>
<tr>
<td>teste</td>
<td>testeq</td>
<td>usa</td>
</tr>
<tr>
<td>Laugs</td>
<td>Yoss</td>
<td>brasil</td>
</tr>
<tr>
<td>Ms</td>
<td>Gios</td>
<td>br</td>
</tr>
</table>
</body>
</html>
Veja abaixo alguns estilos de tabela
Bordas finas
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Bordas</h2>
<p>Estilos</p>
<table style="width:100%">
<tr>
<th>primeiro nome</th>
<th>ultimo nome</th>
<th>idade</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Tabelas com espçamento
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>Novo</h2>
<p>Outro exemplo</p>
<table style="width:100%">
<tr>
<th>Primeiro nome</th>
<th>último</th>
<th>Idade</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Tabelas com mais linhas ou mais colunas em uma só:
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Resumo do capítulo
Use o <table>elemento HTML para definir uma tabela
Use o <tr>elemento HTML para definir uma linha da tabela
Use o <td>elemento HTML para definir os dados da tabela
Use o <th>elemento HTML para definir um cabeçalho da tabela
Use o <caption>elemento HTML para definir uma legenda da tabela
Use a border propriedade CSS para definir uma borda
Use a border-collapse propriedade CSS para recolher as bordas das células
Use a padding propriedade CSS para adicionar preenchimento às células
Use a text-align propriedade CSS para alinhar o texto da célula
Use a border-spacing propriedade CSS para definir o espaçamento entre células
Use o colspan atributo para fazer uma célula abranger muitas colunas
Use o rowspan atributo para fazer uma célula se estender por muitas linhas
Use o id atributo para definir exclusivamente uma tabela
<< Anterior Imagens Elemento
Deixe um comentário