Tietoa kirjoittajasta
Chen Hui Jing on itseoppinut suunnittelija ja ohjelmistokehittäjä, jolla on suuri rakkaus CSS:ään. Koodirivien vähentäminen hänen web-projekteissaan tekee hänet äärimmäisen onnelliseksi. Hän …Lisää aiheestaHuijing↬
- 11 min. luettu
- CSS,JavaScript,Design Patterns,Responsiivinen web-suunnittelu
- Tallennettu offline-lukemista varten
- Jaa Twitterissä, LinkedIn
Taulukot ovat suunnittelumalli suurten tietomäärien näyttämiseen riveillä ja sarakkeissa, mikä tekee niistä tehokkaita kategoristen kohteiden vertailevan analyysin tekemiseen. Taulukoita on käytetty tähän tarkoitukseen jo 2. vuosisadalla, ja kun maailma alkoi digitalisoitua, taulukot tulivat mukaan.
Oli väistämätöntä, että verkko tukisi tietojen esittämistä taulukkomuodossa. HTML-taulukot esittävät taulukkomuotoisen tiedon semanttisesti ja rakenteellisesti sopivalla tavalla. HTML-taulukoiden oletustyylit eivät kuitenkaan ole juuri esteettisesti miellyttävintä, mitä olet koskaan nähnyt. Riippuen halutusta visuaalisesta ulkoasusta, näiden taulukoiden kaunistaminen CSS:llä vaati jonkin verran työtä. Kymmenen vuotta sitten Smashing Magazinessa julkaistiin artikkeli “Top 10 CSS-taulukkomuotoilua”, ja se saa vielä tänäkin päivänä paljon kävijöitä.
Verkko on kehittynyt paljon viimeisen vuosikymmenen aikana, ja on helpompaa kuin koskaan saada sivustosi tai sovelluksesi mukautumaan siihen näkymäikkunaan, jossa sitä katsotaan. Tästä huolimatta meidän on edelleen tehtävä harkittuja suunnitteluvalintoja, jotka eivät vaaranna saavutettavuutta. Koska taulukot eivät näytä putoavan suosiosta lähiaikoina, katsotaanpa, miten taulukoita voi luoda verkkoon vuonna 2019.
CSS-Only Options
Jos tietokokonaisuutesi ei ole kovin suuri, eivätkä sivuttamisen ja lajittelun kaltaiset ominaisuudet ole välttämättömiä, harkitse JavaScript-vapaata vaihtoehtoa. Voit saada melko hienoja tuloksia, jotka toimivat hyvin eri näytön kokoisilla näytöillä ilman suuren kirjaston aiheuttamaa lisäpainoa.
Epäonnekseen ilman JavaScriptin apua DOM-manipulointia varten saavutettavuusrintamalla, meillä on vain kourallinen pelkkiä CSS-vaihtoehtoja. Mutta pienille aineistoille ne ovat usein riittäviä.
Vaihtoehto 1: Älä tee mitään
Aloitamme vähällä vaivalla. Jos tietosi mahtuvat taulukkoon, jossa on vain muutama sarake ja paljon rivejä, tällainen taulukko on jo alun perin melko hyvin mobiilikäyttöön soveltuva.
Ongelmasi on luultavasti se, että leveämmillä näytöillä sinulla on liikaa tilaa, joten saattaisi olla suositeltavaa “rajata” taulukon maksimileveys merkinnällä max-width, kun taas kapeammalla ruudulla taulukko saa kutistua tarpeen mukaan.
See the Pen Table #1: Few columns, many rows by (Chen Hui Jing) on CodePen.
Tämmöinen kuvio toimii parhaiten, jos datasi itsessään ei ole rivejä ja rivejä tekstiä. Jos ne ovat numeerisia tai lyhyitä lauseita, pääset luultavasti vähällä.
Vaihtoehto 2: Style The Scroll
David Bushell kirjoitti jo vuonna 2012 tekniikastaan responsiivisia taulukoita varten, johon kuului ylivuotoon vetoaminen ja se, että käyttäjät voivat vierittää nähdäkseen enemmän tietoja. Voidaan väittää, että tämä ei ole varsinaisesti responsiivinen ratkaisu, mutta teknisesti ottaen kontti reagoi näkymäikkunan leveyteen.
Katsotaan ensin “perus” ylivuoto. Kuvittele, että käytän ilmaisia lainausmerkkejä basicin ympärillä, koska vieritysvarjojen muotoilu on kaikkea muuta kuin sitä. Silti tässä tapauksessa “basic” viittaa siihen, että taulukko ei muutu millään tavalla.
Katso Chen Hui Jingin kirjoittamaa Pen Table #3: Style the scroll (basic) -kynätaulukkoa CodePenissä.
Tämä tekniikka vierivien varjojen tekemiseen on peräisin siitä, että Roma Komarov ja Lea Verou riffasivat toistensa ideoita luodakseen taikoja. Se perustuu useiden gradienttien (lineaaristen ja radiaalisten) käyttämiseen sisältävän elementin taustakuvina ja background-attachment: local:n käyttämiseen taustan sijoittamiseen suhteessa elementin sisältöön.
Tässä tekniikassa on hienoa se, että selaimissa, jotka eivät tue vieritysvarjoja, voit silti vierittää taulukkoa normaalisti. Se ei riko asettelua lainkaan.
Toinen vieritysvaihtoehto olisi kääntää taulukon otsikot rivikokoonpanosta sarakekokoonpanoon ja soveltaa samalla vaakasuuntaista vieritystä <tbody>-elementin sisältöön. Tämä tekniikka hyödyntää Flexbox-käyttäytymistä taulukon rivien muuttamiseksi sarakkeiksi.
See the Pen Table #3: Style the scroll (flipped headers) by Chen Hui Jing on CodePen.
Soveltamalla display: flex taulukkoon se tekee <thead>– ja <tbody>-elementeistä molemmat flex-lapsielementtejä, jotka oletusarvoisesti asetetaan vierekkäin samalle flex-linjalle.
Tehdään myös <tbody>-elementistä flex-säiliö (flex container), jolloin kaikki sen sisällä olevat <tr>-elementit ovat myös flex-lapsielementtejä, jotka on aseteltu yhdelle flex-linjalle. Lopuksi jokaisen taulukkosolun näyttöksi on asetettava block oletusarvon table-cell sijaan.
Tämän tekniikan etuna on, että otsikot ovat aina näkyvissä, kuten kiinteä otsikkoefekti, joten käyttäjät eivät menetä asiayhteyttään selatessaan tietosarakkeita. Yksi huomioitava asia on, että tämä tekniikka johtaa visuaalisen ja lähdejärjestyksen epäsuhtaan, mikä tekee asioista hieman epäintuitiivisia.
Sprinkle On Some JavaScript
Kuten aiemmin mainittiin, asetteluvaihtoehdoilla, joihin liittyy taulukon muokkaaminen display-arvoja muokkaamalla, on toisinaan negatiivisia seurauksia saavutettavuuden kannalta, mikä vaatii pientä DOM-manipulaatiota korjaamiseksi.
Lisäksi Andrew Coyle antaa useita käyttäjäkokemusta koskevia vinkkejä datataulukoiden suunnitteluun, mukaan lukien ominaisuudet, kuten sivunumerointi, lajittelu, suodatus ja niin edelleen (ominaisuudet, joiden käyttöönotto vaatii jonkin verran JavaScriptiä).
Jos työskentelet suhteellisen yksinkertaisemman tietokokonaisuuden kanssa, ehkä haluat kirjoittaa omia funktioita joillekin näistä ominaisuuksista.
Rows To Blocks, With Accessibility Fix
Tietääkseni tämä responsiivinen datataulukkotekniikka sai alkunsa Chris Coyierin CSS-Tricks-artikkelista “Responsiiviset datataulukot” (Responsiiviset datataulukot) vuonna 2011. Monet muut ovat sittemmin muokanneet ja laajentaneet sitä.
Tämän tekniikan ydin on hyödyntää mediakyselyä taulukkoelementin ja sen lasten display-ominaisuuden vaihtamiseksi block kapealla näkymäalueella.
Kapealla näytöllä taulukon otsikot jäävät visuaalisesti piiloon, mutta ne ovat edelleen olemassa saavutettavuuspuussa. Soveltamalla taulukon soluihin data-attribuutteja voimme sitten näyttää tietojen merkinnät CSS:n avulla, mutta pitää merkintöjen sisällön HTML:ssä. Katso alla olevasta CodePenistä, miltä merkinnät ja tyylit näyttävät:
See the Pen Table #2: Rows to blocks by Chen Hui Jing on CodePen.
Alkuperäinen menetelmä soveltaa leveyttä etiketin tekstin näyttävään pseudoelementtiin, mutta se tarkoittaa, että sinun on tiedettävä, kuinka paljon tilaa etiketti tarvitsee aluksi. Yllä olevassa esimerkissä käytetään hieman erilaista lähestymistapaa, jossa etiketti ja data ovat kumpikin sisältävän lohkonsa vastakkaisilla puolilla.
Voidaan saavuttaa tällainen vaikutus automaattisten marginaalien avulla flex-muotoilun yhteydessä. Jos asetamme kunkin <td>-elementin display-ominaisuuden arvoksi flex, koska pseudoelementit luovat laatikot ikään kuin ne olisivat alkuperäisen elementtinsä välittömiä lapsia, niistä tulee <td>:n flex-lapsia.
Sen jälkeen on vain asetettava margin-right: auto pseudoelementille, jotta solun sisältö työntyy solun kauimmaiseen reunaan.
Muuten kapean näkymäikkunan asettelun tekemisessä käytetään Gridin ja display: contents:n yhdistelmää. Huomaa, että display: contents:lla on tukevissa selaimissa tällä hetkellä ongelmia saavutettavuuden kanssa, eikä tätä menetelmää tulisi käyttää tuotannossa ennen kuin nämä viat on korjattu.
Mutta ehkä luet tätä sen jälkeen, kun nämä viat on korjattu, siinä tapauksessa tässä on vaihtoehtoinen asetteluvaihtoehto.
See the Pen Table #2: Rows to blocks (alt) by Chen Hui Jing on CodePen.
Jokainen <tr>-elementti asetetaan display: grid:ksi ja jokainen <td>-elementti asetetaan display: contents:ksi. Vain ruudukkosäiliön välittömät lapset osallistuvat ruudukkomuotoilukontekstiin; tässä tapauksessa se on <td>-elementti.
Kun display: contents:aa sovelletaan <td>:aan, se “korvataan” sen sisällöllä, tässä tapauksessa <td>:n sisällä olevasta <span>:sta ja <span>:sta tulee ruudukon lapsia sen sijaan.
Pidän tässä lähestymistavassa siitä, että voimme käyttää max-content:aa pseudoelementtien sarakkeen koon määrittämiseen, jolloin varmistetaan, että sarake on aina pisimmän etiketin levyinen, ilman että meidän tarvitsee manuaalisesti määrittää sille leveysarvoa.
Tulevaisuudessa, kun mitoitusarvot min-content, max-content ja fit-content (joita CSS Intrinsic & Extrinsic Sizing Module Level 3 -moduuli kattaa) tuetaan yleisinä width– ja height-arvoina, meillä on vieläkin enemmän vaihtoehtoja asioiden asetteluun.
Tämän lähestymistavan huonona puolena on se, että tarvitset sen ylimääräisen <span> tai <p> taulukkosolun sisällön ympärille, jos sillä ei jo ole sellaista, muuten siihen ei voisi soveltaa tyylejä.
Yksinkertainen paginointi
Tämä esimerkki näyttää perussaginointitoteutuksen, jota Gjore Milevski muokkasi tämän CodePenin ulkopuolelta niin, että se paginoi taulukkosarjoilla div:ien sijaan. Se on jatkoa edellisessä kappaleessa käsitellylle “style the scroll” -esimerkille.
See the Pen Table #4: Simple pagination by Chen Hui Jing on CodePen.
Asennuksen näkökulmasta Flexbox on erittäin kätevä, kun paginointielementtejä voidaan sijoittaa eri näkymäkokojen välillä. Eri projektisuunnitelmilla on erilaiset vaatimukset, mutta Flexboxin monipuolisuuden ansiosta nämä erot pitäisi pystyä huomioimaan vastaavasti.
Tässä tapauksessa sivun sivutus on keskitetty sivulle ja taulukon yläpuolelle. Ohjaimet taaksepäin ja eteenpäin navigointia varten on sijoitettu sivuindikaattoreiden molemmille puolille leveämmillä näytöillä, mutta kaikki neljä näkyvät sivuindikaattoreiden yläpuolella kapeilla näytöillä.
Voimme tehdä tämän vaihtamalla order-ominaisuutta. Sisällön visuaalinen uudelleenjärjestäminen on aina tehtävä harkiten, koska tämä ominaisuus ei muuta lähdejärjestystä – ainoastaan sitä, miten se näkyy näytöillä.
Yksinkertainen lajittelu
Tässä esimerkissä näytetään peruslajittelun toteutus, jota on muokattu tästä Peter Noblen koodinpätkästä siten, että se huomioi sekä tekstin että numerot:
Seuraavana esimerkkinä on Kynä #Taulukko 5: Yksinkertainen lajittelu, jonka on kirjoittanut Chen Hui Jing koodikynällä.
Hyödyllistä olisi saada jonkinlainen indikaattori siitä, mitä saraketta parhaillaan lajitellaan ja missä järjestyksessä. Voimme tehdä sen lisäämällä CSS-luokkia, joita voi sitten tyylitellä haluamallaan tavalla. Tässä tapauksessa indikaattorisymbolit ovat pseudoelementtejä, jotka vaihtuvat, kun kohdeotsikkoa napsautetaan.
Yksinkertainen haku
Tämä esimerkki on yksinkertainen suodatustoiminto, joka käy läpi jokaisen taulukkosolun koko tekstisisällön ja soveltaa CSS-luokkaa piilottaakseen kaikki sellaiset rivit, jotka eivät vastaa hakusyöttökenttää.
See the Pen Table #6: Simple filtering by Chen Hui Jing on CodePen.
Tällainen toteutus on suhteellisen naiivi, ja jos käyttötapauksesi vaatii sitä, voi olla järkevää tehdä sen sijaan sarakekohtainen haku. Siinä skenaariossa voisi olla hyvä idea, että jokainen syöttökenttä olisi osa taulukkoa omissa sarakkeissaan.
Let A Library Handle It
Yllä olevien JavaScript-pätkien tarkoituksena on havainnollistaa, miten taulukoita, joissa on suurempia määriä dataa, voidaan tehostaa niin, että näiden taulukoiden käyttäjien elämä helpottuu. Mutta todella suurissa tietokokonaisuuksissa saattaa olla järkevää käyttää olemassa olevaa kirjastoa suurten taulukoiden hallintaan.
Sarakkeiden vaihtokuvio on sellainen, jossa epäolennaiset sarakkeet piilotetaan pienillä näytöillä. Normaalisti en pidä sisällön piilottamisesta vain siksi, että näkymäalue on kapea, mutta tämä Filament Groupin Maggie Costello Wachsin lähestymistapa ratkaisee tämän epäluuloni tarjoamalla pudotusvalikon, jonka avulla käyttäjät voivat vaihtaa piilotetut sarakkeet takaisin näkyviin.
Yllä oleva artikkeli julkaistiin vuonna 2011, mutta Filament Group on sittemmin kehittänyt täydellisen valikoiman responsiivisia taulukkoliittymiä, jotka tunnetaan nimellä Tablesaw ja jotka sisältävät muun muassa lajittelun, rivien valinnan ja kansainvälistämisen kaltaisia ominaisuuksia.
TableSaw’n sarakkeiden vaihtotoiminto ei myöskään ole enää riippuvainen jQuerysta, toisin kuin alkuperäisen artikkelin esimerkit. Tablesaw on yksi ainoista löytämistäni kirjastoista, joilla ei tällä hetkellä ole riippuvuutta jQuerysta.
Päättäminen
Taulukoiden suunnittelumalleja on lukemattomia, ja se, minkä lähestymistavan valitset, riippuu suuresti siitä, minkä tyyppistä dataa sinulla on ja mikä on datan kohderyhmä. Loppujen lopuksi taulukot ovat menetelmä tietojen järjestämiseen ja esittämiseen. On tärkeää selvittää, millä tiedoilla on eniten merkitystä käyttäjillesi, ja päättää lähestymistapa, joka palvelee parhaiten heidän tarpeitaan.
Lisälukemista
- “Pelkästään CSS:llä toteutetut responsiiviset taulukot”, David Bushell
- “Esteettömät, yksinkertaiset, responsiiviset taulukot”, Davide Rizzo, CSS-Tricks
- “Responsiivinen taulukkoasettelu”, Matt Smith
- “Responsiiviset kuviot: Tables,” Brad Frost
- “Hey, It’s Still OK To Use Tables,” Adrian Roselli
- “Tables, CSS Display Properties, And ARIA,” Adrian Roselli
- “Data Tables,” Heydon Pickering
(ra, il)