Tabell bla med HTML og CSS

Martin Berge
Tabell bla med HTML og CSS

Når en bruker designer en database for å administrere ansattes data i et selskap, kan de fleste data og poster ikke passe inn i et enkelt ark eller tabell. For å administrere dataene, gjør brukeren arket rullet. Det er to typer “rullbar”. Den første er vertikalt rullbar, og den andre er horisontalt rullbar. Horisontalt rullbar lar brukeren bla innholdet i vinduet til venstre eller høyre. Mens den vertikale rullefeltet lar brukeren bla opp eller ned innholdet.

Dette innlegget vil oppgi:

  • Metode 1: Hvordan bord rulle horisontalt med HTML/CSS?
  • Metode 2: Hvordan tabell rulle vertikalt med HTML/CSS?

Metode 1: Hvordan bord rulle horisontalt med HTML/CSS?

For å lage en tabell rulle horisontalt med HTML/CSS, må du først designe et bord ved å bruke "

”Element. Sett deretter “høyde”Og“bredde”Av tabellen i CSS og bruk“flyte”Eiendom med verdien”bla”.

For praktiske implikasjoner, prøv den under-uttalte metoden.

Trinn 1: Legg til en div beholder

For å opprette en DIV -beholder, legg til "”Element i HTML -dokumentet.

Trinn 2: Design et bord

Neste, bruk "

”Tag for å designe en tabell for å legge til data på HTML -siden. Legg deretter til følgende attributt inne i tabellkoden:

  • “cellesport”Bestemmer plassen i tabellcellen.
  • “cellpadding”Angir rommet mellom cellens vegger og celledata. Det er en inline -attributt som brukes i tabellkoden for å overskrive CSS -stilen. Verdien av cellpadding er satt i piksler og kan spesifiseres som "1 ”eller“ 0”Som standard.
  • “grense”Brukes for å legge til plass rundt cellen.
  • Her, “bredde”Definerer cellestørrelsen i tabellelementet.

Trinn 3: Legg til data i tabellen

Deretter legger du til følgende elementer for å legge til dataene:

  • “
”Element brukes for å definere radene i tabellen.
  • “
    • Element bestemmer en celle som overskrift på en gruppe tabellceller.
  • “
    		• ”Brukes til å legge til dataene i tabellen:














    Team Sharqa -medlemmerTeam Adnan -medlemmerTeam Usama -medlemmer


































    SharqaAdnanUsama
    Hafsa AreejZara
    Farah MinhalZainab
    MariaAneesFaiza
    UmarTaimoorAwais
    Farhan HammadAliyan
    RafiaHaroonYumna
    LaibaHadiaRafia
    ShahrukhTalhadansk
    NadiaMukhNimra



    Det kan sees at bordet er lagt til vellykket:

    Trinn 5: Style Div Container

    Få tilgang til DIV -beholderen ved å bruke den definerte attributtverdien med attributtvelgeren. For å gjøre det, “#hovedinnhold”Brukes i dette scenariet:

    #hovedinnhold
    Grense: 3px Groove Blue;
    Margin: 30px 60px;
    polstring: 30px;

    Bruk deretter disse CSS -egenskapene:

    • “grense”Brukes til å definere grensen rundt elementet.
    • “margin”Bestemmer plassen utenfor det definerte elementet.
    • “polstring”Tildeler plass inne i den definerte grensen.

    Produksjon

    Trinn 6: Gjør bordet horisontalt rullbar

    Bruk nå klassenavnet for å få tilgang til bordet og bruke de under-uttalte egenskapene for å gjøre bordet horisontalt rullbar:

    .tabell-data
    Bredde: 250px;
    Høyde: 360px;
    overløp: bla;

    I henhold til den gitte koden:

    • “høyde”Og“bredde”Egenskaper brukes til innstillinger på størrelsen på elementet.
    • “flyte”Kontrollerer det som skjer med innhold som er langvarig å passe inn i et område.

    Produksjon

    Trinn 7: Stilbord

    For å style bordet, få tilgang til “bord”Og tabelldata med“td”:

    Tabell TD
    Farge: RGB (66, 40, 233);
    bakgrunnsfarge: RGB (243, 164, 164);

    Her:

    • “farge”Eiendom brukes til å sette fargen på teksten i et element.
    • “bakgrunn”Bestemmer fargen på baksiden av elementet.

    Trinn 6: Style Table Heading

    Få tilgang til bordet med hjelp av "th”:

    th
    bakgrunnsfarge: RGB (193, 225, 228);

    Bruk “bakgrunnsfarge”Eiendom for å sette fargen på elementets bakside.

    Metode 2: Hvordan tabell rulle vertikalt med HTML/CSS?

    For å bla på bordet vertikalt med HTML/CSS, sett tabellbredden tilgang til bordet ved hjelp av klassenavnet “.Borddata”Og bruk de under-nevnte egenskapene i kodebiten:

    .tabell-data
    Bredde: 400px;
    Høyde: 150px;
    overløp: bla;

    Her:

    • Verdien av “bredde”Eiendom er satt”400px”For å sette størrelsen på tabellen.
    • “høyde”Er satt til mindre enn breddeverdien for å gjøre det vertikalt rullbar.
    • “flyte”Eiendom brukes til å lage rulleelementet hvis elementets data er langvarig og ikke kan passe på bordet.

    Produksjon

    Det handler om bordsrullen med HTML og CSS.

    Konklusjon

    For å lage en bordsrulle med HTML og CSS, lag først et bord ved å bruke "

    ”Element. Få tilgang til bordet i CSS og bruk “høyden”, Bredde, og“flyte”Egenskaper på bordet. For det formålet, verdien av "flyte”Er spesifisert som“bla”, Som gjør elementet rullbart hvis elementets data er lengde. Denne opplæringen har forklart metoden for å designe det rullbare tabellen ved hjelp av HTML og CSS.

    PHP
    Hvordan du bruker php str_split -funksjon
    PHP Str_SPlit () -funksjonen er et nyttig verktøy for å dele opp strenger i individuelle tegn eller ...
    Simen Ødegård
    Linux -kommandoer
    Hvordan generere SSH -nøkler på Windows Top 10/Top 10 for å få tilgang til Linux -servere uten passord
    Praktisk opplæring om hvordan du genererer en SSH -tast på Windows 10 og 11 og installer den på en L...
    Anders Fjeld Moe
    C ++
    Hva er identifikatorer i C++?
    I et program brukes C ++ identifikatorer for å referere til navnene på variabler, funksjoner og matr...
    Simen Stensrud