Html Básico - Tabelas
()
TABELAS HTML
Tabelas são definidas pela tag <table>.
Uma tabela está dividida em linhas pela tag <tr>, e cada linha está dividida em células pela tag <td>, do inglês table data <td>e table row <tr>. A tag <td> pode conter textos, links, imagens, listas, formulários, outras tabelas e etc.
EXEMPLO:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Abra o notepad (bloco de notas) do windows (iniciar -> acessórios -> notepad), escreva o código do exemplo acima, salve como tabela.html. Clique duas vezes sobre o arquivo criado, o browser deve abrir uma página web e exibir como ficou a tabela.
_______________________________________________________________________________
O ATRIBUTO BORDER
Se não for especificado o atributo border, a tabela será exibida sem nenhuma borda. Para definir as bordas da tabela, utiliza-se o atributo border na tag <table> :
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
_______________________________________________________________________________
HEADERS (TÍTULOS DE COLUNAS)
Os títulos das colunas dastabelas são definidos pela tag <th>.
O texto de um header será exibido em negrito e no centro da célula.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Copie o código acima no bloco de notas, salve como headers.html e execute o arquivo para ver o exemplo.
_______________________________________________________________________________
TENTE VOCÊ MESMO:
Tabelas: http://www.w3schools.com/html/html_tables.asp
(Como criar tabelas em um documnto HTML).
Bordas: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_borders
(Como especificar diferentes bordas)
Tabelas sem bordas: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables3
Títulos das Colunas: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headers
Títulos das Tabelas: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables2
Rowspan e colspan: subdividindo células:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span
Tags dentro de tabelas: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_elements
Cellpadding (margens): http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_elements
Cellspacing (espaço entre as células):
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing
O atributo frame: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_frame
Resumos Relacionados
- Html Básico - Listas
- Html Básico Formatação
- Html Básico - Imagens
- Html Básico Links
- Html Básico Estilo
|
|