HTML Tabel generator

Tabel en Dropdown generator

Dit zal u een tabel en/of dropdown in HTML geven, afhankelijk van de layout keuze.

Tabel Opties:

Vul de gegevens in de tabel:

Werking Tabel generator

Kort uitgelegd

  1. Kies een output type
  2. Kies een layout type
  3. Kies het aantal rijen en kolommen/titels/
  4. Geef je tabel en/of dropdown een klassenaam (optioneel)
  5. Voeg kleurent toe aan je tabel en/of dropdown en/of geavanceerde opties zoals padding, margin en border-radius (optioneel).
  6. Klik op “Genereer” en krijg een voorbeeldtabel.
  7. Vul je gegevens handmatig in of kopieer ze uit een csv.
  8. Genereer definitieve uitvoer
  9. Kopieer je code en gebruik ze op je webpagina.

Snel en efficiënt een HTML tabel maken

Een HTML tabel maken en invoegen die er ook nog eens professioneel uitziet en responsief is op een gsm, dat brengt wel wat uitdagingen met zich mee. Enter: de HTML-tabelgenerator van Digital Climax. Met enkele klikken, maak jij een overzichtelijke tabel, in de output en lay-out van je keuze.

Zo werkt de HTML tabelgenerator

De tabelgenerator is eenvoudig in gebruik. Volg ons stappenplan en maak in no-time de tabel die je nodig hebt.

Zo ga je te werk:

    1. Kies een output type

Je krijgt hier de keuze uit:

HTML

HTML met CSS binnenin

HTML + CSS + Javascript apart

    1. Kies een lay-out type

Hier kies je uit :

Alleen tabel

Tabel desktop en dropdown mobiel

Enkel dropdown

Maak je een tabel die zowel op je desktop als mobiel overzichtelijk en goed leesbaar moet zijn? Kies dan de optie ‘tabel desktop en dropdown mobiel.’ De tabel is responsief en past zich meteen aan in een dropdown op je mobiel. Zo blijft alle informatie netjes afgebeeld op je scherm.

    1. Kies de look van je tabel

Bepaal uit hoeveel kolommen en rijen je tabel bestaat. Je kan de klasse van je tabel een naam geven en aangepaste kleuren toevoegen. Wil je graag nog enkele persoonlijke touches toevoegen? Dat kan. Met de geavanceerde opties maak je je tabel nog net iets unieker.

    1. Bepaal de titels en rijen van je dropdown

Geef je tabel meer vorm door de titels en rijen van je dropdown in te vullen.

Ook hier kan je kiezen voor aangepaste kleuren en geavanceerde opties voor die persoonlijke touch.

    1. Genereer je code!

Met een simpele druk op de knop: ‘genereer’ krijg je de code voor jouw unieke tabel.

    1. Vul de gegevens in de tabel in

Klik op de plaats in de tabel waar je gegevens wil invullen en typ je tekst.  Plak CSV of tekst gescheiden door het teken ’;’ Personaliseer verder door in de dropdowns onder de titels data in te voegen. Klaar!

  1. Genereer je definitieve uitvoer

Een laatste klik op de blauwe knop ‘geneer definitieve uitvoer’ geeft je de volledig afgewerkte code. Je kan deze makkelijk implementeren  met de knop ‘kopieer HTML’ en ‘kopieer JavaScript’

 

Hulp nodig bij het gebruik van de tabelgenerator? Contacteer ons, wij helpen je graag met de creatie van jouw tabel.