Sådan bruges TablePress med Elementor (Widget + Shortcode)

Nøgle takeaways

• TablePress fungerer sammen med Elementor på to måder: en widget med navnet TablePress-tabel, som TablePress 3.4 tilføjer til Elementor-panelet, og kortkoden [tabel-id=1 /] placeret i Shortcode-widgetten.
• TabelPress-tabelwidgetten i Elementor har en tabel-rullemenu og et konfigurationsparameterfelt, og den har ingen stilfane.
• TablePress slår sortering, søgning og paginering til for besøgende som standard med 10 rækker pr. side.
• Vandret rulning er som standard slået fra i TablePress, så en tabel med fem kolonner løber over på en 390px-telefon, indtil du sætter kryds i tabellens indstillinger.
• For en kort tabel, der skal redigeres og styles inde i Elementor, er en tabelwidget såsom Master Addons Dynamic Table mindre arbejde end TablePress.

TablePress og Elementor arbejder sammen uden noget bridge-plugin. Du bygger tabellen i TablePress, og placerer den derefter på en Elementor-side med TablePress-tabelwidget eller med en kortkode. Tabellen holder sin sortering, søgning og paginering.

Denne vejledning dækker både metoder, styling og indstillingen, der fikser brede borde på telefoner. Der står også, når en almindelig bordwidget er det bedre valg. Alt her blev testet med TablePress 3.4 og Elementor 4.3.

Trin 1: Opret eller importer tabellen i TablePress

Selve bordet er lavet uden for Elementor, på TablePress-skærmene i WordPress-dashboardet.

1. Installer og aktiver TablePress fra plugins, Tilføj ny.
2. åbne lukke op TablePress i dashboardmenuen.
3. Hvis du vil skrive en tabel, skal du klikke på Tilføj Ny, angive et navn, indstille antallet af rækker og kolonner og udfylde cellerne.
4. Hvis du vil hente et regneark, skal du klikke på betyde, vælge Fil Upload, vælg filen, behold Tilføj som ny tabel og klik betyde.
5. Bemærk tabellens ID. Den første tabel er ID 1.

TablePress importerer Excel, CSV, HTML og JSON filer. Vi importerede en seks-rækket CSV af forsendelsespriser, og det ankom med den første række allerede indstillet som overskrift.

Trin 2: Tilføj det med tabelwidgetten TablePress

TablePress registrerer sin egen Elementor-widget, så denne metode behøver ingen shortcode.

1. Rediger din side med Elementor.
2. Søg i widgetpanelet efter TabelPress tabel.
3. Træk widgetten ind i en beholder.
4. Åbn Table dropdown og vælg dit bord. Tabeller er angivet efter ID og navn.
5. Udgiv siden.

de fremskreden afsnit under dropdownen rummer ét felt, Konfigurationsparametre. Det accepterer de samme parametre, du ville sætte i en shortcode, for tilfælde, hvor en side skal vise tabellen med forskellige muligheder.

Eller tilføj det med en shortcode

Shortcoden udfører det samme job og fungerer overalt, hvor kortkoder gør.

1. Drag Elementor's Shortcode widget ind i en container.
2. skrift [table id=1 /], udskiftning af 1 med dit bord's ID.
3. Klik Ansøg for at indlæse forhåndsvisningen.

På vores testside widget og shortcode udskrevet den samme tabel. Brug widget, når du kan, fordi plukning fra en dropdown undgår stavefejl i ID.

Sortering, søgning og paginering

Disse er slået til for hver ny tabel. Du ændrer dem pr. tabel, i boksen med navnet Tabelfunktioner for webstedsbesøgende på bordets redigeringsskærm.

For en tabel med seks rækker er søgning og paginering rod. Fjern markeringen i dem, og tabellen vises som et almindeligt gitter.

Styling af en TablePress-tabel i Elementor

TabelPress-bordwidgetten har ingen kontrolelementer til tabelstyling i Elementor, så udseendet er indstillet tre andre steder.

• Tabelindstillinger på tabellens redigeringsskærm: hvilke rækker er sidehovedet og sidefoden, Vekslende rækkefarver, Række Hover Fremhævning, og en Ekstra CSS-klasser field.
• Brugerdefineret CSS for farver, skrifttyper og kanter. TablePress giver hver tabel en klasse baseret på dens id, så du kan målrette mod én tabel.
• Widgettens fane Avanceret i Elementor til margin, polstring og bredde omkring bordet.

Et kort CSS-eksempel, der genstiller overskriften til tabel 1:

.tablepress-id-1 thead th {
  background: #101223;
  color: #ffffff;
}
.tablepress-id-1 tbody td {
  padding: 12px 16px;
}

Indsæt det i Udseende, Tilpas, Yderligere CSS, eller i enhver brugerdefineret CSS boks din opsætning har. Elementor Pro har en pr element, og Master Addons Brugerdefineret CSS-udvidelse tilføjer også en.

Fix bordet på telefoner

På en 390px bred telefon løb vores fem-søjlede bord forbi højre kant af skærmen, og den sidste kolonne kunne ikke læses.

1. Rediger tabellen i TablePress.
2. under Tabelfunktioner for webstedsbesøgende, tik Vandret rulning.
3. Klik Gem ændringer og genindlæs siden på din telefon.

TablePress sælger også en Responsive Tables funktion i sin Pro plan ($ 89 om året, da vi tjekkede), med tilstande, der stabler eller kollapser rækker på små skærme. Andre måder at håndtere brede tabeller på er i vores guide til responsive tabeller i Elementor.

Når en tabel widget er det bedre valg

TablePress er bygget til data. For en lille tabel, der virkelig er en del af sidedesignet, tilføjer den trin: en anden admin-skærm, CSS et andet sted og et plugin til at holde sig opdateret.

Mangler du kun et lille bord? de Dynamisk tabel-widget bygger det i Elementor-panelet med en stilfane og rækker, der stables på telefoner.

Dynamic Table har ingen sortering, søgning eller import, så brug TablePress til data og widget til layouttabeller som f.eks. en tidsplan eller et spec-ark. De andre muligheder sammenlignes i vores Elementor bord plugins roundup.

Ofte stillede spørgsmål

Endelige tanker

TablePress og Elementor passer godt sammen til datatabeller: Importer filen, slip i TablePress tabel widget, og husk at slå Vandret rulning til telefoner. Styling tager lidt CSS, fordi widgetten ikke har nogen Style fane.

For korte tabeller, der skal ligne en del af siden, Dynamisk tabel holder cellerne og stylingen inde i Elementor.

Relateret læsning

• Sådan oprettes en tabel i Elementor (4 måder)
• Bedste indholdsfortegnelse plugins til WordPress