Wprowadzenie do tagów tabeli HTML

Tabela HTML zapewnia sposób uzyskiwania lub definiowania danych, takich jak tekst, obrazy, łącza itp. Pod względem wierszy i kolumn komórek. Tabele HTML można tworzyć za pomocą

etykietka. Domyślnie dane tabeli są wyrównane do lewej. W tym temacie dowiemy się o znacznikach tabeli HTML.

Tabelę można utworzyć za pomocą

tagi.

  • The
znacznik określa wiersze tabeli, które są używane do utworzenia wiersza.

Dane tabeli można uporządkować w ramach

, , i
Tag definiuje nagłówek tabeli.
  • The
    		• znacznik określa komórki danych tabeli, które są używane do utworzenia kolumny.
  • The
    • zawartość tabeli
    z licznymi elementami stołu.

    Składnia














    Nagłówek tabeli 1Nagłówek tabeli 2
    Komórka danych 1Komórka danych 2
    Komórka danych 3Komórka danych 4

    Przykłady tagów tabeli HTML

    Oto przykłady tagów tabeli HTML podane poniżej

    1. Podstawowe użycie tabeli



    HTML Table Tag Usage


















    NazwaKraj
    DhoniIndie
    David MillerAfryka Południowa
    Joe RootAnglia

    Zapisz kod z rozszerzeniem .html i otwórz go w przeglądarce. Wyświetli następujące dane wyjściowe:

    2. Podpis w tabeli

    Podpis tabeli można określić za pomocą znacznika < caption > .

    Przykład



    HTML Table Tag Usage


    To jest podpis tabeli
















    NazwaKraj
    DhoniIndie
    David MillerAfryka Południowa
    Joe RootAnglia

    Powyższy kod wyświetli poniższe dane wyjściowe:

    3. Odstępy między komórkami tabeli

    Przestrzeń komórek tabeli można zdefiniować za pomocą atrybutu odstępu komórek. Atrybut odstępu komórek określa przestrzeń między komórkami tabeli.

    Przykład



    HTML Table Tag Usage


















    NazwaKraj
    DhoniIndie
    David MillerAfryka Południowa
    Joe RootAnglia

    Powyższy kod wyświetli następujące dane wyjściowe:

    4. Wypełnienie komórki tabeli

    Dopełnienie komórek tabeli można zdefiniować za pomocą atrybutu cellpadding. Odległość atrybutu padania komórek między ramką komórki tabeli a danymi.

    Przykład



    HTML Table Tag Usage


















    NazwaKraj
    DhoniIndie
    David MillerAfryka Południowa
    Joe RootAnglia

    Powyższy kod wyświetli poniższe dane wyjściowe:

    5. Atrybuty rozpiętości kolumny i wiersza

    Dwa lub więcej wierszy tabeli można połączyć w jeden wiersz za pomocą atrybutu rowspan, a kolumny tabeli można połączyć w jedną kolumnę za pomocą atrybutu colspan.

    Przykład



    HTML Table Tag Usage



















    Kolumna pierwszaKolumna drugaKolumna trzecia
    Rząd pierwszyRząd drugiRząd trzeci
    Rząd czwartyRząd piąty
    Rząd szósty

    Kod wyświetli następujące dane wyjściowe:

    6. Tło dla tabeli

    Tło tabeli można utworzyć za pomocą atrybutu bgcolor. Obramowanie komórki tabeli można określić za pomocą atrybutu border-color.

    Przykład



    HTML Table Tag Usage


















    NazwaKraj
    DhoniIndie
    David MillerAfryka Południowa
    Joe RootAnglia

    Wykonaj powyższy kod, aby wyświetlić poniższe dane wyjściowe:

    7. Wysokość i szerokość stołu

    Wysokość i szerokość stołu można ustawić za pomocą atrybutów width i height.

    Przykład



    HTML Table Tag Usage


















    NazwaKraj
    DhoniIndie
    David MillerAfryka Południowa
    Joe RootAnglia

    Powyższy kod wyświetli następujące dane wyjściowe:

    8. Stylowanie komórek tabeli

    Przykład



    HTML Table Tag Usage

    table, th, td (
    border: 1px solid red;
    border-collapse: collapse;
    )
    th, td (
    padding: 15px;
    )
    table#mytable tr:nth-child(even) (
    background-color: #FAD7A0;
    )
    table#mytable tr:nth-child(odd) (
    background-color: #E67E22;
    )
    table#mytable th (
    color: white;
    background-color: teal;
    )


















    NazwaKraj
    DhoniIndie
    David MillerAfryka Południowa
    Joe RootAnglia

    Wykonaj powyższy kod, otrzymasz następujące dane wyjściowe:

    8. Zagnieżdżone tabele

    Możesz użyć jednej tabeli w drugiej tabeli nazywa się tabelą zagnieżdżoną.

    Rozważmy poniższy przykład dla tabeli zagnieżdżonej:

    Przykład



    HTML Table Tag Usage























    NazwaKraj
    DhoniIndie
    David MillerAfryka Południowa
    Joe RootAnglia

    Powyższy kod wyświetli następujące dane wyjściowe:

    Atrybuty tabeli

    • align: ten atrybut zapewnia wyrównanie zawartości wewnątrz elementu.
    • bgcolor: ten atrybut określa kolor tła dla tabeli.
    • border: ten atrybut określa granicę dla komórek tabeli.
    • cellpadding: Ten atrybut wyświetla dopełnienie między komórkami tabeli a zawartością tabeli.
    • odstęp komórek: ten atrybut wyświetla przestrzeń między komórkami tabeli.
    • ramka: określa, które części granic zewnętrznych są widoczne.
    • reguły: Określa, które części wewnętrznych granic są widoczne.
    • sortable: ten atrybut informuje, że tabela jest sortowalna.
    • Podsumowanie: określa, jaki typ zawartości tabeli jest obecny.
    • szerokość: ten atrybut określa szerokość tabeli.
    • wysokość: ten atrybut określa wysokość tabeli.

    Wniosek

    Do tej pory badaliśmy różne typy znaczników tabeli w HTML. Przykłady pokazują użycie stylizacji tabeli, zagnieżdżanie jednego stołu w innym stole, ustawianie wysokości i szerokości stołu, dodawanie odstępów i dopełniania dla komórek tabeli, stosowanie koloru tła dla tabeli i wiele innych.

    Polecane artykuły

    To jest przewodnik po tagach tabeli HTML. Tutaj omawiamy przykłady tagów tabeli HTML ze składnią i atrybutami tabeli. Możesz także zapoznać się z następującymi artykułami, aby dowiedzieć się więcej -

    1. Elementy formularza HTML
    2. Twórz tabele w HTML
    3. Tagi graficzne HTML
    4. Co to jest HTML
    5. Ramki HTML
    6. Bloki HTML
    7. Ustaw kolor tła w HTML za pomocą przykładu

    Kategoria:

    Narzędzia programistyczne