upcurso: Tabelas em Html

Tabelas

O uso de tabelas permite posicionar textos e objetos com muita eficácia, tomando por base as células, que são originadas através do cruzamento entre linhas e colunas. É possível dentro das células de uma tabela, criar outras tabelas interpostas e assim sucessivamente conforme a necessidade.

Uma tabela pode conter várias linhas (posição horizontal) e uma linha por sua vez, pode conter várias colunas (posição vertical).

Uma linha pode conter várias colunas.

A sintaxe necessária para a implementação das tabelas, é composta por diversas tags pares, usadas para delimitar a abertura e o fechamento da tabela, das linhas, das colunas etc. Além das tags, estão disponíveis vários atributos, para que possamos formatar a aparência da tabela conforme a nossa vontade ou necessidade, definindo imagens ou cores de fundo, borda, alinhamentos, espaçamentos entre células etc.

Tags utilizadas na implementação de tabelas:
<table> e </table> - Delimitam o início e o fim da tabela
<caption> e </caption> - Insere um título para a tabela
<tr> e </tr> - Delimitam o início e o fim de uma linha
<th> e </th> - Insere cabeçalhos para as colunas. Devem ser inseridos conforme o número de colunas da tabela e delimitados pela tag <tr> e </tr>. A informação inserida entre <th> e </th>, por padrão, ficará centralizada e no estilo negrito.
<td> e </td> - Insere colunas à tabela. Devem estar alinhados dentro da tag <tr> e </tr>.

Atributos que podem ser declarados tanto na abertura da tabela <table>, quanto na abertura das colunas <th> ou <td>:

(width) e (height):

Estes atributos definem respectivamente a largura e a altura da tabela em relação à página ou ainda, de uma coluna em relação à tabela. Os valores passados a estes atributos deverão ser inseridos em pixels ou em porcentagem.

(bgcolor): Define a cor de fundo para a tabela ou para uma célula específica, usando o padrão RGB.

(background): Define uma imagem de fundo para a tabela ou para uma célula específica.

(border): Define a espessura (em pixels) da borda da tabela. Caso receba o valor "0", a borda será omitida.

(bordercolor): Define a cor principal da borda usando o padrão RGB.

(bordercolordark): Define a cor da sombra mais escura da borda usando o padrão RGB.

(bordercolorlight): Define a cor da sombra mais clara da borda usando o padrão RGB.

(cellspacing): Este atributo define em pixels a distância entre uma célula e outra.

(cellpadding): Este atributo define a margem entre o texto ou objeto inserido na célula e a sua borda.

Atributos utilizados na abertura das colunas <th> ou <td>:

(align): Este atributo permite alinhar um texto ou objeto na horizontal dentro da célula. Os valores disponíveis são:
Align="center" – Alinhamento centralizado
Align="left" – Alinhamento à esquerda (padrão)
Align="right" – Alinhamento à direita

(valign): Este atributo permite alinhar um texto ou objeto na vertical dentro da célula. Os valores disponíveis são:

vAlign="middle" – Alinha ao centro da célula.
vAlign="bottom" – Alinha à parte inferior da célula.
vAlign="top" – Alinha à parte superior da célula.

(colspan): Este atributo recebe como valor um número, definindo a quantidade de colunas ocupadas por uma célula.

(rowspan): Este atributo recebe como valor um número, definindo a quantidade de linhas ocupadas por uma célula.

Observem no exemplo abaixo os códigos utilizados para elaboração de uma tabela.

<html>

<head>
<title> TABELA BÁSICA DAS CORES DO PADRÃO RGB </title>
</head>
<body>
 
<CENTER>
<TABLE BORDER CELLSPACING=1 BORDERCOLOR="#000000" CELLPADDING=4 WIDTH=181>
<TR bgcolor="#000000">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


COLOR


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


VALUE


</a>
</TD>
</TR>
<TR bgcolor="#000000">
<TD WIDTH="46%" VALIGN="TOP"> </TD>
<TD WIDTH="54%" VALIGN="TOP"> </TD>
</TR>
<TR bgcolor="#000000">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Aqua


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#00FFFF


</a>
</TD>
</TR>
<TR bgcolor="#000000">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Fuchsia


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#FF00FF


</a>
</TD>
</TR>
<TR bgcolor="#000000">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Lime


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#00FF00


</a>
</TD>
</TR>
<TR bgcolor="#000000">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Silver


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#C0C0C0


</a>
</TD>
</TR>
<TR bgcolor="#000000">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


White


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#FFFFFF


</a>
</TD>
</TR>
<TR bgcolor="#000000">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Yellow


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#FFFF00


</a>
</TD>
</TR>
<TR bgcolor="#ffffff">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Black


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#000000


</a>
</TD>
</TR>
<TR bgcolor="#ffffff">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Blue


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#0000FF


</a>
</TD>
</TR>
<TR bgcolor="#ffffff">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Gray


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#808080


</a>
</TD>
</TR>
<TR bgcolor="#ffffff">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Green


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#008000


</a>
</TD>
</TR>
<TR bgcolor="#ffffff">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Maroon


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#800000


</a>
</TD>
</TR>
<TR bgcolor="#ffffff">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Navy


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#000080


</a>
</TD>
</TR>
<TR bgcolor="#ffffff">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Olive


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#808000


</a>
</TD>
</TR>
<TR bgcolor="#ffffff">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Purple


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#800080


</a>
</TD>
</TR>
<TR bgcolor="#ffffff">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Red


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#FF0000


</a>
</TD>
</TR>
<TR bgcolor="#ffffff">
<TD WIDTH="46%" VALIGN="TOP">
<a href="#">


Teal


</a>
</TD>
<TD WIDTH="54%" VALIGN="TOP">
<a href="#">


#008080


</a>
</TD>
</TR>
</TABLE>
</CENTER>
</body>
</html>

Com base neste exemplo faça:

1) Crie um arquivo denominado tabela.html. Este arquivo deve ser de 3 colunas e 6 linhas, e conter as informaçõe da tabela exibida na imagem deste artigo: código, descrição e grupo. Faça a tabela conforme a imagem, não inclua agora as caixas de entrada de valores que estão na imagem.

2) Coloque em seu arquivo index.html, um link para carregar esta tabela.

2 comentários:

Júlia Moreira23 de maio de 2014 às 13:21
Elias, posso centralizar minha tabela ?
ResponderExcluir
Respostas
Elias23 de maio de 2014 às 19:32
Olá Júlia. Sim querida, você pode centralizar sua tabela. Como estamos avançando no uso de recursos, você também pode utilizar outros recursos já estudados neste bimestre em sua página, como formatação de cores, fonte, etc. Abraços.
ResponderExcluir
Respostas

Adicionar comentário

Curta nos no facebook

quarta-feira, 21 de maio de 2014

Tabelas em Html

2 comentários:

Arquivo do blog