⭐ 0
🔍
Text Obrázok PDF a Dokumenty Audio Hudba Elektronika Čas Užitočné programy Validátory Ezoterika Hry

Responzívny generátor HTML tabuliek — Mobile Scroll

Vytvorte tabuľku HTML vizuálne kliknutím na bunky a písaním – získajte čisté, sémantické značky tabuľky so živým náhľadom, bez formátu na vkladanie alebo konverziu.

Zabalí tabuľku do posúvateľného kontajnera, aby široká tabuľka nenarušila rozloženie stránky na úzkych obrazovkách.
Spracovanie... 0%

Výsledok

Táto stránka otvorí nástroj na tvorbu tabuliek s už vyplnenou širokou vzorkou so siedmimi stĺpcami a už zapnutým responzívnym obalom, takže opravu môžete okamžite vidieť v akcii.

Široké tabuľky sú jedným z mála prvkov, ktoré obyčajné responzívne CSS nemôžu preformátovať – text sa zalamuje, ale stĺpce nie, takže tabuľka so šiestimi alebo viacerými stĺpcami buď pretečie obrazovku, alebo stlačí každú bunku na telefóne nečitateľne malú. Zabalenie tabuľky do prvku div s overflow-x: auto ju zachová v jej prirodzenej šírke a umožní návštevníkovi posúvať ju do strán namiesto toho, aby porušil rozloženie stránky.

Pridajte alebo odstráňte stĺpce, aby sa zhodovali s vašimi vlastnými údajmi, kliknutím na ľubovoľnú bunku ju upravte a skopírujte hotové označenie – obalový prvok div sa pridá iba vtedy, keď je toto začiarkavacie políčko zapnuté, takže môžete porovnať zabalené a nezabalené HTML vedľa seba.

🛡️
Spustené v prehliadači

Vaše súbory a vstupy nikdy neopustia toto zariadenie. Spracovanie prebieha úplne offline. 100% bezpečné.

Prijaté formáty a pravidlá

  • Upraviteľná mriežka: jedným kliknutím pridajte alebo odstráňte riadky a stĺpce a píšte priamo do ľubovoľnej bunky.
  • Prepína štýl pre riadok hlavičky, pruhovanie zobry, ohraničenie buniek a obal vodorovného posúvania vhodný pre mobilné zariadenia.
  • Živá vykreslená ukážka vedľa odsadeného kódu HTML pripraveného na kopírovanie plus tlačidlo kopírovania jedným kliknutím.

Hlavné výhody

✓ Každé kliknutie na bunku a stlačenie klávesu okamžite aktualizuje označenie sémantickej tabuľky a živý vykreslený náhľad – nie je potrebné spustiť žiadny samostatný krok konverzie.
✓ Zebra pruhovanie, okraje a responzívny pretekajúci obal sú vzdialené len jedno začiarkavacie políčko, pričom každé z nich je podporované skutočnými vložiteľnými CSS, a nie rozptýlenými vloženými atribútmi.
✓ Výstup používa správne značky thead, tbody, tr, th a td, takže tabuľka, ktorú skopírujete, zostane prístupná a indexovateľná kdekoľvek ju prilepíte.

Prípady použitia

  • • Premeňte rýchly zoznam štatistík, ktoré citujete v blogovom príspevku, na prehľadnú tabuľku HTML zadaním priamo do mriežky bez toho, aby ste museli ručne napísať jediné <td>.
  • • Vytvorte malú tabuľku cien alebo porovnávania funkcií so zapnutým pruhovaním a okrajmi a potom vložte celý úryvok – vrátane CSS – do svojho CMS alebo statickej stránky.
  • • Opravte širokú tabuľku, ktorá preteká v mobilných zariadeniach, zapnutím responzívneho obalu a skontrolovaním živého náhľadu pred zverejnením.