Sådan oprettes en tabel i Elementor (4 måder, med trin)

Nøgle takeaways

• Elementor har ingen tabel widget i kernen plugin eller i Elementor Pro, så en tabel i Elementor kommer fra HTML-kode, containere, en tabel plugin eller en addon widget.
• HTML-widgetten er måden at oprette en tabel i Elementor uden plugin: indsæt tabel-, tr-, th- og td-tags og tilføj en kort stilblok til kanter og udfyldning.
• En Grid container kan efterligne en tabel, men en 3 kolonne, 4 række tabel har brug for 12 separate Text Editor widgets, og resultatet er ikke en rigtig HTML tabel.
• TablePress 3.4 tilføjer sin egen Elementor-widget kaldet TablePress-tabel, og dens tabeller kan sorteres, søges og pagineres af besøgende.
• Master Addons Dynamic Table-widgetten bygger en ægte HTML-tabel fra overskrifts- og kropsceller i Elementor-panelet og stabler rækker i kort på enheder op til 768px brede.

For at oprette en tabel i Elementor skal du have en løsning, fordi Elementor ikke sender en tabelwidget. De fire, der fungerer, er en HTML-widget med din egen kode, en Grid-beholder, en TablePress-tabel og en addon-widget som f.eks Dynamisk tabel.

Vi byggede et bord på hver af de fire måder på Elementor 4.3 og så på hver enkelt på et skrivebord og på en telefon.

Har Elementor en bordwidget?

Nej. Søg efter “tabel” i Elementor panelet og de eneste indbyggede resultater er Indholdsfortegnelse og Pris Table, og begge tilhører Elementor Pro. Ingen laver rækker og kolonner af data. Pris Table er et enkelt prissætningskort, og Indholdsfortegnelse viser overskrifterne på siden.

Hvilken vej skal du bruge?

Vælg efter, hvor stort bordet er, og hvem der vil redigere det senere.

Vej 1: Opret en tabel i Elementor med HTML-widgetten

Dette er måden at lave en tabel i Elementor uden plugin. Du skriver en almindelig HTML-tabel, og Elementor udskriver den, som den er.

1. Rediger siden med Elementor, og træk i html widget ind i en container.
2. Indsæt koden nedenfor i HTML kode field.
3. Ændre teksten mellem mærkerne. Hver tr er en række, hver th er en overskriftscelle og hver td er en kropscelle.
4. Klik Publicere.

<table class="simple-table">
  <thead>
    <tr><th>Plan</th><th>Storage</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Starter</td><td>10 GB</td><td>$5 a month</td></tr>
    <tr><td>Team</td><td>100 GB</td><td>$15 a month</td></tr>
    <tr><td>Business</td><td>1 TB</td><td>$45 a month</td></tr>
  </tbody>
</table>

