Pokaż dane sql w tabeli HTML JavaScript

| | | | |

Na początku tworzenia stron internetowych tabele HTML były bardzo proste i brakowało im rozbudowanych opcji stylizacji. Jednak obecnie większość tabel jest stylizowana tak, aby zapewnić użytkownikom bardziej estetyczne i funkcjonalne wrażenia.

CSS zapewnia zestaw atrybutów stylu tabeli. Atrybuty te umożliwiają między innymi oddzielanie komórek tabeli, określanie obramowań tabeli oraz określanie szerokości i wysokości tabeli.

Ten samouczek wyjaśni z przykładami, jak stylizować tabelę za pomocą CSS . Pod koniec tego samouczka będziesz ekspertem.

Tabele HTML

Kod HTML definiuje strukturę tabel. Użyj znacznika

, aby zdefiniować tabelę. Tagi ,
i określają odpowiednio wiersze, nagłówki tabeli i komórki zawartości.

Przyjrzyjmy się przykładowej tabeli HTML. W poniższym przykładzie mamy tabelę z listą pięciu najlepszych książek na liście bestsellerów New York Times w tygodniu od 23 marca 2020 r.:

Zrzut ekranu 2020 03 24 o 09.50.10 1

Kod naszej tabeli wygląda następująco:

Ta tabela ma trzy kolumny i sześć wierszy, w tym wiersz „on”. Twój umysł.

Tabele CSS

CSS służy do stylizowania tabel. Chociaż powyższa tabela przedstawia dane w zorganizowany sposób, są one napisane w zwykłym HTML (nie ma stylów). Korzystając z CSS, możesz poprawić wygląd tabel.

Istnieje wiele funkcji CSS, których możesz użyć do styl tabeli. Za pomocą CSS możesz:

  • dodawać obramowania
  • kompresować obramowania
  • dostosować odstępy obramowania
  • dostosować szerokość i wysokość tabela
  • dodaj dopełnienie
  • wyrównaj tekst w poziomie
  • wyrównaj tekst w pionie
  • dodaj funkcję myszy jog (najechanie kursorem)
  • ustaw kolory komórek
  • ustaw sposób wyświetlania pustych komórek

Wszystkie te tematy omówimy w poniższej dyskusji.

Obramowania

Załóżmy, że chcemy dodać obramowanie wokół tablicy lub elementów, które ona zawiera.

Aby dodać obramowanie, możemy użyć właściwości border. Oto przykład, w którym właściwość border służy do dodawania obramowań do tabeli i jej komórek, w tym komórek nagłówka:

W naszym kodzie definiujemy jednolitą czarną ramkę o szerokości 1 piksela. Oto wynik naszego kodu:

Zrzut ekranu 2020 03 24 o 09.53.50

Zauważ, że nasza tabela zawiera podwójne Borders Dzieje się tak, ponieważ zastosowaliśmy obramowanie do samej tabeli (

), jej nagłówków (
) i jej komórek (). podwójne obramowania do pojedynczych obramowań, możemy użyć właściwości border-collapse.

Właściwość border-collapse konwertuje podwójne obramowania tabeli na pojedyncze obramowania.Domyślna wartość własności border-collapse jest zwijana.Jeżeli własność border-collapse otrzymuje wartość zwiń , obramowania wokół tablicy zostaną zwinięte.

Oto przykład właściwości b command-collapse w działaniu:

Nasz kod zwraca:

„Zrzut

Nasza tabela i jej zawartość mają teraz jedno obramowanie.

Border Spac pol

Właściwość border-spacing służy do definiowania odstępów między komórkami w tabeli. Właściwość border-spacing definiuje odstępy w poziomie i w pionie między komórki - i robi to w tej kolejności.

Oto przykład użycia właściwości border-spacing w naszej tabeli początkowej (tej bez zwiniętych ramek):

Nasz kod zwraca:

Zrzut ekranu 2020 03 24 At 09.58.18

Każda z naszych komórek ma odstęp 10px w poziomie i pionowe obramowania.

Szerokość i wysokość

Szerokość i wysokość tabeli oraz jej właściwości można określić za pomocą atrybutów szerokości i wysokości .

Załóżmy, że chcemy, aby szerokość naszej tabeli powyżej (tej z zwiniętymi obramowaniami) była szerokością samej strony internetowej i załóżmy, że chcemy, aby wysokość nagłówka każdej tabeli była wysoka na 30 pikseli. Możemy to zrobić używając następującego kodu CSS:

Nasz kod zwraca:

Zrzut ekranu 2020 03 24 o godzinie 10.00.26

Jak widać, nasza tabela ma teraz szerokość strony internetowej. Ponadto nagłówki kolumn w naszej tabeli mają wysokość 30 pikseli.

Padding

Możesz użyć właściwości padding, aby dodać trochę przestrzeni między krawędziami komórki w tabeli i zawartość tych komórek. Właściwość padding może być używana w tagach

i .

Załóżmy, że chcemy dodać dopełnienie 10 pikseli wokół komórki zawartość naszej tabeli, w tym komórki nagłówka. Możemy to zrobić za pomocą tego kodu:

Nasz kod zwraca:

 Zrzut ekranu 2020 03 24 do 08/10.03 1  Zrzut ekranu 2020 03 24 w 10.08.03 1

Zawartość każdego z wierszy i nasza tabela nagłówków teraz mieć dopełnienie 10px na wszystkich krawędziach.

Wyrównanie tekstu w poziomie

Właściwość text-align umożliwia wyrównanie tekstu przechowywanego w lub

w domyślnie, elementy są wyrównane do środka, a elementy są wyrównane do lewej.

Najczęściej używane wartości atrybutu wyrównania tekstu to:< br>

  • lewy, środek, prawy (obsługiwane przez wszystkie przeglądarki z wyjątkiem Microsoft Edge i Internet Explorer)
  • początek i koniec (obsługiwane przez wszystkie przeglądarki z wyjątkiem Microsoft Edge i Internet Explorer) )

Załóżmy, że chcemy wyśrodkować elementy

w naszej tablicy i wyrównać elementy do lewej strony każdej komórki. Możemy to zrobić za pomocą tego kodu:

Nasz kod zwraca:

Zrzut ekranu 2020 03 24 Do 10.03.04

W tym przykładzie wyśrodkowaliśmy tekst poza komórką. `tekst nagłówka i komórki nagłówka są wyrównane do lewej.

Pionowe wyrównanie tekstu

CSS Właściwość vertical-align jest używana do określenia pionowego wyrównania treści w

lub . Domyślnie wartość właściwości wyrównania w pionie jest ustawiona na middle , co oznacza, że zawartość jest wyrównana w pionie do środka komórki.

Załóżmy, że chcemy wyrównać tekst w naszych komórkach

do dołu komórek. W takim przypadku robimy to za pomocą tego kodu:

Nasz kod zwraca:

Scre in Shot 2020 03 24 do 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