CSS: tabelisse. näited registreerimine

Making tabelid CSS - õppetund huvitav ja vastutab. Lähenemine selles äris vaja asjatundlikult, teadmised kõigi võimalike stiile. Lisaks on vaja omada ilumeel, et mitte hirmutada ära oma loovust külastajaid.

Tabelid saab muuta peaaegu kõike. Ilus disain hõlmab kasutamist CSS tabelite disaini piire, laud tausta, ruudu tausta, lõhet nende ja rohkem. Vaatleme põhilisi.

tabelis piiri

CSS tabeli stiilis disain kaasneb alati mängu piiri (raam). Kõik vaikimisi tabelid ei ole kontuure raami. See tähendab, see on võrdne 0 pikslit. Aga see saab korrigeerida vara piiri.

Saate määrata välimine raam kogu tabel:

laua {border: 3PX mustadel; }

Tänu sellele line üldse tabelite kohapeal, et kasutab seda stiili on must raam. Pange tähele, et piiri ainult servadest, kuid mitte sees tabelis. Rakuliinide ja raami sätestatud teisiti.

th, td {border: 3PX mustadel;}

Paksus ja värvi, saad määrata suvalise. Pea meeles, et piirid ei kahekordseks kui splaissimise rakke.

Sõna tähistab tahke pidevalt registreeritavad. Saate määrata ka muid väärtusi.

see on kõige sagedamini kasutatav tahke raami, kui tundub atraktiivsemaks ja ei tõmbaks tähelepanu põhisisu kohapeal.

border vara saab määrata ka laual. Piir võib seada ainult ülevalt, alt, vasakule või paremale küljele. Kuna mõnel juhul ei ole võimalik variant koos raamiga kogu tabel korraga.

laua {border-top: 1px pidevalt punane; }

Nii saab raami ülemise tabeli ainult. Sarnaselt muu isik, mitte ainult top kirjutada: paremale, vasakule või alt.

tabeli päise

Tabel kaudu saab määrata kasutades tag . See silt võib olla CSS registreerida palju omadusi viimistlemist. CSS tabelisse on hea, sest see on võimalik manööverdada elemente nii, nagu soovite.

See pealkirjas kuvatakse samamoodi nagu standardse raamatutes (nt "Tabel 1").

Saate määrata asukoha pealkirja ja vara caption-side (ülevalt või alt). Joondamine vasakule või paremale on määratletud vara text-align.

tausta tabelid

Taust tabeli võib olla mis tahes värvi või mustri. Värvus seab vara background-color. Nimed omadused täielikult kooskõlas kasutuseks kõnes. See hõlbustab salvestamiseks mitu korda.

Värvi saab määrata nime ja erinevaid kodeeringuid. Lisaks saate määrata järgmised:

• Läbipaistev - läbipaistev.
• Päri - värv on sama mis vanema element.
• Esmane - default.

Valik läbipaistvust saab kasutada nendel juhtudel, kui kõik tabelid teksti CSS faili tehakse üks värv, kuid sel juhul ei ole vaja.

Lisaks võib tagapõhi olema pilt. Selleks stiilis kirjutatud background-image vara. Tee on selline:

url ( "URL")

Tee faili võib olla sugulane või absoluutne.

Keerulisem täita saab teha gradiendiga:

• lineaarse gradiendiga ();
• radiaal- gradient ();
• Korrates mittelineaarseid-gradient () kordamiseks kodarluu-gradient () - gradient korrata.

taustal raku

Lisaks taustal üldiselt saate määrata triibuline taust veerud või read. Registreerimiseks vara kasutatakse väga sageli, sest visuaalne eraldamine read lihtsam lugeda teavet.

Lisaks vaheldumine, ja te saate määrata, mitu kindla veeru või rea. Näiteks nii:

• tr: nda lapse (isegi) {...} - täpsustada põimitud;
• tr: nda lapse (1) {...} - märge omadusi mõnes reas;
• td: nda lapse (isegi) {...} - märge vaheldumisi veergu;
• td: nda-laps (1) {...} - märge omadusi eriti veerus.

Pealegi järjestuse ja numbrite saab määrata - esimene (td: esimese lapse) või viimase (td: viimase laps).

Lõhe rakud

CSS, laud disain võimaldab teil eemaldada tühikuid rakke. Vaikimisi nad on. Näiteks kui seate raami tabelis seadmata vahemaa piirid, siis on siin see tulemus.

Nõus, see näeb mitte väga kena ja see ei ole mugav lugeda. Kasutajad saavad sulin silmis, sest sellest. Eemalda need lüngad saab kirjutades just selline tabeli rida stiilis:

border-kokkuvarisemine: kokkuvarisemine

Aga see ka juhtub, et vahemaa, vastupidi, tuleks suurendada. Lisaks pilude suurus saab määrata veergude vahel ja ridade vahelt. Näitamaks, et väärtus (mitte kollaps):

border-kokkuvarisemine: eraldi

Aga selline tegevus näitab, et see on vajalik, et eraldada rakkudest. Nagu see oli nende osakaal, näitas veel vara:

border-vahe: 20px.

Kui soovite määrata mõne muu vahemaa ridade ja veergude, näitab see kahte asja:

border-vahe: 10px20px.

Erinevus brauserid

Pea meeles, et CSS disaini tabelid ilme võib olla erinev, sõltuvalt brauserist. Eriti halb on olukord vanemad versioonid, et uuendusi CSS ei toetata.

Eeltoodu on näide raami paksuse digitaalsele väärtusi.

Selle näite jaoks paksus raamide konstandid.

border stiile ka väga erinevad.

Seetõttu peab alati näha tulemust erinevates brauserites.

CSS disaini tabelid soovitatav kontrollida brauseri tüüp. Eriti suur probleem varem kasutajatele vanemad versioonid Internet Explorer.

Väga arenenud arendajad saavad sõltuvalt brauseri ühendada täiesti erinev CSS faile. Ja keegi teeb kontrolli iga või mõne konkreetse stiili (klass).

Enamik probleeme tekkida varjud.

CSS: Tabel Formaat näited

Registreerimine saab üsna erinev. See kõik sõltub kogu saidi ja selle disain. Kõik tuleks ühendada ja kirev värve. Ka see teeb suurt rolli ja maitse arendaja. Ilumeel on kõik erinevad.

Anname mõned näited erinevate tabelitega. Ülaltoodud joonisel kasutamist kallutada ja mängida taustavärvi ja piiri.

Paljud on huvitav näide ilus puhas disain, mis ei lõigata silma kasutajad. See teostus on asjakohane peaaegu igas olukorras.

Servad on võimalik teha ümardatud. Tundub päris kena.

järeldus

Nagu näete, välimus tabelite CSS on palju tööriistu. Iga parameeter on ka suur hulk raha võimalusi. Kui sa seda kasutada korraga, saate luua meistriteosed. Eriti kui sa kohandamisvõi- kõigi brauseritega.

Peaasi disain - ärge üle pingutage seda mõju. Kõike tuleks teha mõõdukalt. Alguses kujundus meeldib eksperimenteerida ja kasutada kõiki oma teadmisi kohe. Selle tulemusena on tabeli üleküllastunud omadused. Püüa vältida neid vigu.

Lisaks on mõned parameetrid võivad üksteist segama. Näiteks ei ole vaja täpsustada taustavärvi tabeli, samas kui on olemas veel määratud taustapilt, mis kattuvad määratud värvi.