Jak zrobić tabelę HTML w pionowo

Jak zrobić tabelę HTML w pionowo
HTML to język znaczników, który pomaga programistom tworzyć interaktywną stronę internetową, a właściwości CSS są używane, aby uczynić je bardziej responsywnymi. Może również określić, w jaki sposób będą wyświetlane elementy witryny. Mówiąc dokładniej, za pośrednictwem tabel HTML użytkownicy mogą również tworzyć i przechowywać obszerne dane w rzędach i kolumnach. HTML pozwala również na przewijanie wierszy i kolumn w pionie.

Ten post wyjaśni metodę tworzenia tabeli HTML w pionowo.

Jak zrobić tabelę HTML w pionowo?

Aby utworzyć tabelę pionowo przewijaną w HTML, najpierw zrób tabelę i dodaj odpowiednie dane. Następnie zastosuj właściwości CSS „przepełnienie-x" I "przepełnienie-y".

Właściwość „przepełnienia-X” o wartości ”ukryty”Plikuje przepełnienie. Ponadto właściwość „przepełnienia” o wartości ”zwój„Pozwoli ci przewijać w górę i w dół stołu.

Aby to zrobić, wypróbuj podane instrukcje.

Krok 1: Utwórz pojemnik „Div”

Po pierwsze, stwórz „" pojemnik. Następnie wstaw atrybut klasy jako „Div-scroll".

Krok 2: Utwórz tabelę w HTML

Aby utworzyć tabelę w HTML, postępuj zgodnie z podanymi instrukcjami:

  • Utwórz tabelę, wykorzystując „”Tag.
  • Ustaw "granica" Jak "1px”I wyrównaj tabelę w centrum za pomocą„wyrównywać" atrybut.
  • „„
  • „Znacznik jest wykorzystywany do określenia wierszy w tabeli.
  • "
  • „Znacznik służy do dodania nagłówka do stołu.
  • "
  • ”Jest wykorzystywany do wstawienia danych w tabeli:










    Nazwa ID Kategoria
    Przędzarka 01 Doker
    Herry 02 HTML/CSS
    Ożenić 03 Git
    Zgrzytliwy 04 JavaScript
    Edward 05 Okna
    Bella 06 Niezgoda
    Królik 07 Git
    Jacek 08 HTML/CSS

    Można zauważyć, że tabela została pomyślnie utworzona:

    Krok 3: Klasa dostępu i tabela

    Teraz uzyskaj dostęp do „div”Element za pomocą„.Div-scroll" Nazwa klasy. „„tabela”Służy do dostępu do elementu tabeli kontenera Div.

    Krok 4: Tabela stylu w CSS

    Aby stylizować tabelę w CSS, użyj następujących właściwości:

    .Div-scroll, tabela
    Wyściółka: 12px;
    Wysokość: 200px;
    szerokość: 500px;
    RADIUS BRAVES: 10px;
    Shadow Box: 1px 2px 1px 2px RGB (230, 229, 229);
    Margines: 15px;
    granica: 1px Solid #141313;
    kolor tła: #CBEAF8;
    Olflow-Y: Scroll;
    Overflow-X: ukryty;

    Oto opis wyżej wymienionego kodu:

    • "wyściółka„Własność jest wykorzystywana do ustawiania przestrzeni wokół elementu.
    • "wysokość„Definiuje wysokość elementu, która jest ustawiona jako„200px".
    • "szerokość”Ustawia szerokość elementu.
    • "Radiusz graniczny”Definiuje promień elementu. Pozwala użytkownikowi dodać zaokrąglony róg do elementu.
    • "Shadow Box„Właściwość ustawia ramkę cienia wokół elementu.
    • "margines”Służy do ustawienia przestrzeni wokół elementu.
    • "granica„Wysyłka jest dodawana w celu ustalenia granicy.
    • "kolor tła”Funkcja jest wykorzystywana do ustawiania koloru stołu na tylnym miejscu.
    • "przepełnienie-y”Jest ustawiony jako„zwój„Aby uczynić go pionowo przewijanym.
    • "przepełnienie-x”Określa wartość jako„ukryty".

    Można zaobserwować, że z powodzeniem uczyniliśmy tabelę pionowo przewijaną:

    Wyjaśniliśmy metodę tworzenia tabeli w pionie.

    Wniosek

    Aby stół HTML był przewidzany pionowo, najpierw utwórz tabelę, używając „

    ”Tag. Następnie zastosuj właściwości CSS, aby stylizować tabelę. Ponadto ustaw wartość „przepełnienie-x„Nieruchomość jako„ukryty" I "przepełnienie-y" Jak "zwój„Aby stół był przewijany. Ten post zapewnił procedurę tworzenia tabeli w pionie.