⭐ 0
🔍
Text Bild PDF och dokument Ljud Musik Elektronik Tid Verktyg Validatorer Esoterik Spel

Responsiv HTML-tabellgenerator — Mobile Scroll

Bygg en HTML-tabell visuellt genom att klicka på celler och skriva — få ren, semantisk tabelluppmärkning med en liveförhandsvisning, inget format att klistra in eller konvertera.

Slår in bordet i en rullbar behållare så att en bred tabell inte bryter sidlayouten på smala skärmar.
Bearbetar... 0%

Resultat

Den här sidan öppnar tabellbyggaren med ett brett prov med sju kolumner som redan är ifyllt och det responsiva omslaget redan påslaget, så att du omedelbart kan se hur åtgärden fungerar.

Breda tabeller är ett av de få element som vanlig responsiv CSS inte kan flöda om - textomslutning, men kolumner gör det inte, så en tabell med sex eller fler kolumner svämmar antingen över skärmen eller klämmer ihop varje cell oläsligt liten på en telefon. Att slå in tabellen i en div med overflow-x: auto håller den på sin naturliga bredd och låter besökaren rulla den i sidled istället för att bryta sidlayouten.

Lägg till eller ta bort kolumner för att matcha dina egna data, klicka på valfri cell för att redigera den och kopiera den färdiga markeringen - omslags-div läggs bara till när den här kryssrutan är aktiverad, så att du kan jämföra den lindade och oinpackade HTML-koden sida vid sida.

🛡️
Körs i webbläsare

Dina filer och indata lämnar aldrig den här enheten. Bearbetningen körs helt offline. 100 % säker.

Godkända format och regler

  • Redigerbart rutnät: lägg till eller ta bort rader och kolumner med ett klick och skriv direkt i valfri cell.
  • Stilväxlingar för rubrikrad, zebrarandning, cellkanter och ett mobilvänligt omslag med horisontell rullning.
  • Liverenderad förhandsgranskning bredvid indragen, kopieringsklar HTML, plus en kopieringsknapp med ett klick.

Viktiga fördelar

✓ Varje cellklick och tangenttryckning uppdaterar den semantiska tabelluppmärkningen och den liverenderade förhandsgranskningen omedelbart - det finns inget separat konverteringssteg att köra.
✓ Zebra-ränder, kanter och en lyhörd översvämningsomslag är en kryssruta bort, var och en stödd av riktig inbäddningsbar CSS snarare än spridda inline-attribut.
✓ Utdatan använder korrekta taggar för thead, tbody, tr, th och td, så tabellen du kopierar förblir tillgänglig och indexerbar var du än klistrar in den.

Användningsfall

  • • Förvandla en snabb lista med statistik som du citerar i ett blogginlägg till en ren HTML-tabell genom att skriva rakt in i rutnätet, utan att skriva en enda <td> för hand.
  • • Bygg en liten pris- eller funktionsjämförelsetabell med zebrastränder och kanter påslagna, klistra sedan in hela kodavsnittet – CSS ingår – i ditt CMS eller statiska webbplats.
  • • Åtgärda ett brett bord som svämmade över på mobilen genom att slå på det responsiva omslaget och kontrollera liveförhandsvisningen innan du publicerar.