Estrutura Mínima de Tabelas em HTML

Mês Lucro Janeiro 100 Tabelas Estrutura Mínima table tr tdMêstd tdLucrotd tr tr tdJaneirotd td100td tr table Uma tabela dele ser composta no mínimo pelas seguintes tags table contém a tabela como um todo permite a inserção dos outros elementos de tabela como o tr tr table row representa uma linha em uma tabela contém células td table data uma célula de uma tabela pode conter quaisquer outros elementos como texto imagens links e listas Resumindo criamos uma tabela com a tag table inserimos quantas linhas 1 de 10 Mês Lucro Janeiro 100 Mês Lucro desejarmos com tr e inserimos quantas células desejarmos em cada tr com td Cada tr deve conter o mesmo número de tds exceto em casos específicos que veremos em seguida Além do básico podemos especificar células de cabeçalho com a tag th table header Um th funciona como um td porém mostrará o conteúdo centralizado e em negrito além de ter leitura diferenciada em leitores de tela Cabeçalhos table tr thMêsth thLucroth tr tr tdJaneirotd td100td tr table Mais Linhas table tr thMêsth 2 de 10 Janeiro 100 Fevereiro 80 Mês Lucro Janeiro 100 Fevereiro 80 Mês Lucro thLucroth tr tr tdJaneirotd td100td tr tr tdFevereirotd td80td tr table Importante O único local de uma tabela onde podemos inserir conteúdo é em um td ou um th Errado table lalala não pode escrever aqui tr nem aqui td aqui pode td tr nem aqui table Borda Eliminado no HTML5 table border1 tr thMêsth thLucroth tr tr tdJaneirotd td100td tr tr tdFevereirotd td80td tr table Espaçamento Interno Eliminado no HTML5 table border1 cellpadding4 tr 3 de 10 Janeiro 100 Fevereiro 80 Mês Lucro Janeiro 100 Fevereiro 80 Finanças Mês Lucro Janeiro 100 Fevereiro 80 thMêsth thLucroth tr tr tdJaneirotd td100td tr tr tdFevereirotd td80td tr table Espaçamento Externo Eliminado no HTML5 table border1 cellpadding4 cellspacing4 tr thMêsth thLucroth tr tr tdJaneirotd td100td tr tr tdFevereirotd td80td tr table Mesclar Células table border1 cellpadding4 cellspacing4 tr th colspan2Finançasth tr tr thMêsth thLucroth tr tr tdJaneirotd td100td tr tr tdFevereirotd td80td tr table 4 de 10 Finanças Finanças Mês Lucro Janeiro 100 Fevereiro 80 Finanças Finanças Mês Lucro Janeiro 100 Fevereiro 80 Tabela de Ganhos Mensais Mesclar Células Vertical table border1 cellpadding4 cellspacing4 tr th rowspan4Finançasthth colspan2Finançasth tr tr thMêsth thLucroth tr tr tdJaneirotd td100td tr tr tdFevereirotd td80td tr table Legenda table border1 cellpadding4 cellspacing4 captionTabela de Ganhos Mensaiscaption tr th rowspan4Finançasthth colspan2Finançasth tr tr thMêsth thLucroth tr tr tdJaneirotd td100td tr tr tdFevereirotd td80td tr table Cor Eliminado no HTML5 5 de 10 Finanças Finanças Mês Lucro Janeiro 100 Fevereiro 80 Tabela de Ganhos Mensais table alignright border1 cellpadding4 cellspacing4 bgcolor1289EF captionTabela de Ganhos Mensaiscaption tr th rowspan4 bgcoloryellowFinançasthth colspan2 bgcolorgreenFinançasth tr tr bgcoloreee thMêsth thLucroth tr tr tdJaneirotd td100td tr tr tdFevereirotd td80td tr table Largura Eliminado no HTML5 Tabela de Ganhos Mensais Finanças Finanças Mês Lucro Janeiro 100 Fevereiro 80 table alignright border1 cellpadding4 cellspacing4 bgcolor1289EF captionTabela de Ganhos Mensaiscaption tr th rowspan4 bgcoloryellowFinançasthth colspan2 bgcolorgreenFinançasth tr tr bgcoloreee thMêsth thLucroth tr tr tdJaneirotd td100td tr tr 6 de 10 tdFevereirotd td80td tr table Cabeçalho e Rodapé Apesar de opcional é altamente recomendado especificar quais linhas correspondem ao cabeçalho corpo e rodapé da tabela Isto pode ser feito através das tags thead table header tbody table body e tfoot table footer A vantagem de especificar estas regiões está primeiramente na impressão de página Ao imprimir uma tabela sem essas tags os dados poderão ser quebrados entre páginas e o cabeçalho não será mantido na página seguinte Ao especificar estas regiões corretamente o cabeçalho e rodapé se repetirão em todas as páginas facilitando a leitura Além disso diferentes navegadores podem usar esta informação para inserir um scroll nos dados da tabela mantendo o cabeçalho e rodapé fixos na prática isto é feito com a ajuda de JS Exemplo teste1 teste2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 teste1 teste2 7 de 10 teste1 teste2 teste1 teste2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 8 de 10 teste1 teste2 teste1 teste2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 data1 data2 mande imprimir para ver o resultado Código table thead trthteste1ththteste2thtr thead tbody trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr 9 de 10 trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr trtddata1tdtddata2tdtr tbody tfoot trthteste1ththteste2thtr tfoot table 10 de 10