<style>
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { padding: 12px 16px; border: 1px solid #e4e7ec; text-align: left; }
.simple-table th { background: #101223; color: #fff; }
.simple-table tbody tr:nth-child(even) { background: #f6f6f7; }
</style>

Bordet er let, og det er en ægte table element, som søgemaskiner og skærmlæsere forstår. Det er sværere at vedligeholde, selv om. En klient, der ønsker at tilføje en række skal redigere HTML, og en manglende afsluttende tag bryder layoutet.

Vej 2: Byg et bord med en Grid container

En Grid container lægger widgets ud i rækker og kolonner, så den kan ligne en tabel. Den passer til en lille blok, hvor celler holder knapper, ikoner eller billeder.

1. Tilføj en beholder og sæt Container Layout til Gitter.
2. bestemme Kolonner til antallet af kolonner, du har brug for, og Rækker til antallet af rækker, overskrift inkluderet.
3. bestemme Gaps til 0, så cellerne rører ved.
4. Træk en Teksteditor widget ind i hver celle og skriv dens tekst.
5. På hver widget åben fremskreden, så tilføj Polstring og en 1px rand. Giv overskriftscellerne en baggrundsfarve.

Widgettællingen vokser hurtigt. Tre kolonner og fire rækker har allerede brug for 12 widgets, og en 5 gange 10 tabel har brug for 50. Grænser fordobles, hvor celler mødes, medmindre du tuner hver side. Outputtet er et sæt divs, så en skærmlæser annoncerer det ikke som en tabel. Hold denne metode til en håndfuld celler.

Måde 3: Tilføj en TablePress-tabel til Elementor

TablePress er et tabel plugin med mere end 600.000 aktive installationer. Du bygger tabellen på sin egen admin skærm og derefter placere den i Elementor. Det er det rigtige valg for lange tabeller, fordi det importerer Excel, CSV, HTML og JSON filer og lader besøgende sortere, søge og side gennem rækkerne.

1. Installer og aktiver TablePress.
2. Gå til TablePress, så Tilføj Ny for at skrive en tabel, eller betyde at uploade en fil.
3. Gem tabellen og noter dens ID.
4. Rediger din side med Elementor og søg efter TabelPress tabel. Træk widgetten ind og vælg din tabel i Table dropdown.
5. Hvis du foretrækker en kortkode, skal du trække i Shortcode widget og gå ind [table id=1 /] med dit eget ID.

Widgetten har ingen Style-fane, så farver og skrifttyper kommer fra TablePress-indstillinger og din egen CSS. På vores 390px testtelefon kørte tabellen med fem kolonner også forbi højre kant, indtil vi tændte Vandret rulning i tabellens indstillinger.

Way 4: Brug en tabel widget

En addon widget holder hele jobbet inde i Elementor. Du skriver celler i panelet og styler tabellen i fanen Stil, på samme måde som du arbejder med enhver anden widget. Vi vil bruge Dynamic Table widget fra Master Addons her.

1. Installer Master Addons og kontroller det Dynamisk tabel er slået til i sine widgetindstillinger.
2. Rediger siden med Elementor, søg efter Dynamisk tabel og træk det ind. Det starter med en prøve fire-kolonne tabel.
3. åbne lukke op Bordhoved. Tilføj en Tabeloverskriftscelle pr. kolonne og skriv hver Kolonnenavn.
4. åbne lukke op Bord Krop. Tilføj en Tabel Body Cell pr. celle, venstre mod højre. Tænd Ny række? på den første celle i hver række efter den første.
5. For at flette celler skal du åbne en celles muligheder faneblad og sæt Kolonne Spændvidde eller Rækkespænd.
6. Style overskriften, kroppen og striberne i måde faneblad, og udgiv derefter.

Hver celle kan indeholde tekst, et ikon eller et billede, og tekstfelterne accepterer dynamiske mærker. Responsivt bord? i sektionen Indstillinger er som standard slået til, så på enheder op til 768px bred bliver hver række til et kort med kolonnenavnene som etiketter.

Vil du se det, før du installerer noget? de Dynamisk tabelside har tre live-borde og otte demo-layouts, du kan åbne.

Dynamic Table sorterer, søger, paginerer eller importerer ikke filer. Hver celle skrives i hånden, hvilket er fint for 30 celler og trættende for 300, så for store datasæt gå tilbage til Way 3.

Fejl at undgå

• Opbygning af tabellen i Text Editor-widgetten. Den har ingen tabelknap, så du ender alligevel med at skrive HTML i dens tekstfane. HTML-widgetten er det renere sted for den kode.
• Brug af en prissætningswidget til data. Pris Table og Prissætning Tabel widgets er bygget til planer med en købsknap. De er den forkerte form for rækker af data.
• Glemmer telefoner. En fem-kolonne tabel passer sjældent til en 390px skærm. Beslut om rækker skal stable, rulle sidelæns eller miste en kolonne.
• Bygning af 50 celler fra widgets. Hvis gittermetoden har brug for mere end omkring et dusin widgets, skal du skifte til en rigtig tabel.

Ofte stillede spørgsmål

Endelige tanker

Der er fire måder at oprette en tabel i Elementor på. Brug HTML-widgetten til én lille tabel og intet plugin, en Grid-beholder til nogle få celler med knapper eller billeder, TablePress til lange eller importerede data og en tabelwidget, når du vil redigere og style tabellen inde i Elementor.

Hvis den sidste passer, Dynamisk tabel er en del af Master Addons sammen med sine andre widgets.

Relateret læsning

• Elementor prissætning tabel tips
• Bedste indholdsfortegnelse plugins til WordPress