HTML com Acessibilidade

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>

Observe 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>