Composição, Projeto e Animação Prof.

Andrea Garcia

Construindo Tabelas em HTML

As tabelas em HTML seguem o mesmo padrão de outros processadores conhecidos

que organizam suas informações através de tabelas ou planilhas eletrônicas.
A tabela é formada por linhas e colunas, facilitando a organização dessas
informações. Para inserir estes dados, utiliza-se a tag <table>.

<table>...</table>

A tag <table> define uma tabela em HTML. Além desta tag, utiliza-se os elementos
<tr>, <th> e <td> para criar linhas e células na tabela HTML. Lembrando que as
inserções entre colunas e linhas formam uma célula.
A tag <tr> cria linhas em uma tabela. A tag <th> cria o cabeçalho da tabela onde o
texto fica centralizado e em formato negrito. É muito utilizado para colocarmos títulos
nas colunas da tabela. A tag <td> é usada para definir e criar as células da tabela.
Exemplo 1:
Programação Resultado no Navegador

Inserindo borda na tabela

Exemplo 2:
Programação Resultado no Navegador
Composição, Projeto e Animação Prof. Andrea Garcia

Atributo colspan

O atributo colspan é utilizado para distribuir suas informações em um determinado

número de colunas predefinido, mesclando a quantidade de colunas definidas,
formatando como “células mescladas” em Excel.

Exemplo 3:
Programação Resultado no Navegador

Atributo rowspan

O atributo rowspan é utilizado para distribuir suas informações em um determinado

número de linhas predefinido, este atributo mescla a quantidade de linhas em uma
tabela HTML.

Exemplo 4:
Programação Resultado no Navegador
Composição, Projeto e Animação Prof. Andrea Garcia

Atributo Headers

O atributo headers é novo para a tag <th> na versão do HTML5. Ele cria
relacionamentos entre os cabeçalhos e os valores que serão a eles atribuídos. O
atributo headers fornece instruções ao navegador indicando que o conteúdo dos
cabeçalhos da tabela são relevantes, referenciando o atributo id para cada célula do
cabeçalho em questão.

Exemplo 5:
Programação

Resultado no Navegador

Cores na Tabela

O atributo BGCOLOR é utilizado para aplicar cor de fundo a célula ou a tabela. Este
atributo pode ser inserido nas tags <TABLE> , <TD> e <TH>.
Composição, Projeto e Animação Prof. Andrea Garcia

Exemplo 6:
Programação

Resultado no Navegador

Conteúdo adaptado do livro: HTML 5 Construindo a Internet., Oliveira, Éderson A.

Ed. Viena.

Exercícios:

1. Desenvolver as seguintes tabelas, onde cada uma será um arquivo .html diferente.
Composição, Projeto e Animação Prof. Andrea Garcia

2. Crie uma página HTML contendo o horário das suas aulas (utilizando tabelas) A tabela
deve conter 1 linha de cabeçalho, com a frase “Horário”.