Kọ bi o ṣe ṣẹda CSS ipinlẹ tabili ni iṣẹju marun kan
O le ti gbọ pe CSS ati awọn tabili HTML ko dara. Eyi kii ṣe otitọ. Bẹẹni, lilo awọn tabili HTML fun ifilelẹ ko si iṣẹ ti o dara julọ lori ayelujara, lẹhin ti a ti rọpo awọn aṣa kika CSS, ṣugbọn awọn tabili jẹ ṣiṣamuwọn deede lati lo lati fi awọn data tabular si oju-iwe wẹẹbu kan.
Laanu, nitori ọpọlọpọ awọn akọọlẹ wẹẹbu ti kọ kuro ninu awọn tabili ti wọn ro pe wọn jẹ ipalara, ọpọlọpọ awọn akosemose naa ni iriri kekere ti o ṣiṣẹ pẹlu eto HTML yii ati Ijakadi nigba ti wọn ni lati mu wọn lori oju-iwe wẹẹbu kan. Fun apẹẹrẹ, ti o ba ni tabili lori oju-iwe kan ti o fẹ lati fi awọn ila inu inu si awọn tabili awọn tabili.
Awọn Borders Table CSS
Nigbati o ba lo CSS lati fi awọn aala si awọn tabili, o ṣe afikun awọn aala ni ayika ita ti tabili. Ti o ba fẹ fi awọn ila inu inu kun si awọn sẹẹli kọọkan ti tabili naa, o nilo lati fi awọn aala si awọn eroja CSS inu. O tun le lo tag HR lati fi awọn ila sinu awọn sẹẹli kọọkan.
Ni ibere lati lo awọn aza ti o wa ni abala yii, o yẹ ki o han ni tabili lori oju-iwe ayelujara rẹ. O yẹ ki o ṣẹda folda ti ara bi folda ti inu ti o wa ni ori iwe rẹ (iwọ yoo ṣee ṣe nikan ti o ba jẹ pe "Aaye" rẹ jẹ oju-iwe kan) tabi ti a fiwe si iwe-ipamọ gẹgẹbi iwe- ara ti ita (eyi ni ohun ti o yoo ṣe ti aaye rẹ ba jẹ awọn oju-ewe pupọ - fifun ọ lati ṣe gbogbo awọn oju-iwe lati oju-iwe ita kan). Iwọ yoo fi awọn aza kun lati fi awọn ila inu inu sinu wiwọn ara naa.
Ṣaaju ki o to Bẹrẹ
Akọkọ o nilo lati pinnu ibi ti o fẹ ki awọn ila han ninu tabili rẹ. O ni awọn aṣayan pupọ, pẹlu:
- Yika gbogbo awọn sẹẹli lati fẹlẹfẹlẹ kan akoj;
- N gbe awọn ila laarin awọn ọwọn;
- O kan laarin awọn ori ila; tabi
- Laarin awọn ọwọn pato tabi awọn ori ila.
O tun le gbe awọn ila ni ayika awọn olulu kọọkan tabi inu awọn sẹẹli kọọkan.
Bawo ni lati Fi Awọn Ila Kan Ni ayika Gbogbo Awọn Ẹrọ Ninu Table
Lati fi awọn ila ni ayika gbogbo awọn sẹẹli ti o wa ninu tabili rẹ, ṣiṣẹda iru ipa-ọrọ bibẹkọ, fi awọn wọnyi si folda ara rẹ:
td, th [
Agbegbe: lagbara 1px dudu;
}
Bawo ni lati Fi awọn Ila laarin Laarin Awọn Ọwọn ti o wa ninu Table
Lati fi awọn ila laarin awọn ọwọn (eyi ṣẹda awọn ila inaro ti o ṣiṣe lati oke de isalẹ ni awọn ọwọn ti tabili), fi awọn wọnyi si folda ara rẹ:
td, th [
ala-aala-osi: lagbara 1px dudu;
}
Lẹhinna, ti o ko ba fẹ ki wọn han loju iwe akọkọ, iwọ yoo nilo lati fi kilasi kan kun si awọn t-t ati td ẹyin. Ni apẹẹrẹ yi, a ro pe a ni kilasi ti ko si aala lori awọn sẹẹli naa a si yọ iyipo pẹlu ofin CSS ti o ni pato diẹ sii. Nitorina nibi ni iwe HTML ti a yoo lo:
kilasi = "ko si-aala">
Ati lẹhinna a le fi awọ ti o wa si folda wa:
.no-aala {
laala-osi: kò si;
}
Bawo ni lati Fi awọn Ila laarin Laarin Awọn Ọrun ti o wa ninu Table
Gẹgẹbi awọn iyipada awọn ila laarin awọn ọwọn, o le ṣe eyi pẹlu ọna kan ti o rọrun kan ti a fi kun si apo-ara rẹ. Awọn CSS to wa ni isalẹ yoo fi awọn ila inaro laarin ila kọọkan ti tabili wa:
tr {
laala-isalẹ: lagbara 1px dudu;
}
Ati lati yọ iyipo kuro lati isalẹ tabili naa, iwọ yoo tun tun fi kọngi kun si tag tag yii:
kilasi = "ko si-aala">
Fi awọ ara rẹ si ara rẹ si apakan ara rẹ:
.no-aala {
aala-isalẹ: kò si;
}
Bawo ni lati Fi awọn Ila laarin Awọn Akọpọ Kan tabi Awọn ori ila inu Table kan
Ti o ba fẹ ila laarin awọn ori ila tabi awọn ọwọn pato, o nilo lati lo kilasi kan lori awọn sẹẹli naa tabi awọn ori ila. Fifi ila kan laarin awọn ọwọn jẹ diẹ sii nira diẹ sii ju laarin awọn ori ila nitori pe o ni lati fi kilasi naa kun si gbogbo foonu ninu iwe yii. Ti tabili rẹ ba ni ipilẹṣẹ laifọwọyi lati CMS ti irú kan , eyi le ma ṣee ṣe, ṣugbọn ti o ba jẹ ifaminsi ọwọ ni oju-iwe naa, o le fi awọn ipele ti o yẹ fun bi o ṣe nilo lati ṣe aṣeyọri yii.
kilasi = "ẹgbẹ-aala">
Awọn ila afikun laarin awọn ori ila jẹ rọrun sii, bi o ṣe le fi awọn kilasi kun ni ẹẹ ti o fẹ ila lori.
kilasi = "aala-isalẹ">
Ki o si fi CSS kun si apakan ara rẹ:
.border-ẹgbẹ {
ala-aala-osi: lagbara 1px dudu;
}
.border-isalẹ {
laala-isalẹ: lagbara 1px dudu;
}
Bawo ni lati Fi Awọn Ila Kan Ni ayika Awọn Ẹrọ Individual ninu Table kan
Lati fikun awọn alaka ni ayika awọn sẹẹli kọọkan, o fikun-un kan si awọn sẹẹli ti o fẹ iha ariwa:
kilasi = "aala">
Ati lẹhinna fi CSS ti o tẹle si folda ara rẹ:
.border {
Agbegbe: lagbara 1px dudu;
}
Bawo ni lati Fi Awọn Ẹrọ Kan Ninu Awọn Ẹrọ Individual ninu Table kan
Ti o ba fẹ fikun awọn ila inu awọn akoonu ti alagbeka kan, ọna ti o rọrun julọ lati ṣe eyi ni pẹlu aami idalẹnu iṣakoso (
).
Awọn Italolobo Wulo
Ti o ba ṣe akiyesi awọn ela ni awọn aala rẹ, o yẹ ki o rii daju wipe a ti ṣeto ara-alaipa ara rẹ lori tabili rẹ. Fi awọn atẹle si folda ara rẹ:
tabili {
iha-aalara: Collapse;
}
O le yago fun gbogbo awọn CSS ti o wa loke ki o si lo ẹda aala ni akọle tabili rẹ. Ṣawari, sibẹsibẹ, pe iwa-ara rẹ, lakoko ti o ko dinku, jẹ pataki ti o rọrun ju CSS, bi o ṣe le ṣokasi iwọn ni agbegbe aala ati pe o le ni i ni ayika gbogbo awọn sẹẹli ti tabili tabi rara.