Os atributos da tabela HTML fornecem muito mais controle sobre as tabelas HTML. Existem muitos atributos disponíveis para as tabelas para torná-las mais interessantes e mudar a aparência da sua página.
Atributos do elemento HTML TABLE
Dentro HTML5 o elemento usa os atributos globais e um outro atributo e foi alterado para ter apenas o valor 1 ou vazio (ou seja, border = ""). Se você quiser mudar a largura da borda, você deve usar a largura da borda Propriedade CSS.
Veja abaixo para aprender sobre os atributos válidos da tabela HTML5.
Existem também vários atributos que fazem parte da especificação HTML 4.01 que se tornou obsoleta no HTML5:
- —Use a propriedade CSS padding nos elementos TD e TH da tabela.
- —Use o espaçamento da borda da propriedade CSS na tabela.
- —Use estilos CSS border-color: black; e estilo de borda na mesa.
- —Use estilos CSS border-color: black; e estilo de borda nos elementos apropriados da tabela.
- —Em vez disso, você deve descrever a estrutura da tabela em uma CAPTION ou colocar a tabela inteira em uma FIGURA e descrevê-la em uma FIGCAPTION. Como alternativa, você pode simplificar a estrutura da tabela para que nenhuma explicação seja necessária.
- —Use a propriedade de largura CSS.
E um atributo que foi preterido no HTML 4.01 e também está obsoleto no HTML5.
- alinhar - use a propriedade CSS margin.
Existem também vários atributos que não fazem parte de nenhuma especificação HTML. Use esses atributos se você sabe que os navegadores aos quais oferece suporte podem lidar com eles e não se importa com HTML válido.
- - Em vez disso, use a cor de fundo da propriedade CSS.
- bordercolor - use a propriedade CSS border-color.
- bordercolorlight - Use a propriedade CSS border-color.
- bordercolordark - use a propriedade CSS border-color.
- cols — Não há alternativa para este atributo.
- height - Use a propriedade CSS height em vez disso.
- - Use a margem da propriedade CSS em vez disso.
- - Use o espaço em branco da propriedade CSS.
- - Use o alinhamento vertical da propriedade CSS em vez disso.
Atributos do elemento HTML5 TABLE
Como mencionamos acima, há apenas um atributo, além dos atributos globais, que é válido em um elemento TABLE do HTML5: border.
O atributo border é usado para definir uma borda ao redor de toda a tabela e todas as células dentro dela. Havia alguma dúvida se ele seria incluído na especificação do HTML5, mas permaneceu porque fornecia informações sobre a estrutura da tabela, além de simplesmente implicações de estilo.
Para adicionar o atributo de borda, você define o valor como 1 se houver uma borda e vazio (ou deixe de fora o atributo) se não houver. A maioria dos navegadores também suporta 0 sem borda e qualquer outro valor inteiro (2, 3, 30, 500, etc) para declarar a largura da borda em pixels, mas isso é obsoleto em HTML5. Em vez disso, você deve usar propriedades de estilo de borda CSS para definir a largura da borda e outros estilos.
Para criar uma mesa com uma borda, escreva:
border = "1">
Esta é uma mesa com uma borda
Isso descreve os atributos TABLE que são válidos em HTML 4.01, mas são obsoletos em HTML5. Se você ainda escreve documentos HTML 4.01, pode usar esses atributos, mas a maioria deles tem alternativas que tornarão suas páginas mais preparadas para o futuro quando você mudar para HTML5.
Atributos HTML 4.01 válidos
O atributo que descrevemos acima. A única diferença entre o HTML 4.01 e o HTML5 é que você pode especificar qualquer inteiro inteiro (0, 1, 2, 15, 20, 200, etc.) para definir a largura da borda em pixels.
Para construir uma mesa com uma borda de 5 pixels, escreva:
border = "5">
Esta mesa tem uma borda de 5px.
O atributo define a quantidade de espaço entre as bordas da célula e o conteúdo da célula. O padrão é dois pixels. Defina o cellpadding como 0 se você não quiser nenhum espaço entre o conteúdo e as bordas.
Para definir o preenchimento da célula para 20, escreva:
cellpadding = "20">
Esta tabela tem um preenchimento de células de 20.
As bordas das células serão separadas por 20 pixels.
Veja um exemplo de uma tabela com cellpadding.
O atributo define a quantidade de espaço entre as células da tabela e o conteúdo da célula. Como o cellpadding, o padrão é definido como dois pixels, portanto, você deve defini-lo como 0 se não quiser espaçamento entre células.
Para adicionar espaçamento de células a uma tabela, escreva:
cellspacing = "20">
Esta tabela tem um espaçamento entre células de 20.
As células serão separadas por 20 pixels.
O atributo identifica quais partes da borda ao redor da parte externa de uma tabela estarão visíveis. Você pode enquadrar sua mesa nos quatro lados, qualquer um dos lados, superior e inferior, esquerdo e direito ou nenhum.
Aqui está o HTML para uma tabela com apenas a borda esquerda:
frame = "lhs">
Essa mesa
terá
apenas o
lado esquerdo emoldurado.
E outro exemplo com a moldura inferior:
frame = "below">
Esta mesa tem uma moldura na parte inferior.
Confira algumas tabelas com frames.
O atributo é semelhante ao atributo frame, apenas afeta as bordas ao redor das células da tabela. Você pode definir regras em todas as células, entre colunas, entre grupos como TBODY e TFOOT ou nenhum.
Para construir uma tabela com linhas apenas entre as linhas, escreva:
regras = "linhas">
Esta mesa 4x4 tem
as linhas, não colunas
delineado com o
atributo de regras.
E outro com linhas entre as colunas:
regras = "cols">
Isso é
uma mesa
onde o
colunas
estão
em destaque
O atributo fornece informações sobre a tabela para leitores de tela e outros agentes de usuário que podem ter problemas para ler tabelas. Para usar o atributo de resumo, você escreve uma breve descrição da tabela e a coloca como o valor do atributo. O resumo não será exibido na página da web na maioria dos navegadores da web padrão.
Aqui está como escrever uma tabela simples com um resumo:
summary = "Esta é uma tabela de amostra que contém informações de preenchimento. O objetivo desta tabela é demonstrar um resumo. ">
coluna 1 linha 1.
coluna 2 linha 1.
coluna 1 linha 2.
coluna 2, linha 2.
O atributo define a largura da tabela em pixels ou como uma porcentagem do elemento do contêiner. Se a largura não for definida, a tabela ocupará apenas o espaço necessário para exibir o conteúdo, com uma largura máxima igual à largura do elemento pai.
Para construir uma mesa com uma largura específica em pixels, escreva:
largura = "300">
Esta mesa tem 80% da largura do contêiner em que está.
E para construir uma tabela com uma largura que seja uma porcentagem do elemento pai, escreva:
largura = "80%">
Esta mesa tem 80% da largura do contêiner em que está.
Atributo TABLE do HTML 4.01 obsoleto
Há um atributo do elemento TABLE que está obsoleto no HTML 4.01 e obsoleto no HTML5: alinhar. Este atributo permite definir onde a tabela deve estar localizada na página em relação ao texto que está ao lado dela. Este atributo tornou-se obsoleto no HTML 4.01 e você deve evitar usá-lo. Em vez disso, você deve usar a propriedade CSS ou margin-left: auto; e margem direita: automático; estilos. A propriedade float fornece um resultado mais próximo do que o atributo align forneceu, mas pode afetar a maneira como o restante do conteúdo da página é exibido. A margem direita: automático; e margem esquerda: automático; são o que o W3C recomenda como alternativa.
Aqui está um exemplo obsoleto usando o atributo align:
alinhar = "direita">
Esta tabela está alinhada à direita.
O texto flui em torno dele para a esquerda.
E para obter o mesmo efeito com HTML válido (não obsoleto), escreva:
style = "float: right;">
Esta tabela está alinhada à direita.
O texto flui em torno dele para a esquerda.
Atributos TABLE obsoletos
As informações anteriores descrevem atributos do elemento HTML que são válidos no HTML 4.01, mas são obsoletos no HTML5.
O seguinte descreve os atributos TABLE que não são válidos em nenhuma especificação atual. Se você não se importa se suas páginas são validadas e se seus usuários usam um navegador que ofereça suporte a esses elementos, você pode usar esses elementos. Mas a maioria deles não tem suporte em navegadores modernos ou tem alternativas que são mais compatíveis com os padrões.
Não recomendamos o uso desses atributos em suas tabelas HTML.
O atributo é um atributo antigo que foi incluído antes que o CSS fosse amplamente suportado. Ele permite que você altere a cor de fundo da mesa. Você pode definir um nome de cor ou um código hexadecimal. Este atributo ainda funciona em muitos navegadores, mas para HTML preparado para o futuro, você não deve usá-lo e, em vez disso, use CSS.
A melhor alternativa para esse atributo é a propriedade de estilo.
Para alterar a cor de fundo de uma tabela, escreva:
style = "cor de fundo: #ccc;">
Esta tabela tem um fundo cinza.
Semelhante ao atributo bgcolor, o atributo bordercolor permite alterar a cor do atributo. Este atributo é compatível apenas com o Internet Explorer. Em vez disso, você deve usar a propriedade de estilo border-color.
Para alterar a cor da borda de sua mesa, escreva:
style = "border-color: red;">
Esta tabela possui uma borda vermelha.
Os atributos bordercollight e bordercolordark foram incluídos no Internet Explorer para permitir que você crie uma borda 3D ao redor de sua mesa. No entanto, a partir do IE8 e superior, isso só é compatível com o modo de padrões do IE7 e Modo peculiares. A Microsoft afirma que essas propriedades não são mais suportadas.
Por um curto período, o atributo cols no elemento TABLE foi proposto para ajudar os navegadores a saber quantas colunas uma tabela tinha. A premissa era que isso ajudaria a acelerar a renderização de grandes tabelas. No entanto, ele só foi implementado pelo Internet Explorer e, a partir do IE8 e posteriores, só é compatível com o modo de padrões do IE7 e o modo peculiares.
Como há um atributo de largura (obsoleto em HTML5), muitas pessoas presumiram que também havia um atributo de altura para as tabelas. Mas como as tabelas estão de acordo com a largura de seu conteúdo ou a largura definida no atributo CSS ou largura, a altura não pode ser restringida. Portanto, em vez disso, os navegadores permitiram que o atributo height definisse a altura mínima da tabela. Se a mesa fosse mais alta do que essa altura, ela seria exibida mais alta. Mas você deve usar a propriedade.
Com a propriedade CSS height, você pode restringir a altura se usar a propriedade CSS também para definir o que acontece com qualquer conteúdo em excesso.
Para definir a altura mínima em uma mesa, escreva:
estilo = "altura: 30em;">
Esta mesa tem pelo menos 30 ems de altura.
Os dois atributos e espaço adicionado ao redor dos lados esquerdo / direito (hspace) e superior / inferior (vspace) da tabela. Você deve usar a propriedade style.
Para definir o espaço vertical em 20 pixels e o espaço horizontal em 40 pixels, escreva:
estilo = "margem: 20px 40px;"
Esta tabela possui um vspace de 20 pixels e um hspace de 40 pixels.
O atributo é um atributo booleano que define se o conteúdo da tabela deve quebrar na borda do elemento pai ou janela ou forçar a rolagem horizontal. Em vez disso, você deve definir as características de empacotamento de cada célula da tabela usando a propriedade CSS.
Para fazer com que uma coluna com muito texto não seja quebrada, escreva:
style = "white-space: nowrap;"> Esta é uma coluna com muito conteúdo. Mas mesmo que seja mais largo do que o contêiner, o texto não deve passar para a próxima linha, mas sim forçar a janela do navegador a rolar horizontalmente para ver todo o conteúdo.
Finalmente, o atributo define como o conteúdo de cada célula deve ser alinhado verticalmente dentro da célula. Em vez deste atributo inválido, você deve usar a propriedade CSS em cada célula cujo alinhamento deseja alterar. Você não notará os efeitos desse estilo, a menos que o conteúdo da célula seja menor que o espaço disponível criado por outras células maiores.
Para forçar uma célula a se alinhar na parte inferior (em vez do meio, como padrão), escreva:
Esta célula é mais longa do que o resto e, portanto, forçará a altura a ser mais alta. Portanto, você verá que a célula alinhada verticalmente está alinhada com a parte inferior.
style = "vertical-align: bottom;"> Conteúdo na parte inferior.
Conteúdo no meio.