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

HTML-taulukko CSS:llä – Tyylitelty ja valmis liitettäväksi

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 rakennustyökalun, jossa sekä seepraraitat että solujen reunat ovat päällä sekä pieni esimerkkihintataulukko, joka on jo täytetty – juuri yhdistelmä, jota useimmat ihmiset tarkoittavat "HTML-taulukolla CSS:llä".

Sen sijaan, että generaattori hajottaisi sisäisiä tyylimääritteitä jokaiseen soluun, generaattori kirjoittaa yhden upotettavan tyylilohkon, joka kattaa rajat, välit ja raidalliset rivit – kopioi koko katkelma, tyylilohko mukaan lukien, ja se toimii itsenäisesti millä tahansa sivulla.

Muokkaa esimerkkisoluja, lisää rivejä tai sarakkeita ja vaihda reagoivaa käärettä, jos taulukko on leveä – alla oleva koodi ja live-esikatselu päivittyvät yhdessä, jotta näet aina täsmälleen kopioitavan taulukon.

🛡️
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.