⭐ 0
🔍
Teksti Kuva PDF & Docs Ääni Musiikki Elektroniikka Aika Apuohjelmat Validaattorit Esoteerinen Pelit

Responsiivinen HTML-taulukkogeneraattori – Mobile Scroll

Rakenna HTML-taulukko visuaalisesti napsauttamalla soluja ja kirjoittamalla – saat puhtaat, semanttiset taulukon merkinnät live-esikatselulla, ilman liittämistä tai muuntamista.

Kääri taulukon vieritettävään säiliöön, jotta leveä taulukko ei riko sivun asettelua kapeilla näytöillä.
Käsitellään... 0%

Tulos

Tämä sivu avaa taulukon rakentajan, jossa on jo täytetty leveä seitsemän sarakkeen näyte ja responsiivinen kääre on jo päällä, joten näet heti korjauksen toiminnassa.

Leveät taulukot ovat yksi harvoista elementeistä, joita pelkkä responsiivinen CSS ei voi sulattaa uudelleen – teksti rivittyy, mutta sarakkeet eivät, joten kuuden tai useamman sarakkeen taulukko joko vuotaa näytön yli tai puristaa jokaista solua lukemattoman pieneksi puhelimessa. Taulukon kääriminen diviksi ylivuoto-x:llä: Auto pitää sen luonnollisessa leveydessä ja antaa vierailijan vierittää sitä sivusuunnassa sivun asettelun rikkomisen sijaan.

Lisää tai poista sarakkeita vastaamaan omia tietojasi, napsauta mitä tahansa solua muokataksesi sitä ja kopioi valmis merkintä – kääre div lisätään vain, kun tämä valintaruutu on päällä, joten voit verrata rivitettyä ja paketoimatonta HTML-koodia vierekkäin.

🛡️
Suoritetaan selaimessa

Tiedostosi ja syötteesi eivät koskaan poistu tältä laitteelta. Käsittely toimii täysin offline-tilassa. 100 % turvallinen.

Hyväksytyt muodot ja säännöt

  • Muokattava ruudukko: lisää tai poista rivejä ja sarakkeita yhdellä napsautuksella ja kirjoita suoraan mihin tahansa soluun.
  • Otsikkorivin, seepraraidan, solujen reunojen ja mobiiliystävällisen vaakavierityskääreen tyylin vaihdot.
  • Live renderöity esikatselu sisennetyn, kopiointivalmiuden HTML-koodin vieressä sekä yhden napsautuksen kopiointipainike.

Tärkeimmät edut

✓ Jokainen solun napsautus ja näppäinpainallus päivittää semanttisen taulukon merkinnät ja live-esikatselun välittömästi – erillistä muunnosvaihetta ei tarvitse suorittaa.
✓ Seepraraidat, reunat ja reagoiva ylivuotokääre ovat yhden valintaruudun päässä, ja kutakin tukee todellinen upotettava CSS hajautettujen inline-attribuuttien sijaan.
✓ Tulos käyttää asianmukaisia thead-, tbody-, tr-, th- ja td-tageja, joten kopioimasi taulukko pysyy käytettävissä ja indeksoitavissa missä tahansa liität sen.

Käyttötapaukset

  • • Muuta nopea luettelo tilastoista, joita lainaat blogikirjoituksessasi puhtaaksi HTML-taulukoksi kirjoittamalla suoraan ruudukkoon kirjoittamatta yhtään <td>:tä käsin.
  • • Luo pieni hinnoittelu- tai ominaisuuksien vertailutaulukko, jossa seepraraita ja reunat ovat käytössä, ja liitä sitten koko katkelma – CSS mukaan lukien – sisällönhallintajärjestelmääsi tai staattiseen sivustoosi.
  • • Korjaa leveä taulukko, joka täyttyi mobiililaitteella ottamalla käyttöön responsiivinen kääre ja tarkistamalla live-esikatselu ennen julkaisua.