Tabelas em html

Programação para
Web
Tabelas
Professor Higor Nucci

Criando uma tabela simples
• Tabelas são feitas de linhas de células. O número de células em cada linha determina o formato da tabela.
• Para criar uma tabela simples:
1.
2.
3.
4.
5.
6.
7.
8.
9.

Digite .
Digite para definir o início da primeira linha.
Digite para definir o início da célula.
Digite o conteúdo da célula.
Digite para completar a célula.
Repita os passos de 3 a 5 para cada célula na linha.
Digite para completar a linha.
Repita os passos de 2 a 6 para cada linha.
Para terminar a tabela, digite .

• A tag não é opcional. Alguns navegadores não exibem a tabela sem ela.
• Há uma tag th para criar células de cabeçalho. Sua formatação padrão é geralmente centralizada e em negrito, mas você pode aplicar facilmente as CSS para criar estilos especiais de cabeçalho. • Você pode criar um título para a tabela com o elemento caption. Adicionando uma borda

Ajustando a largura

Contorno de texto pela tabela

Combinando Tabelas
• Para layouts mais complexos, pode ser útil combinar tabelas.
Você pode colocar combinações de tabelas e texto em outra tabela ou você pode usar múltiplas tabelas.
• Para embutir uma tabela em outra:
1.
2.

3.
4.

Crie a tabela interna e seu texto, ou outros elementos que devem acompanhá-la.
Crie a tabela externa. Determine qual célula da tabela externa irá conter a tabela interna e digite um lembrete para orientar a posição da tabela interna.
Teste as duas tabelas separadamente, para assegurar-se de que elas serão exibidas da maneira que deseja.
Substitua o lembrete com o conteúdo da tabela interna ao copiar e colar.

• Conferir os códigos background_css_nohtml.html e background.css. Expandindo uma célula através de colunas
• Para expandir uma célula através de duas colunas:
1.
2.
3.
4.
5.

Quando você chega ao ponto de precisar definir a célula que será expandida por mais de uma coluna, digite ,