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
No 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ê deseja alterar a largura da borda, deve usar a propriedade CSS border-width. 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 o HTML válido.
- – Use a cor de fundo da propriedade CSS em vez disso.
- 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, defina 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
type = “code”> Descreve os atributos TABLE que são válidos no HTML 4.01, mas são obsoletos no 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 tabela tem uma borda de 5px.
type = “code”> 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 não quiser 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.
type = “code”> Ver um exemplo de 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.
type = “code”> 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.
type = “code”> E outro exemplo com o quadro inferior:
frame = “below”>
Esta mesa tem uma moldura na parte inferior.
type = “code”> Verifique 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 4×4 tem
as linhas, não colunas
delineado com o
atributo de regras.
type = “code”> E outro com linhas entre as colunas:
regras = “cols”>
Isso é
uma mesa
onde o
colunas
estão
em destaque
type = “code”> 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
type = “code”> 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á.
type = “code”> E para construir uma tabela com uma largura que é uma porcentagem do elemento pai, escreva: width = “80%”>
Esta mesa tem 80% da largura do contêiner em que está.
type = “código”>
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: align = “right”>
Esta tabela está alinhada à direita
O texto flui para a esquerda
type = “code”> E para obter o mesmo efeito com HTML válido (não obsoleto), escreva: float: right; “>
Esta tabela está alinhada à direita
O texto flui para a esquerda
type = “código”>
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: background-color: #ccc; “>
Esta tabela tem um fundo cinza
type = “code”> Semelhante ao atributo bgcolor, o atributo bordercolor permite que você altere 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:
border-color: red; “>
Esta tabela possui uma borda vermelha.
type = “code”> Os atributos bordercolorlight e bordercolordark foram incluídos no Internet Explorer para permitir que você crie uma borda 3D em torno de sua mesa. No entanto, a partir do IE8 e superiores, isso só é compatível com o modo de padrões do IE7 e o 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 foi implementado apenas pelo Internet Explorer e, a partir do IE8, é compatível apenas com o modo de padrões do IE7 e o modo peculiar. 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: height: 30em; “>
Esta mesa tem pelo menos 30 ems de altura.
type = “code”> 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: margin: 20px 40px; “
Esta tabela possui um vspace de 20 pixels e um hspace de 40 pixels.
type = “code”> 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:
white-space: nowrap; “> Esta é uma coluna com uma tonelada de conteúdo. Mas mesmo se for mais larga 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 todos os contente.
type = “code”> Finalmente, o atributo define como o conteúdo de cada célula deve se alinhar 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 o alinhamento de uma célula 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. Assim, você verá que a célula alinhada verticalmente está alinhada com a parte inferior.
vertical-align: bottom; “> Conteúdo na parte inferior.
Conteúdo no meio.
type = “código”>
Formato mla apa chicago Sua Citação
Kyrnin, Jennifer. “Usando atributos de elemento HTML TABLE.” ThoughtCo, maio. 14 de 2021, thinkingco.com/using-html-table-element-attributes-3469857.
Kyrnin, Jennifer. (2021, 14 de maio). Usando atributos do elemento HTML TABLE. Obtido em https://www.thoughtco.com/using-html-table-element-attributes-3469857
Kyrnin, Jennifer. “Usando atributos de elemento HTML TABLE.” ThoughtCo. https://www.thoughtco.com/using-html-table-element-attributes-3469857 (acessado em 26 de maio de 2021).
