Katrangan cara nggawe tapel tabel CSS ing limang menit
Sampeyan bisa uga krungu yen tabel CSS lan HTML ora dicampur. Iki mung ora bener. Ya, nggunakake tabel HTML kanggo tata letak ora ana maneh praktik sing paling apik kanggo desain web, wis diganti karo gaya layout CSS, nanging tabel iki isih minangka markup sing bener kanggo digunakake kanggo nambah data tabular menyang kaca web.
Sayange, amarga akeh panitia web nyingkiri adoh saka tabel sing ngira racun, akeh profesional sing ora duwe pengalaman nggarap unsur HTML umum lan perjuangan nalika kudu ngatasi kaca web kasebut. Contone, yen sampeyan duwe tabel ing kaca lan sampeyan pengin nambah garis internal menyang sel tabel.
Bates Tabel CSS
Nalika sampeyan nggunakake CSS kanggo nambah watesan menyang tabel, mung nambah wates ing njaba meja. Yen sampeyan pengin nambah garis internal menyang sel individu saka tabel kasebut, sampeyan kudu nambah wates menyang unsur CSS interior. Sampeyan uga bisa nggunakake tag HR kanggo nambah garis ing sel individu.
Kanggo nggambar gaya ing artikel iki, sampeyan kudu nduwe tabel ing kaca web sampeyan. Sampeyan banjur kudu nggawe sheet gaya minangka lembaran gaya internal ing endhas document sampeyan (sampeyan mung bakal nindakna yen "situs" iku sawijining kaca siji) utawa dilampirake ing dokumen minangka sheet style eksternal (iki apa sampeyan bakal nindakake yen situs sampeyan ana pirang-pirang kaca - ngijini sampeyan ngganti kabeh kaca saka sawijining lembar eksternal). Sampeyan bakal nggawe gaya kanggo nambah garis interior menyang lembaran gaya.
Sadurunge sampeyan miwiti
Pisanan sampeyan kudu mutusake ing ngendi sampeyan pengin baris katon ing meja sampeyan. Sampeyan duwe sawetara opsi, kalebu:
- Ngubengi kabeh sel kanggo mbentuk kothak;
- Posisi garis antarane mung kolom;
- Cukup antarane larik; utawa
- Antarane kolom utawa baris tartamtu.
Sampeyan uga bisa ngeset garis ing sel-sel individu utawa ing sel individu.
Cara Nambah Lines Around Kabeh Cell ing Tabel
Kanggo nambah garis ing kabeh sel ing meja sampeyan, nggawe efek kothak kaya, tambahake ing ngisor iki menyang lembar gaya:
td, th {
wewatesan: padhet 1px ireng;
}
Cara Nambah Lines antarane Mung Columns ing Tabel
Kanggo nambah garis antarane kolom (iki nggawe garis vertikal sing mlaku saka ndhuwur nganti ngisor ing kolom tabel), nambahake ing ngisor iki menyang lembar gaya:
td, th {
border-left: solid 1px ireng;
}
Banjur, yen sampeyan ora pengin ditampilake ing kolom kapisan, sampeyan kudu nambah kelas menyang sel-sel th lan td . Ing conto iki, kita nganggep kita duwe kelas ora ana watesan ing sel kasebut lan kita mbusak wates kasebut karo aturan CSS sing luwih spesifik. Supaya kene kelas HTML sing arep digunakake:
kelas = "no-border">
Lan banjur bisa nambah gaya ing ngisor iki kanggo sheet gaya kita:
.no-border {
wates-kiwa: none;
}
Cara Nambah Lines Antarane Cukup Baris ing Tabel
Minangka nambah baris ing antarane kolom, sampeyan bisa nindakake iki kanthi mung siji gaya prasaja sing ditambahake menyang lembar gaya sampeyan. CSS ing ngisor iki bakal nambah garis vertikal antarane saben baris tabel:
tr {
border-bottom: solid 1px ireng;
}
Lan mbusak tapel wates saka ngisor meja, sampeyan bakal nambah kelas kanggo tag sing:
kelas = "no-border">
Nambah gaya ing ngisor iki kanggo sheet gaya sampeyan:
.no-border {
border-bottom: none;
}
Cara Tambah Lines Antarane Kolom Khusus utawa Baris ing Tabel
Yen sampeyan mung pengin garis antarane baris utawa kolom tartamtu, sampeyan kudu nggunakake kelas ing sel utawa baris kasebut. Nambahake baris ing antarane kolom rada luwih angel tinimbang ing antarane baris amarga sampeyan kudu nambah kelas menyang saben sel ing kolom kasebut. Yen meja sampeyan kanthi otomatis digawé saka CMS saka sawetara jinis , iki ora bisa dilakoni, nanging yen sampeyan nganggo kode kaca tangan, sampeyan bisa nambah kelas sing tepat kaya sing dibutuhake kanggo entuk efek iki.
kelas = "sisih-wates">
Nambahake baris antarane larik luwih gampang, amarga sampeyan mung bisa nambah kelas menyang baris sing pengin ing baris.
kelas = "border-bottom">
Banjur nambahake CSS menyang lembar gaya:
.border-side {
border-left: solid 1px ireng;
}
.border-bottom {
border-bottom: solid 1px ireng;
}
Cara Nambah Lines Around Individual Cells in a Table
Kanggo nambah garis ing sel-sel individu, sampeyan nambah kelas menyang sel sing pengin mbatesi watara:
kelas = "border">
Lan banjur nambahake CSS ing ngisor iki kanggo lembar gaya sampeyan:
.wiwitan {
wewatesan: padhet 1px ireng;
}
Cara Nambah Lines Nang Sel Individu ing Tabel
Yen sampeyan pengin nambah garis ing isi sel, cara paling gampang kanggo nindakake iki yaiku tag aturan horisontal (
).
Tip Migunani
Yen sampeyan ngandhani kesenjangan ing wates sampeyan, sampeyan kudu nggawe manawa gaya border-collapse disetel ing meja sampeyan. Tambahake ing ngisor iki kanggo sheet gaya sampeyan:
table {
wates-runtuh: runtuh;
}
Sampeyan bisa nyingkiri kabeh CSS ndhuwur lan nggunakake atribut wewates ing tag tabel. Ngerti, manawa atributé, nalika ora diprentah, luwih fleksibel tinimbang CSS, amarga sampeyan mung bisa netepake jembaré wates lan mung bisa ngubengi kabèh sel ing tabel utawa ora.