Opbygning af en datatabel i WordPress betyder normalt at kæmpe med HTML eller indsætte en shortcode, du ikke kan style. Den gratis Dynamisk tabel-widget i Master Addons til Elementor lader dig bygge en visuelt: Tilføj overskriftskolonner, udfyld rækker, og stil hver del fra Elementor-panelet. Ingen tabelmarkering, ingen plugin-lock-in.
Det passer til alt, der hører hjemme i et gitter, som medarbejdermapper, spec-ark, tidsplaner eller prislister. Du kan flette celler, tilføje ikoner til overskrifter, stribe rækkerne og tænde en responsiv tilstand for telefoner. Nedenfor er en kørsel gennem hver indstilling, fra overskriftscellerne til stylingfanerne.
Hvad Dynamic Table-widgetten gør #
Widgetten bygger en standard HTML-tabel fra to repeatere: en til overskriftsrækken og en til kropscellerne. Hver celle er sit eget element, så du styrer teksten, justeringen og endda kolonne- eller rækkespændene uden at skrive nogen kode.
Den har tre faner: Indhold til overskriften, kroppen og indstillingerne, Stil for farver og mellemrum og Avanceret til de sædvanlige Elementor-indstillinger. Resultatet er en ren, responsiv tabel, der matcher dit tema.
Før du starter #
- WordPress med elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
- De data, du vil vise, skitseret som kolonner og rækker.
Sådan tilføjes Dynamic Table-widgetten #
I Elementor-editoren skal du åbne Elementer panel og søg efter Dynamisk tabel, eller rul til afsnittet Mastertilføjelser. Træk det over på din side. Det indlæses med en eksempeltabel, så du redigerer fra et fungerende layout i stedet for et tomt gitter.
Opsæt tabeloverskriften #
Åbn tilfreds fane. Den Bordhoved sektion holder overskriftsrækken. Den Bordhoved skift viser eller skjuler overskriften, og Tabeloverskriftscelle repeater indeholder et element pr. kolonne.
Hver overskriftscelle har sine egne underfaner Indhold og indstillinger. Ind tilfreds du indstiller Kolonnenavn og kan tilføje en Ikon eller en spejlbillede ved siden af (Type: Ingen, Ikon eller Billede). Brug Tilføj vare for at tilføje kolonner, kopiikonet for at duplikere en, og X for at fjerne det.
Udfyld bordkroppen #
de Bord Krop afsnit holder cellerne. Hvert element er én celle, og en Ny række? skift mærker, hvor en ny række begynder, så du tilføjer celler i rækkefølge og markerer starten af hver række.
Hver kropscelle har også underfaner Indhold og indstillinger:
- Kropstekst: celleindholdet, som også accepterer dynamiske tags. Hvert tag fylder én celle.
- Kolonnespændvidde og rækkespændvidde: flette en celle på tværs af kolonner eller rækker.
- Brugerdefineret bredde: indstil en fast bredde for den pågældende kolonne.
- Justering: venstre, center, højre eller retfærdiggør i cellen.
- Dekoration: understreg, overstreg eller streg igennem for celleteksten.
Hvis du vil vokse tabellen, skal du klikke på Tilføj vare, skriv celleteksten, og slå til Ny række? på den første celle i hver ny linje. Her tilføjes en femte medarbejderrække.
Gør bordet responsivt #
de Indstillinger sektion har en Responsivt bord? skift. Med den tændt flyder bordet igen på små skærme i stedet for at flyde over, så hver række stables ind i et læsbart kort på enheder op til 768px bred, med kolonnenavnet vist som en etiket. Dette er indstillingen, folk glemmer, og det er derfor, en tabel ser brudt ud på mobilen.
Style bordet #
de måde tab opdeles i Global stil, Tabel Header Style, og Bord Krop, plus Mønstre (en Pro-mulighed). Den Global stil afsnittet indstiller det borddækkende udseende.
- Stribet Bord: slå zebrastriber til, og vælg den stribede rækkefarve.
- Baggrundsfarve: grundfarven bag cellerne.
- Indvendig cellepolstring: rummet inde i hver celle.
- Border Type og Border Radius: linjerne mellem celler og de afrundede hjørner.
Header og krop styling #
de Tabel Header Style sektion indstiller overskriftens baggrund, tekstfarve, typografi og udfyldning, så den øverste række skiller sig ud. Den Bord Krop sektion gør det samme for datacellerne.
- Baggrundsfarve og tekstfarve: kropscellernes farver.
- Ikonstørrelse, Ikonfarve og Ikonpolstring: styling til alle celleikoner.
- Justering og typografi: hvordan brødteksten sidder og ser ud.
Resultatet på siden #
Udgiv eller forhåndsvisning, og tabellen gengives med dine kolonner, rækker og striber på plads, lydhør på mobilen, hvis du har slået det til.
Almindelige brugstilfælde #
- Medarbejder- eller teamfortegnelser med navne, roller og kontaktoplysninger.
- Spec ark sammenligning af produktegenskaber og værdier.
- Tidsplaner og tidsplaner til undervisning, arrangementer eller kontortid.
- Prislister der ikke behøver en fuld prisfastsættelsestabel.
- Dataresuméer trukket ud af et regneark til et stylet gitter.
Tips til at arbejde med Dynamic Table-widget #
- Planlæg kolonner først. Indstil hver overskriftscelle, før du fylder kroppen, så rækkerne flugter.
- Markér kun New Row på den første celle. Markér starten af hver række, ikke hver celle, eller layoutet går i stykker.
- Tænd Responsive Table til telefoner. Brede tabeller flyder over på mobilen, medmindre dette er tændt.
- Brug striber til langborde. Zebrarækker gør en høj datatabel meget nemmere at scanne.
- Hold celletekst kort. Lange strenge strækker en kolonne, så brug Brugerdefineret bredde for at holde tingene lige.
Ofte stillede spørgsmål #
Hvad er Dynamic Table-widget i Master Addons?
Det er en Elementor widget, der bygger en HTML datatabel visuelt. Du tilføjer header kolonner og kropsceller gennem repeatere, derefter style farverne, polstring, grænser, og striping fra panelet. Der er ingen HTML eller shortcode involveret, og tabellen kan gøres lydhør.
Kan jeg flette celler i den dynamiske tabel?
Ja. Hver brødtekstcelle har indstillinger for kolonnespændvidde og rækkespænd i sin underfane Indstillinger. Indstil et spænd for at flette den pågældende celle på tværs af flere kolonner eller rækker, hvilket er nyttigt til grupperede overskrifter eller oversigtsrækker inde i tabellen.
Er Dynamic Table responsiv på mobil?
Ja. Afsnittet Indstillinger har en Responsive Table-skift. Med den tændt flyder bordet igen på små skærme, så hver række stables i en læsbar blok i stedet for at flyde over siden, hvilket holder brede tabeller brugbare på telefoner.
Kan jeg tilføje stribede rækker til bordet?
Ja. I fanen Stil har sektionen Global stil en stribet bordskift og en stribet baggrundsfarve. Slå den til for at tilføje zebrastriber, som skifter rækkefarven og gør lange tabeller meget nemmere at læse.
Kan jeg tilføje ikoner til tabeloverskrifterne?
Ja. Hver overskriftscelle har en Type-indstilling med Ingen, Ikon eller Billede. Vælg Ikon for at vælge en fra ikonbiblioteket, eller Billede for at uploade et billede. Ikonet viser ved siden af kolonnenavnet, som hjælper med at mærke kolonner som e-mail, telefon eller placering på et øjeblik.
Kan jeg sortere, søge eller importere en CSV til den dynamiske tabel?
Nej. Widgetten har ingen sortering, søgning, paginering eller CSV-import. For dem skal du bruge et datatabel plugin som TablePress og placere sin shortcode på siden.
Indpakning #
de Dynamisk tabel-widget forvandler rækker og kolonner med data til en ren, stylet tabel uden at røre HTML. Indstil dine overskrifter, tilføj kropscellerne, markér hver ny række, og stil derefter farverne, stribningen og kanterne, så de passer til din side. For relaterede datalayouts, se Sammenligning Tabel widget (Pro) og Prissætning Tabel widget, gennemse hele Master Addons widgets og udvidelser, og kontrollere de prissætning side for hvad hver plan indeholder.
