Diajar kumaha nyieun wates tabel CSS di kakara lima menit
Anjeun bisa geus uninga yen CSS jeung HTML tabel teu gaul. Ieu ngan saukur teu bener. Sumuhun, ngagunakeun HTML tabel for teu ngarenah geus euweuh desain prakték pangalusna web, sanggeus kungsi diganti ku gaya perenah CSS, tapi tabel kénéh éta aksara nu bener ngagunakeun pikeun nambahkeun data tabular mun Kalurahan a.
Hanjakal, kusabab kitu loba web professional geus shied jauh ti tabel pamikiran anu sipatna racun, loba jalma professional gaduh sakedik pangalaman gawé bareng unsur HTML kieu umum sarta perjuangan nalika maranéhna kudu nanganan aranjeunna dina Kalurahan a. Contona, upami anjeun gaduh tabel di kaca anjeun hayang nambahkeun garis internal ka sél méja.
CSS Table wates
Lamun anjeun make CSS pikeun nambahkeun wates mun tabél, éta ukur nambahan wates sabudeureun luar tabél. Upami anjeun hoyong pikeun nambahkeun garis internal ka sél individu tina tabel nu, anjeun perlu nambahkeun wates jeung elemen CSS interior. Anjeun oge bisa make tag HR pikeun nambahkeun garis jero sél individu.
Dina raraga nerapkeun gaya katutupan di artikel ieu, anjeun kedah écés boga méja dina kaca web Anjeun. Anjeun teras kedah nyieun hiji gaya lambar salaku hiji lambar gaya internal dina sirah tina dokumen Anjeun (nu dipikaresep mung bakal ngalakukeun ieu lamun "situs" anjeun kaca single) atawa napel dokumen salaku hiji gaya lambar éksternal (ieu naon bakal ngalakukeun lamun situs anjeun sababaraha kaca - ngamungkinkeun Anjeun pikeun gaya sadayana kaca ti hiji lambar éksternal). Anjeun bakal nahan gaya pikeun nambahkeun garis interior kana éta gaya lambar.
Sateuacan Anjeun Mimitian
Kahiji maneh kudu mutuskeun dimana anjeun hoyong garis ka muncul dina tabel Anjeun. Anjeun gaduh sababaraha pilihan, diantarana:
- Sabudeureun sakabéh sél pikeun ngabentuk grid a;
- Positioning jalur antara ngan éta kolom;
- Ngan antara barisan; atawa
- Antara kolom atawa barisan husus.
Anjeun oge bisa posisi nu garis sabudeureun sél individu atawa jero sél individu.
Kumaha Tambahkeun Galur Kira Kabéh Sél di Table a
Nambahkeun garis sabudeureun sakabéh sél dina tabél anjeun, nyieun eta pangaruh grid kawas, nambahan di handap pikeun lambar gaya anjeun:
TD, th {
wates: padet 1px hideung;
}
Kumaha Tambahkeun Galur Antara Ngan nu Kolom di Table a
Nambahkeun garis antara kolom (ieu nyiptakeun garis nangtung nu ngajalankeun ti luhur ka handap dina kolom tabel urang), nambahan di handap pikeun lambar gaya anjeun:
TD, th {
Wates-kénca: padet 1px hideung;
}
Lajeng, upami anjeun teu hayang éta keur muncul dina kolom kahiji, anjeun bakal kudu nambahan kelas pikeun jalma th jeung sél TD. Dina conto ieu, urang nganggap urang boga kelas euweuh-wates di sél pamadegan sarta kami ngaleupaskeun wates jeung aturan CSS leuwih husus ieu. Ku kituna didieu teh kelas HTML kami bakal ngagunakeun:
kelas = "no-wates">
Lajeng urang bisa nambah gaya handap ka lambaran gaya urang:
.no-wates {
Wates-kénca: taya;
}
Kumaha Tambahkeun Galur Antara Ngan nu Jajar di Table a
Salaku kalawan nambahkeun garis antara kolom, Anjeun tiasa ngalakukeun ieu jeung ngan hiji gaya basajan ditambahkeun kana lambaran gaya Anjeun. Di handap CSS bakal nambahan garis nangtung antara unggal jejer tina méja kami:
TR {
Wates-handap: padet 1px hideung;
}
Tur ngaleupaskeun wates ti handap tabél, anjeun bakal sakali deui nambahan hiji kelas keur nu tag TR:
kelas = "no-wates">
Nambah gaya handap ka lambaran gaya anjeun:
.no-wates {
Wates-handap: taya;
}
Kumaha Tambahkeun Galur Antara Kolom spésifik atanapi Jajar di Table a
Lamun ukur hayang garis antara barisan atanapi kolom husus, anjeun kudu make kelas dina pamadegan sél atawa jajar. Nambahkeun hiji garis antara kolom rada leuwih hese tibatan antara barisan sabab kudu nambahan kelas ka unggal sél dina kolom éta. Mun méja anjeun otomatis dihasilkeun tina hiji CMS ti sababaraha jenis , ieu bisa jadi mungkin, tapi lamun aya leungeun coding kaca, Anjeun bisa nambahkeun kelas luyu sakumaha diperlukeun pikeun ngahontal éfék ieu.
kelas = "samping-wates">
Nambahkeun garis antara barisan loba gampang, anjeun ngan bisa nambahan kelas ka baris rék garis on.
kelas = "wates-handap">
Lajeng nambahkeun CSS ka lambaran gaya anjeun:
.border-sisi {
Wates-kénca: padet 1px hideung;
}
.border-handap {
Wates-handap: padet 1px hideung;
}
Kumaha Tambahkeun Galur Kira Sél Pribadi di Table a
Nambahkeun garis sabudeureun sél individual, Anjeun nambahkeun kelas pikeun sél rék wates sabudeureun:
kelas = "wates">
Lajeng nambahkeun CSS di handap pikeun lambar gaya anjeun:
.border {
wates: padet 1px hideung;
}
Kumaha Tambahkeun Galur jero Pribadi Sél di Table a
Upami anjeun hoyong pikeun nambahkeun garis jero eusi sél, cara panggampangna pikeun ngalakukeun ieu téh kalawan tag aturan horizontal (
).
Tips mangpaat
Lamun aya bewara sela di wates, anjeun kedah pastikeun yén gaya wates-runtuhna diatur dina tabel Anjeun. Tambahkeun handap ka lambaran gaya anjeun:
méja {
Wates-runtuhna: runtuhna;
}
Anjeun tiasa ulah sadaya CSS luhur tur nganggo atribut wates di tag tabel Anjeun. Nyadar kitu, eta atribut-Na, bari teu deprecated, nyaeta nyata kirang fléksibel ti CSS, anjeun ukur bisa nangtukeun lebar wates jeung ngan tiasa gaduh deui di sabudeureun sadaya sél tabel atawa nanaon.