Tabelas são um recurso utilizado nas páginas Web para a apresentação de dados tabulares como por exemplo: lista de preços, tabelas de medidas, etc. Nas páginas Web um pouco mais antigas as tabelas eram usadas para a criação do leiaute, método este menos utilizados atualmente.
Principais Tags:
Toda tabela deve ser iniciada com a marcação <table> e encerrada com </table>, para que a tabela tenha bordas e preciso usar as tags <table border></table>
As tags <TD></TD> definem cada uma das células da tabela, As células de uma tabela devem sempre aparecer entre as marcações de linhas (<tr> e </tr>), por padrão o texto nas células é alinhado a esquerda,porém este atributo pode ser alterado.
As tags <TD></TD> definem cada uma das células da tabela, As células de uma tabela devem sempre aparecer entre as marcações de linhas (<tr> e </tr>), por padrão o texto nas células é alinhado a esquerda,porém este atributo pode ser alterado.
Para definir o nome da tabela usa-se as tags <TH></TH>, Estes podem ser posicionados em qualquer célula. A diferença entre a marcação de célula e título de célula é que o título aparece em negrito. Outras tags também bastante utilizadas são:
<CELLSPACING> define o espaço entre cada célula na tabela
<CELLPADDING> define a distância entre o texto e a borda da tabela
<WIDTH> determina o tamanho da tabela na tela
<CELLPADDING> define a distância entre o texto e a borda da tabela
<WIDTH> determina o tamanho da tabela na tela
A imagem abaixo mostra parte de um código HTML, que formara uma tabela e a imagem logo a seguir mostra o resultado dessa tabelo sendo mostrada em um navegador:
Principais atributos:
As marcações das tabelas podem ter melhor efeito visual se forem acompanhadas de alguns atributos, entre esses atributos os principais são:
<BORDER> usado com a tag TABLE este atribuito inclui borda em uma tabela
<ALIGN> este atributo controla o alinhamento do texto dentro de uma célula, pode ser usado com os valores left, center, right, ou seja alinhar a esquerda, centralizar e alinhar a direita respectivamente
<BORDER> usado com a tag TABLE este atribuito inclui borda em uma tabela
<ALIGN> este atributo controla o alinhamento do texto dentro de uma célula, pode ser usado com os valores left, center, right, ou seja alinhar a esquerda, centralizar e alinhar a direita respectivamente
<VALIGN> define o alinhamento do texto nas células com relação a borda
superior e inferior
<NOWRAP> usado para que não seja feito quebra de linha dentro de uma célula.
<NOWRAP> usado para que não seja feito quebra de linha dentro de uma célula.
Sendo assim tabelas são uma importante e fácil maneira de mostrar dados e melhorara o visual de um Web site.
 |
| Exemplo de tabela em página da Web |
