Os atributos da tabela HTML oferecem muito mais controle sobre as tabelas HTML. Há muitos atributos disponíveis nas tabelas para torná-los mais interessantes e alterar a aparência da sua página.
Atributos do Elemento TABLE HTML
Em HTML5, o elemento usa os atributos globais e um outro atributo: E isso mudou para ter apenas o valor de 1 ou vazio (isto é border = ""). Se você quiser mudar a largura da borda, você deve usar o largura de borda Propriedade CSS.
Veja abaixo para saber mais 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 o CSS
preenchimentopropriedade em cima da mesaTDeºelementos. - - Use a propriedade CSS
espaçamento entre bordasna mesa. - - Use estilos CSS
border-color: preto;eestilo de bordana mesa. - - Use estilos CSS
border-color: preto;eestilo de bordanos elementos apropriados da tabela. - Em vez disso, você deve descrever a estrutura da tabela em um
RUBRICAou colocar a mesa inteira em umFIGURAe descrevê-lo em umFIGURA. Como alternativa, você poderia simplificar a estrutura da tabela para que nenhuma explicação seja necessária. - Use o CSS
largurapropriedade.
E um atributo que foi preterido no HTML 4.01 e também está obsoleto no HTML5.
Saiba mais sobre os atributos HTML 4.01 TABLE.
alinharUse o CSSmargempropriedade em vez disso.
Existem também vários atributos que não fazem parte de nenhuma especificação HTML. Use esses atributos se souber que os navegadores que você suporta podem manipulá-los e você não se importa com HTML válido.
- - Use a propriedade CSS
cor de fundoem vez de. Cor da borda- Use a propriedade CSSCor da bordaem vez de.bordercolorlight- Use a propriedade CSSCor da bordaem vez de.bordercolordark- Use a propriedade CSSCor da bordaem vez de.colsNão há alternativa para este atributo.altura- Use a propriedade CSSalturaem vez de.- - Use a propriedade CSS
margemem vez de. - - Use a propriedade CSS
margemem vez de. - - Use a propriedade CSS
espaço brancoem vez de. - - Use a propriedade CSS
alinhar verticalmenteem vez de.
Saiba mais sobre os Atributos TABLE específicos do navegador.
Atributos do elemento HTML5 TABLE
Como mencionamos acima, há apenas um atributo, além dos atributos globais, que é válido em um HTML5 MESA elemento: fronteira.
o fronteira atributo é usado para definir uma borda ao redor da tabela inteira e todas as células dentro dela. Houve alguma dúvida sobre se ele seria incluído na especificação HTML5, mas permaneceu porque forneceu informações sobre a estrutura da tabela, além de simplesmente implicações de estilo.
Para adicionar o fronteira atributo, você define o valor para 1 se houver uma borda e vazia (ou deixar o atributo), se não houver. A maioria dos navegadores também suportará 0 para nenhuma 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 tabela com uma borda, escreva:
border = "1" >
Esta é uma tabela com uma borda
Existem atributos HTML 4.01 que estão obsoletos no HTML5. Se você planeja escrever documentos HTML 4.01, você pode aprendê-los, caso contrário, você pode ignorá-los. A maioria desses atributos tem alternativas, descritas acima.
Descrevemos os atributos do elemento que são válidos em HTML5 (e HTML 4.01). Isso descreve oMESA atributos que são válidos em HTML 4.01, mas são obsoletos em HTML5. Se você ainda escrever documentos HTML 4.01, poderá usar esses atributos, mas a maioria deles terá alternativas que deixarão suas páginas mais prontas para o futuro quando você migrar para o HTML5.
Atributos HTML 4.01 válidos
O atributo que descrevemos acima. A única diferença no HTML 4.01 do 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 tabela com uma borda de 5px, escreva:
<> border = "5" > Esta tabela tem uma borda de 5px.
Veja um exemplo de duas tabelas com bordas.
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. Colocou ocellpadding para0 se você não quiser espaço entre o conteúdo e as bordas.
Para definir o preenchimento da célula como 20, escreva:
<> cellpadding = "20" > Esta tabela tem um cellpadding 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. Gostarcellpadding, o padrão é definido para dois pixels, então você deve configurá-lo para0 se você não quiser espaçamento celular.
Para adicionar espaçamento de célula a uma tabela, escreva:
<> cellpacing = "20" > Esta tabela tem um cellpacing de 20. As células serão separadas por 20 pixels.
Veja uma tabela com o cellpacing
O atributo identifica quais partes da borda ao redor da parte externa de uma tabela estarão visíveis.Você pode enquadrar sua mesa em todos os quatro lados, de um lado, superior e inferior, esquerda e direita, ou nenhum.
Aqui está o HTML para uma tabela com apenas a borda do lado esquerdo:
frame = "lhs" >
Essa mesa terá apenas o lado esquerdo emoldurado.
E outro exemplo com o quadro inferior:
frame = "abaixo" >
Esta tabela tem um quadro na parte inferior.
Confira algumas tabelas com frames
O atributo é semelhante aoquadro, Armação atributo, só afeta as bordas ao redor das células da tabela. Você pode definir regras em todas as células, entre colunas, entre grupos comoTBODY eTFOOT 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" >
Isto é uma mesa onde o colunas está em destaque
Aqui está um exemplo de uma tabela com regras
O atributo fornece informações sobre a tabela para leitores de tela e outros agentes do usuário que podem ter dificuldade para ler tabelas. Para usar oresumo atributo, você escreve uma breve descrição da tabela e coloca isso como o valor do atributo. O resumo não será exibido na página da web na maioria dos navegadores padrão da web.
Aqui está como escrever uma tabela simples com um resumo:
<> summary = "Esta é uma tabela de amostra que contém informações de preenchimento. O propósito desta tabela é demonstrar um resumo." > coluna 1 linha 1 coluna 2 linha 1 coluna 1 linha 2 coluna 2 linha 2
Ver uma tabela com um resumo
O atributo define a largura da tabela em pixels ou como uma porcentagem do elemento do contêiner. Se olargura não está definida, a tabela ocupará apenas o espaço necessário para exibir o conteúdo, com largura máxima igual à largura do elemento pai.
Para construir uma tabela com uma largura específica em pixels, escreva:
<> width = "300" > Esta tabela contém 80% da largura do contêiner.
E para construir uma tabela com uma largura que seja uma porcentagem do elemento pai, escreva:
<> width = "80%" > Esta tabela contém 80% da largura do contêiner.
Veja um exemplo de uma tabela com uma largura
Atributo TABEGO HTML 4.01 descontinuado
Existe um atributo doMESA elemento que está obsoleto no HTML 4.01 e obsoleto no HTML5:alinhar. Esse atributo permite definir onde a tabela deve estar localizada na página relativa ao texto que está ao lado dela. Este atributo foi substituído no HTML 4.01 e você deve evitar usá-lo. Em vez disso, você deve usar a propriedade CSS ou omargin-left: auto; emargem direita: auto; Estilos oflutuador propriedade dá-lhe um resultado que está mais perto do que oalinhar atributo fornecido, mas pode afetar a maneira como o restante do conteúdo da página é exibido. omargem direita: auto; emargin-left: auto; são o que o W3C recomenda como alternativa.
Aqui está um exemplo obsoleto usando oalinhar atributo:
<> align = "right" > Esta tabela está alinhada à direita O texto flui em torno dele para a esquerda
Veja um exemplo obsoleto usando oalinhar atributo.
E para obter o mesmo efeito com um HTML válido (não depreciado), escreva:
<> style = "float: right;" > Esta tabela está alinhada à direita O texto flui em torno dele para a esquerda
O seguinte explicaMESA atributos que não fazem parte de nenhuma especificação HTML.
As informações anteriores descrevem os atributos do elemento HTML que são válidos no HTML 4.01, mas são obsoletos no HTML5.
O seguinte descreveMESA atributos 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 seus usuários usam um navegador compatível com esses elementos, você pode usar esses elementos. Mas a maioria deles não é suportada em navegadores modernos ou tem alternativas mais compatíveis com os padrões.
Nós não recomendamos o uso desses atributos nas suas tabelas HTML.
O atributo é um atributo antigo que foi incluído antes que o CSS fosse amplamente suportado. Ele permite que você mude a cor de fundo da tabela. Você pode definir um nome de cor ou um código hexadecimal. Este atributo ainda funciona em muitos navegadores, mas para HTML à prova de futuro, você não deve usá-lo e usar CSS.
A melhor alternativa para esse atributo é a propriedade style.
Para alterar a cor de fundo de uma tabela, escreva:
<> style = "background-color: #ccc;" > Esta mesa tem um fundo cinza
Semelhante aobgcolor atributo, oCor da borda atributo permite alterar a cor do atributo. Este atributo é suportado apenas pelo Internet Explorer. Em vez disso, você deve usar a propriedade de estilo border-color.
Para alterar a cor da borda da sua mesa, escreva:
style = "border-color: red;" >
Esta tabela tem uma borda vermelha.
obordercolorlight ebordercolordark Os atributos foram incluídos no Internet Explorer para permitir que você crie uma borda 3D em torno de sua tabela. No entanto, a partir do IE8 e acima, isso é suportado apenas no Modo de Padrões do IE7 e no Modo de Quirks. A Microsoft afirma que essas propriedades não são mais suportadas.
Por um curto período de tempo,cols atributo noMESA O elemento 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 tabelas grandes. No entanto, ele foi implementado apenas pelo Internet Explorer e, a partir do IE8, isso é suportado apenas no Modo de Padrões do IE7 e no Modo de Quirks.
Porque existe umlargura atributo (obsoleto em HTML5) muitas pessoas assumiram que havia umaltura atributo para tabelas também. Mas porque as tabelas estão de acordo com a largura de seu conteúdo ou a largura definida no CSS oulargura atributo, a altura não pode ser restringida. Então, em vez disso, os navegadores permitiramaltura atributo para definir a altura mínima da tabela. Se a mesa fosse mais alta que essa altura, seria mais alta. Mas você deve usar a propriedade
Com o CSSaltura propriedade que você pode restringir a altura se você usar a propriedade CSS também para definir o que acontece com qualquer excesso de conteúdo.
Para definir a altura mínima em uma tabela, escreva:
<> style = "height: 30em;" > Esta tabela tem pelo menos 30 metros de altura.
Os dois atributos e acrescentou espaço 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 para 20 pixels e o espaço horizontal para 40 pixels, escreva:
<> style = "margin: 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 ser agrupado na borda do elemento ou da janela pai ou se deve forçar a rolagem horizontal. Em vez disso, você deve definir as características de quebra automática de cada célula da tabela usando a propriedade CSS.
Para fazer uma coluna com muito texto não quebrar, escreva:
<> style = "espaço em branco: nowrap;" > Esta é uma coluna com uma tonelada de conteúdo. Mas mesmo que seja maior que o contêiner, o texto não deve ser quebrado na próxima linha, mas 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 se alinhar verticalmente dentro da célula. Em vez desse atributo inválido, você deve usar a propriedade CSS em cada célula para a qual deseja alterar o alinhamento. 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 alinhar-se ao fundo (em vez do meio, como padrão), escreva:
Esta célula é mais longa que o resto e assim forçará a altura a ser mais alta. Então você verá que a célula alinhada verticalmente está alinhada ao fundo. <> style = "vertical-align: bottom;" > Conteúdo na parte inferior. Conteúdo no meio.
