Hvordan stille inn størrelsen på en HTML-tabell.
Det ble populært, webdesignere brukte hovedsakelig tabelloppsettmetoden og fikk veldig gode resultater.
Tagger som brukes til å bygge en tabell i html
bord- en nødvendig brikke som åpner og lukker bordet
bildetekst- valgfri tag som indikerer tabelltittelen
th- en valgfri kode, hvis åpnings- og avslutningsbrikker inneholder kolonnenavnet. Virker vanligvis fet
tr- en nødvendig brikke som åpner og lukker linjen
td- en nødvendig kode som indikerer åpning og lukking av en celle på rad
Eksempelkode for en enkel tabell
| Stobets 1 | Stobets 2 |
|---|---|
| Tekst i første celle | Tekst i andre celle |
Nettleseren vises
Formål med tabeller i html
Leksjonen om bord er veldig viktig! Takket være tabeller kan du ordne ikke bare tekst, men også bilder, lenker og mye mer. I tabellen kan du spesifisere bakgrunn(eller dens farge), innrykk, bredde, grense Og andre parametere som vil gi henne en vakker utseende. Tabell – Ditt første skritt til å forstå webdesign! Tidligere var mange nettsteder fullstendig lagt ut som tabeller, det vil si alt som brukeren så ( sidefelt, Toppmeny, innhold) - var innholdet i cellene i et stort bord.La oss gå direkte til egenskapene som gjør bordet vakkert...
Egenskaper og parametere for html-tabeller: innrykk, bredde, bakgrunnsfarge, kantlinje (ramme)
U bordmerke det er følgende attributter:bredde- bordbredde. kan være i piksler eller % av skjermbredden.
bgcolor- bakgrunnsfarge på tabellceller
bakgrunn- fyller bordbakgrunnen med et mønster
grense- ramme og border i bordet. Tykkelsen er angitt i piksler
cellefylling- utfylling i piksler mellom celleinnholdet og dens indre kant
Som før skriver vi attributtverdien i anførselstegn.
| Stobets 1 | Stobets 2 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Stobets 1 | Stobets 2 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Tekst i den første cellen i den første kolonnen | Tekst i den andre cellen i den andre kolonnen | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Stobets 1 | Stobets 2 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Tekst i den første cellen i den første kolonnen | Tekst i den andre cellen i den andre kolonnen | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Stobets 1 | Stobets 2 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Stobets 1 | Stobets 2 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Tekst i den første cellen i den første kolonnen | Tekst i den andre cellen i den andre kolonnen | Og | . Fest høyden ved hjelp av høydeegenskaper Ikke anbefalt. Th, td (polstring: 10px 15px;) 3. Hvordan sette bordbakgrunnenMisligholde bordbakgrunn og cellene er gjennomsiktige. Hvis siden eller blokken som inneholder tabellen har en bakgrunn, vil den vises gjennom tabellen. Hvis bakgrunnen er spesifisert for både tabellen og cellene, vil bare bakgrunnen til cellene være synlig på steder der bakgrunnen til tabellen og cellene overlapper. Bakgrunnen for tabellen som helhet og dens celler kan være: 4. TabellkolonnerModell CSS-tabeller fokusert hovedsakelig på linjer (rader) dannet ved hjelp av taggen | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Selskap | Q1 | Q2 | Q3 | Q4 |
|---|
Ris. 2. Eksempel på visning av en overskrift under en tabell 6. Hvordan fjerne mellomrom mellom cellerammer
Som standard er tabellcellerammer atskilt med et lite mellomrom. Hvis du angir border-collapse: collapse for tabellen, vil gapet bli fjernet. Eiendommen går i arv.
Syntaks
Tabell (border-collapse: collapse;) 
Ris. 3. Eksempel på tabeller med sammenslåing og separate cellerammer
7. Hvordan øke mellomrommet mellom cellerammer
Ved å bruke egenskapen kantlinjeavstand kan du endre avstanden mellom cellerammer. Denne eiendommen gjelder for tabellen som helhet. Nedarvet.
Syntaks
Tabell (border-collaps: separate; border-spacing: 10px 20px;) tabell (border-collapse: separate; border-spacing: 10px;) 
Ris. 4. Eksempel på tabeller med økt mellomrom mellom cellerammer
8. Hvordan skjule tomme tabellceller
Egenskapen tomme celler skjuler eller viser tomme celler. Påvirker bare celler som ikke inneholder noe innhold. Hvis en celle er satt til en bakgrunn og en tabell er satt til tabell (border-collapse: collapse;) , vil ikke cellen skjules. Nedarvet.
| Selskap | Q1 | Q2 | Q3 |
|---|---|---|---|
| Microsoft | 20.3 | 30.5 | |
| 50.2 | 40.63 | 45.23 |
Ris. 5. Skjul eksempel tom celle tabeller 9. Sett opp en tabell ved å bruke egenskapen table-layout
Tabelloppsettet bestemmes av en av to tilnærminger: fast layout eller automatisk layout. Under oppsettet i i dette tilfellet refererer til hvordan bredden på tabellen er fordelt på cellebreddene. Eiendommen går ikke i arv.
Syntaks
Tabell (tabelloppsett: fast;)
10. Beste bordoppsett
1. Horisontal minimalisme
Horisontale tabeller er tabeller der teksten leses horisontalt. Hver enhet er en egen rad. Du kan arrangere lignende bord i minimalistisk stil ved å plassere en to-pikslers kantlinje under overskriften. 
| Ansatt | Lønn | Bonus | Veileder |
|---|---|---|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephine Tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
På store mengder rader, gjør denne tabelldesignen dem vanskelige å lese. For å løse dette problemet kan du legge til en en-piksel-kant under alle td-elementer. 
Td (kant-bunn: 1px solid #ccc; farge: #669; polstring: 9px 8px; overgang: .3s lineær; )/*resten av koden er som i eksemplet ovenfor*/
Å legge til en :hover-effekt til tr-elementet vil gjøre tabeller designet i en minimalistisk stil lettere å lese. Når du holder musepekeren over en celle, utheves de gjenværende cellene i samme rad samtidig, noe som gjør det lettere å spore informasjon hvis tabeller har flere kolonner. 
Th ( font-weight: normal; color: #039; padding: 10px 15px; ) td ( farge: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:hover td (bakgrunn: #e8edff ;)
2. Vertikal minimalisme
Selv om slike tabeller sjelden brukes, er vertikalt orienterte tabeller nyttige for å kategorisere eller sammenligne beskrivelser av objekter representert av en kolonne. Du kan designe dem i en minimalistisk stil ved å legge til plass for å skille kolonnene. 
Th ( font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-venstre: 30px solid #fff; farge: #039; polstring: 8px 2px; ) td ( border- høyre: 30px solid #fff; kantlinje-venstre: 30px solid #fff; farge: #669; polstring: 12px 2px; )
3. Boksstil
Den mest pålitelige stilen for å designe bord av alle typer er den såkalte "boksede" stilen. Det er nok å velge en god fargevalg, og angi deretter bakgrunnsfargen for alle celler. Ikke glem å understreke forskjellen mellom linjer ved å sette grenser som skilletegn. 
Th ( font-size: 13px; font-weight: normal; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px; ) td ( bakgrunn : #e8edff; border-bottom: 1px solid #fff; farge: #669; border-top: 1px solid transparent; polstring: 8px; ) tr:hover td (bakgrunn: #ccddff;)
Det vanskeligste er å finne fargevalget som harmonisk vil matche nettstedet ditt. Hvis nettstedet er tungt på grafikk og design, vil det være ganske vanskelig for deg å bruke denne stilen. 
Tabell ( font-familie: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; maks-width: 70%; width: 70%; text-align: center; border-collapse: collapse ; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; ) th ( font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border- venstre: 1px solid #9baff1; farge: #039; polstring: 8px; ) td ( bakgrunn: #e8edff; border-right: 1px solid #aabcfe; border-venstre: 1px solid #aabcfe; farge: #669; polstring: 8px ;)
4. Horisontal sebra
Sebrabordet ser ganske attraktivt og komfortabelt ut. Ekstra farge Bakgrunnen kan tjene som en visuell pekepinn for folk når de leser tabellen. 
Th ( font-weight: normal; color: #039; padding: 10px 15px; ) td ( color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:nth-child(2n) ( bakgrunn: #e8edff;)
5. Avisstil
For å oppnå den såkalte aviseffekten kan du legge border på bordelementer og leke med cellene inni. En lett, minimalistisk avisstil kan se slik ut: lek med fargeskjemaet, legg til kanter, polstring, ulike bakgrunner, og effect:hover når du svever over en linje. 
Tabell (border: 1px solid #69c;) th ( font-weight: normal; color: #039; border-bottom: 1px stiplet #69c; padding: 12px 17px; ) td ( farge: #669; padding: 7px 17px; ) tr:hover td (bakgrunn: #ccddff;)
Tabell (kant: 1px solid #69c;) th ( font-weight: normal; color: #039; padding: 10px; ) td ( farge: #669; border-top: 1px stiplet #fff; polstring: 10px; bakgrunn: #ccddff; ) tr:hover td (bakgrunn: #99bcff;)
Tabell (border: 1px solid #6cf;) th ( font-weight: normal; font-size: 13px; color: #039; teksttransform: store bokstaver; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; border-venstre: 1px solid #0865c2; border-bottom: 1px solid #fff; polstring: 20px; ) td ( farge: #669; kantlinje-høyre: 1px stiplet #6cf; polstring: 10px 20px;)
6. Tabellbakgrunn
Hvis du er ute etter en rask og unik måte borddesign, velg et attraktivt bilde eller bilde relatert til bordtemaet og sett det som bordbakgrunn. 
Jpg") no-repeat; bakgrunnsposisjon: 100 % 55px; ) th ( font-weight: normal; color: #339; padding: 10px 12px; ) td ( background: url("https://site/images/ tilbake..png"); bakgrunn: gjennomsiktig; )
1. Hva er HTML-tabeller og hvorfor trengs de?
html-tabeller- Dette er en av de mest grunnleggende komponentene på hver html-side og følgelig hvert nettsted. For eksempel består hele siden av tabeller: bilder, tekster, lenker, registreringsskjemaer - alt er plassert i forhold til hverandre ved hjelp av html-tabeller (faktisk er hele siden også plassert i en stor tabell).
2. Hvilke tagger har html-tabeller?
Tagger, som definerer html-tabellen skrives slik:
Men siden vi vet at alle tabeller består av rader og kolonner (celler), så må vi sette tagger for dem også:
La oss nå prøve å kombinere alle kodene i én tabell. For å gjøre dette vil vi lage en html-tabell som består av to rader og tre kolonner:
Denne html-tabellen er veldig enkel å lage. Først, la oss sette kodene til selve tabellen, der vi plasserer det nødvendige antallet rader (i vårt eksempel, 2 rader):
Deretter deler vi hver rad i celler ved å bruke kolonnekoder:
| - celle 1.1 | - celle 1.2 | - celle 1.3 |
| - celle 2.1 | - celle 2.2 | - celle 2.3 |
Faktisk er det første sifferet i inskripsjonene radnummeret, og det andre er cellenummeret (1x2 - første rad, andre celle, etc.).
3. Hvordan sette bakgrunnsfargen til html-tabeller?
La oss nå finne ut hvordan du setter bakgrunnen til tabellen eller hver celle separat.
Så for å angi bakgrunnen brukes attributtet bgcolor="bakgrunnsfarge".
For eksempel, hvis vi trenger å angi én farge for hele skiltet, gjør vi det slik:
| - celle 1.1 | - celle 1.2 | - celle 1.3 |
| - celle 2.1 | - celle 2.2 | - celle 2.3 |
For eksempel, hvis du trenger å lage et gult skilt, skriver vi:
Hvis nødvendig sett bakgrunnsfarge en rekke html-tabellen, deretter attributtet bgcolor="bakgrunnsfarge" gjelder for tag
|
| 1.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.3 |
I dette tilfellet, attributtet telefonnummer settene hvit farge tekst plassert inne i taggen.
På nøyaktig samme måte er det spesifisert fargen på hver celle separat. For eksempel, hvis du vil endre fargen på celle 1.2 til blå, så inne i åpningstaggen
4. Hvordan stille inn størrelsen på bredden og høyden på html-tabellceller?
Så, for å manuelt angi bredden og høyden på cellene, bruk høyde- og breddeattributtene. De kan settes for hele tabellen, for én rad eller for en celle (kolonne). Høyde og bredde kan spesifiseres i enten piksler eller prosenter. I vårt tilfelle vil vi sette bredden og høyden i piksler for kolonnene (cellene).
høyde- attributt som angir høyden på cellen
bredde- attributt som spesifiserer bredden på cellen
Og nå for et eksempel:
Nå skal jeg forklare hvorfor vi setter cellehøyden bare én gang i hver rad.
Hvis du i en rad angir en høyde for en celle som er større enn for andre, vil til tross for dette alle cellene (kolonnene) i raden din være like høye som den største. Og bredden på hver rad er best å sette separat!
Du kan stille inn høyde og bredde for hele bordet. I dette tilfellet vil alle celler (kolonner) og rader dele plassen som er gitt dem likt, hvis du ikke angir disse parametrene personlig (som en prosentandel av den totale bredden (høyden) på tabellen eller i piksler).
Dessuten må du veldig ofte stille inn høyden og bredde bredde i prosenter:
Hvis vi setter bredden på en celle til 40 prosent, som i vårt eksempel, betyr dette at vi fortsatt har 60 prosent igjen for de resterende cellene, dvs. summen av deres bredder bør ikke overstige 60 prosent. Alt er veldig enkelt: Totalt har vi bare 100%. Vi teller: 100 – 40 = 60.
5. Hvordan justere tekst inne i en html-tabell?
La oss nå finne ut hvordan du justerer teksten i HTML-tabellen vår til venstre, høyre og i midten.
Dette gjøres ved å bruke attributtet:
align = "venstre"- justerer teksten inne i html-tabellen til venstre
align = "senter"- justerer html tekst tabeller sentrert
align = "høyre"- justerer teksten inne i html-tabellen til høyre
Følgelig kan align-attributtet også ta verdiene til høyre og venstre. Betydningen av rettferdiggjøre når den brukes med en tag
For eksempel ser html-koden for en tabell hvis tekst er sentrert slik ut:
|
Ved å registrere attributtet align="center" i åpningen
| 1x1 | 1.2 | 1x3 |
| 2.1 | 2x2 | 2.3 |
La oss nå se på et eksempel på hvordan du justerer tekst inne i en html-tabell langs den øvre eller nedre kanten, det vil si hvordan du kan sørge for at innholdet i en celle ikke bare er plassert nøyaktig i midten av den (som standard ), men også øverst eller nederst.
Vertikal justering spesifisert av attributtet:
valign="top"- innholdet vil være plassert øverst i cellen
valign="midt"- innholdet vil være plassert i midten av cellen
valign="bottom"- innholdet vil være plassert nederst i cellen
La oss se på disse attributtene ved å bruke vårt eksempel:
|
Dette er hva vi får hvis vi ser på resultatet av attributtene i nettleseren: tilpasse Og valign:
| 1x1 | 1.2 | 1x3 |
| 2.1 | 2x2 | 2.3 |
6. Hvordan kombinere celler og kolonner i en HTML-tabell?
I denne delen av artikkelen vår vil vi snakke om attributter colspan Og radspenn.
colspan- definerer antall kolonner som skal brukes denne cellen
radspenn- bestemmer antall rader som denne cellen strekker seg til
Verdier colspan Og radspenn kan ta en verdi fra 2 eller mer, dvs. en celle kan strekke seg over to eller flere kolonner (rader).
Så nå, ved å bruke eksempelet, vil vi strekke en 1x1 celle inn i to kolonner (celler). Til dette vil vi bruke colspan-attributt="2", registrerer den for 1x1-cellen. Koden vil se slik ut:
Som vi kan se, strekker 1x1-cellen seg over lengden av to celler. Følgelig er lengden lik den summerte lengden til disse to cellene (160 piksler). Vi spesifiserte ikke et breddeattributt for 1x1-cellen, men hvis vi bestemte oss for å gjøre det, ville vi satt bredden til 160 piksler. Og også, vær oppmerksom på at i vårt eksempel er det ingen 1x3 celle, dvs. det er bare to celler i den første raden, hvorfor - vi har allerede diskutert dette - en 1x1 celle er lik to celler, takket være colspan-attributten.
Attributtene colspan og rowspan må håndteres svært forsiktig. En feil kan føre til at nettstedet ditt krasjer.
Og nå som vi forstår colspan-parameteren, la oss se på parameteren rowspan. Driftsprinsippet er det samme:
|
| 1.1 | 1.2 | |
| 2.1 | 2.2 | |
Dermed lærte vi å kombinere celler i rader og kolonner med html-tabeller.
7. Hvordan fjerne, legge til eller endre innrykk og hvordan sette en ramme for en html-tabell?
Så tidligere laget vi en html-tabell, innrykk mellom cellene er tydelig synlige. For å gjøre dem synlige enda bedre, la oss legge til en ramme for bordet vårt. Dette gjøres ved å bruke attributter:
border="border width in pixels"- setter rammebredden
bordercolor="border color"- setter rammefargen
La oss for eksempel gi html-tabellen vår en svart ramme 1 piksel bred.
For denne taggen
|
|||||
Hvis vi ser på resultatet i nettleseren, ser vi tydelig at avstanden mellom cellene ( celleavstand) i HTML-tabellen vår har økt til 10 piksler, og avstanden mellom teksten og den indre kanten av cellen har økt med 20 piksler.
| 1.1 | 1.2 | |
| 2.1 | 2.2 | |
Hvis du trenger å fjerne innrykk helt, så enkelt sett cellpadding="0" Og cellspaceing="0".
8. Hvordan sette inn en HTML-tabell i en annen?
Vi nærmer oss sluttfasen av lære html tabeller. Nå skal vi lære hvordan du setter inn en tabell i en annen.
For eksempel, inne i celle 1.2 vil vi sette inn nytt bord, bestående av en rad og to kolonner. I den interne html-tabellen vil vi sette en rød kant med en bredde på 2 piksler og en avstand mellom cellene på 0 piksler. Vi vil også plassere den interne tabellen øverst i cellen.
Dette gjøres veldig enkelt:
|
|||||||
Dette er hva som skjedde som et resultat av de nye transformasjonene av bordet vårt (røde celler er en intern tabell plassert inne i et stort bord):
| 1.1 |
|
|||
| 2.1 | 2.2 | |||
På dette tidspunktet vil vi avslutte denne artikkelen. Jeg tror det viste seg å være vellykket og ikke vanskelig å forstå, og jeg håper du ikke får flere problemer med tabellene.
bordets kropp er plassert. Kroppen består av rader og kolonner. Tabellen fylles ut linje for linje.Hver merkelapp
Hvordan lage en tabell i html
La oss gi et eksempel, html-kode:
Eksempeltabell Kolonne 1 Kolonne 2
Vær oppmerksom på cellen
La oss nå se nærmere på alle tag-attributtene
| eller linjer | ||||||||||||||||||||||||||||||||||||||||||
| ... | ... |
...
2. Property background="URL" - sett bakgrunnsbilde. I stedet for URL-en skal adressen til bakgrunnsbildet skrives. Eksempel
Konverterer til følgende på siden: I det betraktede eksemplet er vår bakgrunnsbilde ligger i img-mappen (som er i samme katalog som html-siden), og bildet heter fon.gif . Vær oppmerksom på at i taggen la vi til style="color:white;" . Siden bakgrunnen er nesten svart, for å hindre at teksten blander seg inn i bakgrunnen, har vi laget teksten hvit. 3. Egenskap bgcolor="color" - setter bakgrunnsfargen til tabellen. Du kan velge hvilken som helst farge fra hele paletten (se koder og navn på html-farger) 4. Property border="number" - angir tykkelsen på bordkanten. I tidligere eksempler spesifiserte vi border="1" , som betyr at kanttykkelsen er 1 piksel. 5. Property bordercolor="color" - setter fargen på kantlinjen. Hvis border="0" vil det ikke være noen kant og kantfargen vil ikke ha noen betydning. 6. Egenskap cellpadding="nummer" - innrykk fra rammen til celleinnholdet i piksler. 7. Property cellspacing="number" - avstanden mellom cellene i piksler. 8. Egenskap cols="number" - antall kolonner. Hvis du ikke angir det, vil nettleseren selv bestemme antall kolonner. Den eneste forskjellen er at å spesifisere denne parameteren vil mest sannsynlig øke hastigheten på lasting av tabellen. 9. Property frame="parameter" - hvordan vise grenser rundt bordet. Kan ta følgende verdier:
10. Property height="number" - angir høyden på tabellen: enten i piksler eller i prosenter. 11. Egenskapsregler="parameter" - hvor skal grenser mellom celler vises. Kan ta følgende verdier:
|
