⭐ 0
🔍
Szöveg Kép PDF és Dokumentumok Hang Zene Elektronika Idő Segédprogramok Validátorok Ezotéria Játékok

HTML-tábla CSS-sel – Stílusos és beillesztésre kész

Készítsen HTML-táblázatot vizuálisan a cellákra kattintva és gépelve – tiszta, szemantikus táblázatjelölést kaphat élő előnézettel, beillesztendő vagy konvertálandó formátum nélkül.

Görgethető tárolóba csomagolja a táblázatot, így a széles táblázat nem töri meg az oldalelrendezést keskeny képernyőkön.
Feldolgozás... 0%

Eredmény

Ez az oldal megnyitja a táblázatkészítőt a zebracsíkozás és a cellaszegélyek bekapcsolásával, valamint egy kis mintaárazási táblázattal, amely már kitöltött – pontosan ez a kombináció, amit a legtöbben a „HTML-táblázat CSS-sel” alatt értenek.

Ahelyett, hogy minden cellában szétszórná a soron belüli stílusattribútumokat, a generátor egyetlen beágyazható stílusblokkot ír egyetlen osztályba, amely lefedi a szegélyeket, a térközt és a csíkos sorokat – másolja a teljes kódrészletet, a stílusblokkot is beleértve, és önállóan működik bármely oldalon.

Szerkessze a mintacellákat, adjon hozzá sorokat vagy oszlopokat, és kapcsolja be a reszponzív burkolót, ha a táblázat széles – a kód és az alábbi élő előnézet együtt frissül, így mindig pontosan a másolni készülő táblázatot láthatja.

🛡️
Böngészőben futtatva

A fájljaid és bemeneteid soha nem hagyják el ezt az eszközt. A feldolgozás teljesen offline módon történik. 100% biztonságos.

Elfogadott formátumok és szabályok

  • Szerkeszthető rács: sorokat és oszlopokat adjon hozzá vagy távolítson el egyetlen kattintással, és írja be közvetlenül bármelyik cellába.
  • Stílusváltások a fejléchez, a zebracsíkokhoz, a cellaszegélyekhez és a mobilbarát vízszintes görgetős burkolóhoz.
  • Élőben megjelenített előnézet a behúzott, másolásra kész HTML mellett, plusz egy kattintásos másolás gomb.

Főbb előnyök

✓ Minden cella kattintás és billentyűleütés azonnal frissíti a szemantikai táblázat jelölését és az élőben megjelenített előnézetet – nincs külön átalakítási lépés a futtatáshoz.
✓ A zebra csíkozása, a szegélyek és az érzékeny túlcsordulási burkoló egy jelölőnégyzettől távolabb található, és mindegyiket valódi beágyazható CSS támogatja, nem pedig elszórt soron belüli attribútumok.
✓ A kimenet megfelelő thead, tbody, tr, th és td címkéket használ, így a másolt táblázat elérhető és indexelhető marad, bárhová beilleszti.

Felhasználási területek

  • • A blogbejegyzésben idézett statisztikák gyors listáját tiszta HTML-táblázattá alakíthatja úgy, hogy közvetlenül beírja a rácsot anélkül, hogy kézzel írna egyetlen <td>-t.
  • • Készítsen egy kis árképzési vagy szolgáltatás-összehasonlító táblázatot bekapcsolt zebracsíkkal és szegélyekkel, majd illessze be a teljes kódrészletet – a CSS-t is beleértve – a CMS-be vagy a statikus webhelyére.
  • • Javítson ki egy széles táblázatot, amely túlcsordult mobilon: kapcsolja be a reszponzív burkot, és ellenőrizze az élő előnézetet a közzététel előtt.