Nos primórdios do desenvolvimento web, as tabelas HTML eram muito simples e careciam de amplas opções de estilo. Hoje, no entanto, a maioria das tabelas é estilizada para criar uma experiência mais estética e funcional para os usuários.
CSS fornece um conjunto de atributos de estilo de tabela. Esses atributos permitem, entre outras coisas, separar as células da tabela, especificar as bordas da tabela e especificar a largura e a altura da tabela.
Este tutorial explicará, com exemplos, como estilizar uma tabela usando CSS . Ao final deste tutorial, você será um especialista.
Tabelas HTML
O código HTML define a estrutura das tabelas. Use a tag
| e | especificam respectivamente linhas, cabeçalhos de tabela e células de conteúdo. Vejamos um exemplo de tabela HTML. No exemplo abaixo, temos uma tabela listando os cinco livros mais vendidos na lista de mais vendidos do New York Times para a semana de 23 de março de 2020:  O código para nossa tabela é o seguinte: Esta tabela tem três colunas e seis linhas, incluindo uma linha de `on sua mente. CSS de tabelasCSS é usado para estilizar tabelas. Embora a tabela acima mostre os dados de forma organizada, ela está escrita em HTML simples (não há estilos). Usando CSS, você pode melhorar a aparência das tabelas. Existem muitas funções CSS que você pode usar para estilize uma mesa. Usando CSS você pode:
Vamos abordar todos esses tópicos na discussão abaixo. BordersSuponha que queremos adicionar bordas ao redor do array ou ao redor dos elementos que ele contém. Para adicionar bordas, podemos usar a propriedade border. Aqui está um exemplo que usa a propriedade border para adicionar bordas a uma tabela e suas células, incluindo células de cabeçalho: Em nosso código, definimos uma borda preta sólida, com 1 pixel de largura. Aqui está o resultado do nosso código:  Observe que nossa tabela contém double bordas Isso porque aplicamos uma borda na própria tabela ( A propriedade border-collapse converte as bordas duplas de uma tabela em bordas simples. O valor padrão da propriedade border-collapse é recolhido. Se a propriedade border-collapse receber o valor Aqui está um exemplo da propriedade b command-collapse em ação: Nosso código retorna: Nossa tabela e seu conteúdo agora têm uma única borda. Você pode usar a propriedade border-spacing para definir o espaçamento entre as células em uma tabela. A propriedade border-spacing define o espaçamento horizontal e vertical entre células - e ele faz isso nessa ordem. Aqui está um exemplo usando a propriedade border-spacing em nossa tabela inicial (aquela sem bordas recolhidas): Nosso código retorna: Cada uma de nossas células tem espaçamento de 10px na horizontal e bordas verticais. Você pode especificar a largura e a altura de uma tabela e suas propriedades usando os atributos de largura e altura . Suponha que queremos que a largura de nossa tabela acima (aquela com as bordas recolhidas) seja a largura da própria página da Web e suponha que queremos que a altura de cada cabeçalho de tabela tenha 30 pixels de altura. Podemos fazer isso usando o seguinte código CSS: Nosso código retorna: Como você pode ver, nossa tabela agora tem a largura de a página da Web. Além disso, os cabeçalhos das colunas em nossa tabela têm 30 pixels de altura. Você pode usar a propriedade padding para acrescentar algum espaço entre as bordas de células em uma tabela e o conteúdo dessas células. A propriedade padding pode ser usada nas tags Suponha que queremos adicionar um preenchimento de 10px ao redor da célula conteúdo de nossa tabela, incluindo células de cabeçalho. Podemos fazer isso usando este código: Nosso código retorna: O conteúdo de cada uma das linhas e nossa tabela de cabeçalhos agora tem preenchimento de 10px em todas as bordas. Você pode usar a propriedade text-align para alinhar o texto armazenado em um Os valores mais comumente usados ‚Äã‚Äão do atributo de alinhamento de texto são:< br> Suponha que queremos centralizar os elementos Nosso código retorna: Neste exemplo, centralizamos o texto fora da célula. A célula d `cabeçalho e texto da célula do cabeçalho são alinhados à esquerda. CSS A propriedade vertical-align é usada para especificar o alinhamento vertical do conteúdo no Suponha que queremos alinhar o texto em nossas células Nosso código retorna: Latest questions |
|---|
