Merkelig nok er en av de vanskeligste webteknologiene å mestre en av de tidligste som er tilgjengelige for nettleseren etter ren tekst og bilder. Problemet er enda større i dag med så mange forskjellige enhetstyper som må tenkes gjennom.
Perfekte tabeller er nesten umulige å lage med mindre de inneholder så få elementer at det sannsynligvis ikke utløses noen problemer. Hvilke feil som kan oppstå inkluderer:
- Innpakning av tekst feil
- Begrunnelsesfeil
- Tabell gjengivelse av skjermen
- Rulleproblemer
- Feil i rekkehøyde
- Feil i kolonnebredde
- Generell stygghet eller urydighet
I denne artikkelen skal vi se på hvordan du kan unngå problemer som det, slik at tabellene dine har den beste sjansen til å skape et godt inntrykk.
Unngå strategier å unngå
Fordi tabeller er så vanskelige å få rett, prøver noen å unngå å bruke dem. Noen vanlige strategier er å bruke CSS for å lage en falsk tabell, og bruke et bilde av datatabellen uten å implementere den i kode.
Begge disse unngåelsesstrategiene har mangler og bør unngås. Å bruke CSS for å imitere en tabell mangler den semantiske strukturen som ligger i en tabell, noe som kan skape brukervennlighet og tilgjengelighetsproblemer.
Et bilde av en tabell vil ikke lide problemene som er oppført i introduksjonen, men ødelegger SEO-potensialet ditt og kan ikke lett endres hvis dataene dine må oppdateres. Det introduserer også brukervennlighet og tilgjengelighetsproblemer.
Rammer er vennene dine
Vanlige rammer som Bootstrap og Foundation inneholder mange tidsbesparende verktøy, og tabeller er intet unntak. Å bygge et stilig bord i Bootstrap er ikke vanskelig, men har noen begrensninger hvis du bare bygger av stativet uten å legge til noen spesiallagde skreddersøm til din innsats.
Utseende er ikke alt
Fordi innhold og stil alltid skal være uavhengige, kan det være fornuftig å bygge bordet ditt i vanlig HTML først bare for å sikre at det vil se bra ut før noen spesiell tabellstyling brukes.
Dette kan også være nyttig for å minne deg på at god bordkonstruksjon krever mer enn bare å få bordet til å se bra ut. Det skal også være nyttig iformationeleveringssystem. Hvis målet med bordet ikke er å formidle innformation, så bør du ikke bruke en tabell for hva det er du gjør.
Målet for tilgjengeligheten
Noen mennesker har problemer med å se og lese trykt tekst, så det er en god idé å gjøre tabeller tilgjengelige for dem. Du kan finne ut alt du trenger å vite om å gjøre tabellene mer tilgjengelige fra WebAIM.
Vurder å gi ID-verdier til tabellkomponenter
For maksimal kontroll over hver del av tabellen (rader, celler), kan du vurdere å gi dem inndividoble ID-verdier. Å legge til klasseverdier også vil gi deg enda mer fleksibilitet.
Å gjøre disse tingene skaper mye mer arbeid for deg, så det er bare praktisk når du trenger å kunne finjustere et hvilket som helst element etter referanse. Hvis du bestemmer deg for å gjøre dette, vil du kunne manipulere alle tabellelementer ved hjelp av JavaScript og CSS.
Noe av kompleksiteten ved bordlegging er at vi deklarerer rader, men ikke kolonner. Kolonnene opprettes dynamisk, beregnet etter hvor mange dataelementer du plasserer på hver rad. Dette er grunnen til at tabeller legger til lastetiden for siden.
Effektivt betyr det at kolonner bare eksisterer i en abstrakt forstand før siden blir gjengitt, så du kan ikke gi dem noen form for referanse. Ved å gi det første TD-elementet på en rad en klasse med for eksempel "firstCol", gir du en måte å direkte referere til en kolonne.
Kompakte tabeller er best
Det har blitt moteriktig å bygge alt med store, høye siktkomponenter. Fra et tilgjengelighetssynspunkt er dette fantastisk. Når det gjelder brukervennlighet er det imidlertid ikke alltid den beste måten, fordi det kan føre til problemer.
Utviklerne av Bootstrap eksperimenterte med responsive tabeller, men tabeller og responsiveness går ikke bra sammen. Å designe bordene dine fra starten slik at de passer på en mobilskjerm i portrettmodus er et smart trekk.
Tabeller skal alltid kunne rulles
Det er en god praksis å alltid sette overstrømningsverdien til et bord til automatisk, men ikke på selve bordet. I stedet pakk bordet inn i en div, noe som dette:
Så er det mye PHP-kode som konstruerer tabellen, og lukker med dette:
Delen som gjør arbeidet med å gjøre tabellen rullbar er på den første linjen, der tabellinnpakningsdelingen får en fast høyde og har overløpsverdien satt til auto. Hvis du gjør dette til selve bordet, i stedet for til en innpakning rundt bordet, kan det ha utilsiktede effekter.
Ring inn de tunge møtene hvis du trenger det
For enkle tabeller er dette overkill, men når du har et bord som virkelig trenger fordeler som justerbare kolonnebredder og kolonnesortering, er det noen kraftige jQuery-applikasjoner som er bygget for å hjelpe deg med oppgaven å konstruere komplekse tabeller.
Det mest imponerende alternativet du vil ha for et WordPress-nettsted er wpDataTables, et WordPress-bord plugin som gjør arbeidet ditt med tabeller, diagrammer og dataadministrasjon enkelt. Med den kan du lage responsive WordPress tabeller og diagrammer.
De plugin fungerer veldig raskt med store tabeller, opptil millioner av rader, men du kan også gjøre mange tilpasninger og filtrering på tabellene nesten som om du skulle vært i Excel eller Google Regneark.
Det største og mest sannsynlig beste er Flexigrid. Dette har et lignende utseende som et Java Swing-bord, og fungerer på en lignende måte.
Funksjonene til Flexigrid kan til og med være for mye for det du trenger, så i dette tilfellet kan du vurdere TabellSorter, som er ganske enklere.
Selv om funksjonene i denne typen verktøy kan være spennende, er det viktig at de kommer til å legge enda mer til lastingstiden for siden din. Det er best å lagre denne typen ting for når du virkelig må ha det.
Automatiserte konverteringsverktøy gir normalt ikke best resultater
Det er CMS-plugin-moduler tilgjengelig som lar deg konvertere dokumenttabeller til HTML-tabeller. Disse er ikke så nær som å bygge bordet manuelt, så hvis du vil ha overlegne resultater, er ikke automatisering av denne typen veien å gå.
Din egen hjemmevoksne automatisering er imidlertid fin
Bruke PHP til å konstruere tabellene dine fra databasen iformation er alltid en god idé, og definitivt å foretrekke fremfor å skrive alt manuelt. Forskjellen her er at du har full kontroll over hvordan automatiseringen fungerer.
Når du bruker tredjepartsautomasjon, må tredjepartsforfatteren gjøre antakelser om tabellen din. Dette betyr at du ender opp med et generisk bord som kan mangle mange funksjoner sammenlignet med å lage tabellen selv.
Bruk tabeller på riktig måte, og de vil belønne deg
Gode bord er designet, de skjer ikke bare. Når du designer en innformationleveringssystem, vil du at det skal være effektivt. Sørg for at tabellene dine er designet for å være nettopp det, og nettstedet ditt vil oppnå maksimalt utbytte av inkluderingen.
header image med tillatelse fra
kommentarer 0 Responses