Tgħallem kif toħloq fruntiera tabella CSS f'ħames minuti biss
Int smajt li tabelli CSS u HTML ma jitħalltux. Dan sempliċement mhux veru. Iva, l-użu ta 'tabelli HTML għat-tqassim m'għadux l-aħjar prattika fid-disinn tal-web, wara li ġie sostitwit minn stili ta' tqassim CSS, iżda t-tabelli għadhom il-marka korretta li għandha tintuża biex iżżid data tabulari f'punt web.
Sfortunatament, minħabba li ħafna professjonisti tal-web qatgħu lil hinn mit-tabelli li jaħsbu li huma velenu, ħafna minn dawk il-professjonisti ftit li xejn esperjenza jaħdmu ma 'dan l-element HTML komuni u l-ġlieda meta jkollhom jimmaniġġjawhom fuq paġna web. Per eżempju, jekk għandek tabella fuq paġna u trid iżżid linji interni maċ-ċelloli tal-mejda.
Tabella CSS Fruntieri
Meta tuża CSS biex iżżid il-fruntieri mat-tabelli, iżżid biss il-fruntiera madwar in-naħa ta 'barra tat-tabella. Jekk trid iżżid il-linji interni maċ-ċelloli individwali ta 'dik it-tabella, għandek iżżid il-fruntieri għall-elementi CSS interni. Tista 'wkoll tuża t-tikketta HR biex iżżid linji ġewwa ċelloli individwali.
Sabiex tapplika l-istili koperti f'dan l-artikolu, għandek ovvjament ikollok tabella fuq il-paġna web tiegħek. Imbagħad għandek toħloq folja tal-istil bħala karta tal -istil intern fir-ras tad-dokument tiegħek (x'aktarx li tagħmel dan biss jekk is-sit tiegħek huwa paġna waħda) jew mehmuża mad-dokument bħala folja stil esterna (dan huwa dak li għandek se tagħmel jekk is-sit tiegħek huwa paġni multipli - li bih tkun tista 'tistudja l-paġni kollha minn folja esterna). Int ser tpoġġi l-istili biex iżżid il-linji ta 'ġewwa f'dik il-folja tal-istil.
Qabel ma tibda
L-ewwel għandek tiddeċiedi fejn trid li l-linji jidhru fit-tabella tiegħek. Għandek bosta għażliet, inklużi:
- Madwar iċ-ċelloli kollha biex jiffurmaw grid;
- Pożizzjonar tal-linji bejn biss il-kolonni;
- Biss bejn ir-ringieli; jew
- Bejn kolonni jew ringieli speċifiċi.
Tista 'wkoll tqiegħed il-linji madwar ċelloli individwali jew ġewwa ċelloli individwali.
Kif Żid Linji Madwar Il-Ċelloli kollha f'Tabella
Biex iżżid linji madwar iċ-ċelloli kollha fit-tabella tiegħek, u toħloq dak l-effett bħal grilja, żid dan li ġej mal-folja tal-istil tiegħek:
td, th {
fruntiera: solidu 1px iswed;
}
Kif Żid Linji Bejn Biss il-Kolonni f'Tabella
Biex iżżid linji bejn il-kolonni (dan joħloq linji vertikali li jmorru minn fuq għal isfel fuq il-kolonni tal-mejda), żid dan li ġej mal-folja tal-istil tiegħek:
td, th {
xellug fuq il-fruntiera: solidu 1px iswed;
}
Imbagħad, jekk ma tridx li jidhru fl-ewwel kolonna, ikollok bżonn iżżid klassi ma 'dawk iċ-ċelloli th u td . F'dan l-eżempju, aħna nassumu li għandna klassi ta ' bla fruntieri fuq dawk iċ-ċelloli u nneħħu l-fruntiera b'din ir-regola tas-CSS aktar speċifika. Allura hawnhekk hija l-klassi HTML li nużaw:
klassi = "mingħajr fruntiera">
U allura nistgħu nżidu l-istil li ġej fil-karta tal-istil tagħna:
.no-border {
xellug fuq il-fruntiera: xejn;
}
Kif Żid Linji Bejn Biss Ir-Ringieli f'Tabella
Bħal biż-żieda ta 'linji bejn il-kolonni, tista' tagħmel dan bi stil sempliċi wieħed miżjud mal-folja tal-istil tiegħek. Is-CSS t'hawn taħt iżżid linji vertikali bejn kull filliera tat-tabella tagħna:
tr {
qiegħ tal-qiegħ: solidu 1px iswed;
}
U biex tneħħi l-fruntiera mill-qiegħ tat-tabella, terġa 'żżid klassi għal dik it-tikketta:
klassi = "mingħajr fruntiera">
Żid l-istil li ġej fil-folja tal-istil tiegħek:
.no-border {
qiegħ tal-qiegħ: xejn;
}
Kif Żid Linji Bejn Kolonni Speċifiċi jew Ringieli f'Tabella
Jekk trid biss linji bejn ringieli jew kolonni speċifiċi, għandek tuża klassi fuq dawk iċ-ċelluli jew ringieli. Iż-żieda ta 'linja bejn il-kolonni hija xi ftit iktar diffiċli milli bejn ringieli għax trid iżżid il-klassi ma' kull ċellula f'dik il-kolonna. Jekk it-tabella tiegħek hija ġġenerata awtomatikament minn CMS ta 'xi tip , dan jista' ma jkunx possibbli, imma jekk inti tikkodifika idejn il-paġna, tista 'żżid klassijiet xierqa kif meħtieġ biex jinkiseb dan l-effett.
klassi = "fruntiera mal-ġenb">
Iż-żieda tal-linji bejn ir-ringieli hija ħafna iktar faċli, għax tista 'biss iżżid il-klassi mar-ringiela li trid il-linja fuqha.
klassi = "fruntiera tal-qiegħ">
Imbagħad żid is-CSS mal-folja tal-istil tiegħek:
. in-naħa ta 'l-ibbrejkjar {
xellug fuq il-fruntiera: solidu 1px iswed;
}
. qiegħ tal-qiegħ {
qiegħ tal-qiegħ: solidu 1px iswed;
}
Kif Żid Linji Madwar Ċelloli Individwali f'Tabella
Biex iżżid linji madwar ċelluli individwali, żid klassi maċ-ċelloli li trid fruntiera madwar:
klassi = "fruntiera">
U mbagħad żid is-CSS li ġejja mal-folja tal-istil tiegħek:
.border {
fruntiera: solidu 1px iswed;
}
Kif Żid Linji Ġewwa Ċelloli Individwali f'Tabella
Jekk trid iżżid linji ġewwa l-kontenut ta 'ċellola, l-iktar mod faċli biex tagħmel dan huwa bit-tabella tar-regola orizzontali (
).
Għajnuniet Utli
Jekk tinnota vojt fil-fruntieri tiegħek, għandek tiżgura ruħek li l-istil tal-kollass bejn il-fruntieri huwa stabbilit fuq il-mejda tiegħek. Żid dan li ġej mal-folja tal-istil tiegħek:
tabella {
kollass transkonfinali: kollass;
}
Tista 'tevita s-CSS ta' hawn fuq u tuża l-attribut tal-fruntiera fit-tabella tal-mejda tiegħek. Irrealizza, madankollu, li l-attribut tiegħu, filwaqt li mhux deprezzat, huwa ferm inqas flessibbli minn CSS, għax tista 'tiddefinixxi biss il-wisa' tal-fruntiera u tista 'biss ikollha madwar iċ-ċelloli kollha tat-tabella jew xejn.