Mostrar dados SQL na tabela HTML Javascript

Michael Zippo

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

para definir uma tabela. As tags ,

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 tabelas CSS é 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: adicionar bordas comprimir bordas ajustar o espaçamento das bordas ajustar a largura e a altura de uma tabela adicionar preenchimento alinhar texto horizontalmente alinhar texto verticalmente adicionar função de movimento do mouse (passar o mouse) defina as cores das células defina como as células vazias serão exibidas Vamos abordar todos esses tópicos na discussão abaixo. Borders Suponha 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 (), seus cabeçalhos (	) e suas células (	). Bordas duplas para bordas simples, podemos usar a propriedade border-collapse. 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 `recolher` , as bordas ao redor de uma matriz serão recolhidas. 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. Border Spac por 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. Largura e altura 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. Preenchimento 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	e	. 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. Alinhamento horizontal de texto Você pode usar a propriedade text-align para alinhar o texto armazenado em um ou	em uma matriz. Por padrão, os elementos	são alinhados ao centro e os elementos	são alinhados à esquerda. Os valores mais comumente usados ‚Äã‚Äão do atributo de alinhamento de texto são:< br> esquerda, centro, direita (suportado por todos os navegadores, exceto Microsoft Edge e Internet Explorer) início e fim (suportado por todos os navegadores, exceto Microsoft Edge e Internet Explorer) ) Suponha que queremos centralizar os elementos	em nosso array e alinhar os elementos	à esquerda de cada célula. Podemos fazer isso usando este código: 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. Alinhamento vertical do texto CSS A propriedade vertical-align é usada para especificar o alinhamento vertical do conteúdo no	ou	. Por padrão, o valor da propriedade de alinhamento vertical é definido como `meio` , o que significa que o conteúdo é alinhado verticalmente no centro da célula. Suponha que queremos alinhar o texto em nossas células	na parte inferior das células. Pos nós fazemos isso usando este código: Nosso código retorna:

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 tabelas

CSS é 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:

adicionar bordas
comprimir bordas
ajustar o espaçamento das bordas
ajustar a largura e a altura de uma tabela
adicionar preenchimento
alinhar texto horizontalmente
alinhar texto verticalmente
adicionar função de movimento do mouse (passar o mouse)
defina as cores das células
defina como as células vazias serão exibidas

Vamos abordar todos esses tópicos na discussão abaixo.

Borders

Suponha 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 (), seus cabeçalhos (

) e suas células (

). Bordas duplas para bordas simples, podemos usar a propriedade border-collapse.

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 recolher , as bordas ao redor de uma matriz serão recolhidas.

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.

Border Spac por

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.

Largura e altura

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.

Preenchimento

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.

Alinhamento horizontal de texto

Você pode usar a propriedade text-align para alinhar o texto armazenado em um ou

em uma matriz. Por padrão, os elementos

são alinhados ao centro e os elementos

são alinhados à esquerda.

Os valores mais comumente usados ‚Äã‚Äão do atributo de alinhamento de texto são:< br>

esquerda, centro, direita (suportado por todos os navegadores, exceto Microsoft Edge e Internet Explorer)
início e fim (suportado por todos os navegadores, exceto Microsoft Edge e Internet Explorer) )

Suponha que queremos centralizar os elementos

em nosso array e alinhar os elementos

à esquerda de cada célula. Podemos fazer isso usando este código:

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.

Alinhamento vertical do texto

CSS A propriedade vertical-align é usada para especificar o alinhamento vertical do conteúdo no

. Por padrão, o valor da propriedade de alinhamento vertical é definido como meio , o que significa que o conteúdo é alinhado verticalmente no centro da célula.

Suponha que queremos alinhar o texto em nossas células

na parte inferior das células. Pos nós fazemos isso usando este código:

Nosso código retorna: