Grunnleggende om nettdesign: Hvordan lage snazzy tabeller og når du skal bruke dem

Når er tabeller mest effektive til å presentere data på websider? Debatten om riktig bruk av tabeller fokuserer vanligvis på bruken av tabellkolonne- og radattributter for sideoppsett og å bruke dem til å justere eller plassere tekst, grafikk eller graderinger. Divisjoner, spenn, og mer nylig med HTML5, bruk av artikler, seksjoner, topptekst, bunntekst, nav, hgroup og til side er mer passende for å gi seksjons- og strukturelle elementer for presentasjon av websider.

Selv om tabeller ikke er passende for å legge ut innhold, er de imidlertid et nyttig verktøy for å presentere viktige data på websider, spesielt for vitenskapelige rapporter, tabelldata og data som er representert godt i et standard regnearkformat. Eksempler på datakilder og typer som egner seg godt til tabellformatering inkluderer kommaavgrensede lister, tabelldata, databaser og andre kilder, som kan spørres. Som en kommaseparert verdifil eller .csv i Oracle, MySQL, SQL Server, MS Access og MS Excel. Tabelldata kan også importeres fra andre kilder, for eksempel tekstbehandlingsapplikasjoner som MS Word og WordPerfect.

I denne artikkelen vil jeg bruke funksjoner som er hjemmehørende i Adobe Dreamweaver for å demonstrere importering og formatering av data i tabellform for presentasjon av nettsider; Imidlertid kan lignende metoder også brukes med andre tekstredigerere med lignende resultater.

En av de vanlige bruksområdene for tabeller - spesielt for nettsteder som støtter forskerteam - er å oppdatere data regelmessig, noen ganger ukentlig eller daglig; selvfølgelig kan dette gjøres automatisk med databasedrevne nettsteder, men av og til er dataene ikke lett tilgjengelig i riktig backend-databaseformat.

Importerer data

Tabelldata er avgrenset, noe som betyr at de har individuelle dataoppgaver som utgjør hver post som utgjør en rad, atskilt med en felles avgrenser, for eksempel komma, mellomrom eller semikolon. Eksempeldataene nedenfor demonstrerer hvordan hver post er avgrenset eller separert med komma, og disse brukes til å holde de individuelle datastykkene atskilt i posten.

År, merke, modell, Beskrivelse Pris

 1997, Ford, E350, "ac, abs, moon", 3000, 00 
 1999, Chevy, "Venture" "Utvidet utgave" "", "", 4900, 00 
 1999, Chevy, "Venture" "Utvidet utgave, veldig stor" "", "", 5000, 00 
 1996, Jeep, Grand Cherokee, "God stand! Luft, månetak, lastet", 4799, 00 

Dette er de samme dataene som importeres til et kommaseparert verdi (CSV) regneark:

Figur A

Eventuelle feilaktige kommaer vil føre til at dataene tolkes som et annet stykke i posten. Når de er importert til Dreamweaver, blir tabelldataene en HTML-formatert tabell som kan sorteres, formateres og til og med eksporteres. Se for deg hundrevis av linjer med poster og å forsøke å legge inn alle disse data manuelt ville være et mareritt, men med Dreamweaver Import Data-funksjonen tar det bare noen minutter å få tabelldata formatert.

I Dreamweaver, sørg for at du har filen åpen som du vil oppdatere, og velg deretter fra menyen Fil | Import | Tabelldata.

Figur B

Dette åpner dialogboksen Importer tabulære data i figur B som lar deg spesifisere hvilken fil du vil importere ved å bla til kildeplassering, og deretter bekrefte hvordan dataene er avgrenset - enten som fane, komma, semikolon, kolon, eller andre. Du velger hvordan tabellen skal se ut med celleavstand, cellepolstring, formatering av øverste rad og kantlinje. Når du er ferdig, klikker du OK, og tabellen genereres med importerte data. Når tabellen er importert, ser det ut som vist i figur C.

Figur C

Etter at data er importert til et webdokument som en tabell på denne måten, kobles de ikke lenger til den eksterne filen; Derfor vil ikke eventuelle oppdateringer til den eksterne filen gjenspeiles i HTML-dokumentet. Direkte anrop til dataene fra en database backend-kilde, for eksempel en MySQL- eller Oracle-database, vil muliggjøre dynamisk oppdatering av dataene, som ikke er omfanget av denne artikkelen.

Eksporterer data

Et annet alternativ du kan bruke er Export Tool . Velg en tabell fra et hvilket som helst webdokument i Dreamweaver ved først å merke tabellen og deretter velge Fil | Eksport | Tabell og velg type avgrenser (fane, komma osv.) Samt typen linjeskift (Windows, Mac, Unix) som skal brukes, som vist nedenfor.

Figur D

Sorterer data

Når du har importert dataene til webdokumentet, kan du nå sortere dataene hvis du vil, avhengig av prosjektets omfang. For å starte en sorteringsprosedyre, plasser den aktive markøren i Dreamweaver på en hvilken som helst del av tabellen, og velg deretter Kommandoer | Sorter tabell.

Figur E

Fra dialogboksen Sorter tabell er det mange alternativer, inkludert valg av kolonne etter kolonne, hvordan du sorterer sorteringen enten etter alfa eller numerisk, og retningen på sorteringen. Du kan også velge å sortere etter to kolonner med data som tillater en primær og en sekundær sortering. Andre alternativer inkluderer å legge til den første raden, sortere topptekstradene, sortere bunntekstradene og holde alle radfargene like etter at sorteringen er fullført.

I dette eksemplet valgte jeg å sortere kolonne 1 numerisk i synkende rekkefølge, deretter kolonne 2 alfabetisk i stigende rekkefølge, som vist nedenfor.

Figur F

Den resulterende tabellen er sortert som vist nedenfor.

Figur G

Formatering av tabeller

Med tabelldataene importert og sortert i en basistabell, kan vi nå bruke noe formatering ved å bruke kommandoen Format Table i Dreamweaver. Velg med kommandoen | med den aktive markøren i tabellen Format Tabell.

Figur H

Det er mange alternativer for formatering av tabellen, inkludert radfarger, justering av øverste rad for etiketter, tekststil på øverste rad, bakgrunnsfarge på øverste rad og tekstfarge på øverste rad. Et annet formateringsalternativ er å style venstre kolonne med justering og tekststyling. Bordstørrelsen kan også tilpasses; I tillegg kan du velge å bruke alle stylingattributter på TD-kodene i stedet for TR-kodene, noe som betyr at den valgte formateringen vil gjelde for de radspesifikke attributtene på hver celle i stedet for å sentralisere dem inne i radkoden.

I dette eksemplet beholdt jeg det meste av valgt standard, men jeg oppdaterte tekststilen på øverste rad til fet skrift, og endret grensen til 1, og klikket deretter Bruk og OK. Det resulterende tabellformatet vises nedenfor.

Figur I

Her er et eksempel på et annet formatvalg som ble fullført på bare mindre enn et minutt.

Figur J

For oppdateringer av tabelldata raskt, fungerer Dreamweaver som en sjarm for å importere fra avgrensede datakilder, og deretter ta sortering og formatering bare noen få minutter å etablere noen tussete tabeller. I et fremtidig stykke vil jeg gjennomgå bruk av CSS3 for å tilordne egenskaper til barndommen til tbody og styling for datatabeller.

© Copyright 2021 | pepebotifarra.com