Mostrar dados SQL na tabela HTML Javascript

| | | | |

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:

Screen Shot 2020 03 24 at 09.50.10 1

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:

Screen Shot 2020 03 24 at 09.53.50

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:

Screen Shot 2020 03 24 to 09.55.49

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:

Screen Shot 2020 03 24 At 09.58.18

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:

Captura de tela 2020 03 24 às 10.00.26

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:

 Screen Shot 2020 03 24 a 08/10.03 1  Screen Shot 2020 03 24 at 10.08.03 1

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:

Screen Shot 2020 03 24 A 10.03.04

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:

Scre in Shot 2020 03 24 to 10.05.40

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method