ຮຽນຮູ້ວິທີສ້າງຂອບເຂດຕາຕະລາງ CSS ໃນຫ້ານາທີ
ທ່ານອາດຈະໄດ້ຍິນວ່າຕາຕະລາງ CSS ແລະ HTML ບໍ່ປະສົມປະສານ. ນີ້ບໍ່ແມ່ນຄວາມຈິງ. ແມ່ນແລ້ວ, ການນໍາໃຊ້ຕາຕະລາງ HTML ສໍາລັບການອອກແບບແມ່ນບໍ່ມີການອອກແບບທີ່ດີທີ່ສຸດໃນການອອກແບບເວັບ, ໄດ້ຖືກແທນທີ່ດ້ວຍຄໍເຕົ້າໄຂ່ທີ່ CSS, ແຕ່ຕາຕະລາງຍັງແມ່ນເຄື່ອງຫມາຍທີ່ຖືກຕ້ອງທີ່ຈະໃຊ້ໃນການເພີ່ມຂໍ້ມູນຕາຕະລາງໃສ່ຫນ້າເວັບ.
ແຕ່ຫນ້າເສຍດາຍ, ເນື່ອງຈາກວ່າຜູ້ຊ່ຽວຊານດ້ານເວັບຕ່າງໆໄດ້ຫລີກລ້ຽງອອກຈາກຕາຕະລາງຄິດວ່າມັນເປັນພິດ, ຫຼາຍໆຄົນທີ່ມີປະສົບການເຫຼົ່ານີ້ມີປະສົບການຫນ້ອຍທີ່ເຮັດວຽກຮ່ວມກັບອົງປະກອບ HTML ທົ່ວໄປແລະການຕໍ່ສູ້ໃນເວລາທີ່ເຂົາເຈົ້າຕ້ອງຈັດການໃຫ້ພວກເຂົາຢູ່ໃນເວັບໄຊທ໌. ຕົວຢ່າງ: ຖ້າທ່ານມີຕາຕະລາງຢູ່ໃນຫນ້າແລະທ່ານຕ້ອງການເພີ່ມສາຍພາຍໃນກັບຕາຕະລາງຕາຕະລາງ.
CSS Borders ຕາຕະລາງ
ເມື່ອທ່ານໃຊ້ CSS ເພື່ອເພີ່ມຂອບກັບຕາຕະລາງ, ມັນພຽງແຕ່ເພີ້ມຂອບເຂດທີ່ຢູ່ນອກຕາຕະລາງ. ຖ້າທ່ານຕ້ອງການເພີ່ມສາຍພາຍໃນກັບແຕ່ລະຈຸລັງຂອງຕາຕະລາງນັ້ນ, ທ່ານຈໍາເປັນຕ້ອງໃສ່ຂອບຂອງອົງປະກອບພາຍໃນ CSS. ນອກນັ້ນທ່ານຍັງສາມາດໃຊ້ແທໍກ HR ເພື່ອເພີ່ມສາຍໃນສ່ວນຂອງແຕ່ລະຄົນ.
ໃນຄໍາສັ່ງທີ່ຈະສະຫມັກຂໍເອົາຮູບແບບຕ່າງໆໃນບົດຄວາມນີ້, ທ່ານຄວນຈະມີ ຕາລາງ ໃນຫນ້າເວັບຂອງທ່ານແນ່ນອນ. ຫຼັງຈາກນັ້ນ, ທ່ານຄວນສ້າງແຜ່ນສະໄຕເປັນເອກະສານແບບ ພາຍ ໃນຫົວຂອງເອກະສານຂອງທ່ານ (ທ່ານອາດຈະເຮັດແບບນີ້ຖ້າ "ເວັບໄຊທ໌" ຂອງທ່ານເປັນຫນ້າດຽວ) ຫຼືຕິດເອກະສານ ແບບເອກະສານສະໄຕພາຍນອກ (ນີ້ແມ່ນສິ່ງທີ່ທ່ານ ຈະເຮັດແນວໃດຖ້າເວັບໄຊທ໌ຂອງທ່ານມີຫລາຍຫນ້າ - ອະນຸຍາດໃຫ້ທ່ານໃຫ້ສະແດງຫນ້າທັງຫມົດຈາກເອກະສານພາຍນອກຫນຶ່ງ). ທ່ານຈະເຮັດໃຫ້ຄໍເຕົ້າໄຂ່ທີ່ເພີ່ມເສັ້ນພາຍໃນເຂົ້າໃນຮູບແບບແບບນັ້ນ.
ກ່ອນທີ່ທ່ານຈະເລີ່ມຕົ້ນ
ຫນ້າທໍາອິດທ່ານຈໍາເປັນຕ້ອງຕັດສິນໃຈວ່າບ່ອນໃດທີ່ທ່ານຕ້ອງການສາຍຈະປາກົດຢູ່ໃນຕາຕະລາງຂອງທ່ານ. ທ່ານມີທາງເລືອກຫຼາຍຢ່າງ, ລວມທັງ:
- ລ້ອມຮອບທັງຫມົດຂອງຈຸລັງທັງຫມົດເພື່ອສ້າງຕາຂ່າຍໄຟຟ້າ;
- ຕັ້ງຕໍາແຫນ່ງລະຫວ່າງເສັ້ນພຽງແຕ່;
- ພຽງແຕ່ລະຫວ່າງແຖວ; ຫຼື
- ລະຫວ່າງຄໍລໍາຫຼືແຖວສະເພາະ.
ນອກນັ້ນທ່ານຍັງສາມາດຕັ້ງເສັ້ນຮອບໆແຕ່ລະຈຸລັງຫຼືພາຍໃນຈຸລັງແຕ່ລະຄົນ.
ວິທີການເພີ່ມເສັ້ນປະມານຫ້ອງທັງຫມົດໃນຕາຕະລາງ
ເພື່ອເພີ່ມສາຍທົ່ວທຸກໆຈຸລັງໃນຕາຕະລາງຂອງທ່ານ, ສ້າງຜົນກະທົບທີ່ຄ້າຍຄືຕາຂ່າຍໄຟຟ້າ, ໃຫ້ຕື່ມຂໍ້ມູນຕໍ່ໄປໃສ່ແຜ່ນສະໄຕຂອງທ່ານ:
td, th {
border: solid 1px black
}
ວິທີການເພີ່ມເສັ້ນທາງລະຫວ່າງພຽງແຕ່ຄໍລໍາໃນຕາຕະລາງ
ເພື່ອເພີ່ມສາຍລະຫວ່າງຄໍລໍາ (ນີ້ສ້າງເສັ້ນຕັ້ງທີ່ດໍາເນີນການຈາກເທິງຫາລຸ່ມສຸດໃນຄໍລໍາຂອງຕາຕະລາງ), ຕື່ມຂໍ້ມູນຕໍ່ໄປນີ້ໃສ່ແຜ່ນສະໄຕຂອງທ່ານ:
td, th {
border-left: solid 1px black;
}
ຫຼັງຈາກນັ້ນ, ຖ້າທ່ານບໍ່ຕ້ອງການໃຫ້ພວກເຂົາປາກົດຢູ່ໃນຖັນທໍາອິດ, ທ່ານຈໍາເປັນຕ້ອງເພີ່ມຫ້ອງຮຽນໃຫ້ແກ່ຫ້ອງການ ທີ ແລະ td . ໃນຕົວຢ່າງນີ້, ພວກເຮົາສົມມຸດວ່າພວກເຮົາມີລະດັບ ບໍ່ມີຂອບເຂດ ຢູ່ໃນຈຸລັງເຫຼົ່ານັ້ນແລະພວກເຮົາເອົາຊາຍແດນກັບກົດລະບຽບ CSS ນີ້ສະເພາະ. ດັ່ງນັ້ນ, ນີ້ແມ່ນຫ້ອງຮຽນ HTML ທີ່ພວກເຮົາຈະນໍາໃຊ້:
class = "no-border">
ແລະຫຼັງຈາກນັ້ນພວກເຮົາສາມາດເພີ່ມແບບດັ່ງຕໍ່ໄປນີ້ກັບເອກະສານສະໄຕຂອງພວກເຮົາ:
no-border {
border-left: none;
}
ວິທີການເພີ່ມເສັ້ນທາງລະຫວ່າງແຖວພຽງແຕ່ໃນແຖວ
ເຊັ່ນດຽວກັນກັບການເພີ່ມສາຍລະຫວ່າງຄໍລໍາ, ທ່ານສາມາດເຮັດແບບນີ້ໄດ້ໂດຍໃຊ້ແບບງ່າຍໆພຽງແຕ່ໃສ່ຮູບແບບຂອງທ່ານ. CSS ຂ້າງລຸ່ມນີ້ຈະເພີ່ມເສັ້ນຕັ້ງຢູ່ລະຫວ່າງແຖວຂອງຕາຕະລາງຂອງພວກເຮົາ:
tr {
ຂອບດ້ານລຸ່ມ: ແຂງ 1px ສີດໍາ;
}
ແລະເພື່ອເອົາຊາຍແດນອອກຈາກດ້ານລຸ່ມຂອງຕາຕະລາງ, ທ່ານອີກເທື່ອຫນຶ່ງຈະເພີ່ມຫ້ອງຮຽນທີ່ແທັກ:
class = "no-border">
ເພີ່ມແບບຕໍ່ໄປນີ້ໃຫ້ແກ່ເອກະສານສະໄຕຂອງທ່ານ:
no-border {
border-bottom: none;
}
ວິທີການເພີ່ມເສັ້ນລະຫວ່າງຖັນສະເພາະຫຼືແຖວໃນຕາຕະລາງ
ຖ້າທ່ານພຽງແຕ່ຕ້ອງການສາຍລະຫວ່າງແຖວເກັດທີ່ຢູ່ຫຼືຄໍລໍາສະເພາະ, ທ່ານຈໍາເປັນຕ້ອງໃຊ້ຊັ້ນໃນຫ້ອງຫຼືແຖວນັ້ນ. ການເພີ່ມເສັ້ນລະຫວ່າງຄໍລໍາແມ່ນມີຄວາມຫຍຸ້ງຍາກຫຼາຍກ່ວາລະຫວ່າງແຖວຍ້ອນວ່າທ່ານຕ້ອງເພີ່ມຫ້ອງຮຽນໃຫ້ທຸກໆຫ້ອງໃນຄໍລໍານັ້ນ. ຖ້າຕາຕະລາງຂອງທ່ານຖືກສ້າງຂຶ້ນໂດຍອັດຕະໂນມັດຈາກ CMS ບາງຊະນິດ , ມັນອາດຈະບໍ່ເປັນໄປໄດ້, ແຕ່ຖ້າທ່ານກໍາລັງຂຽນລະຫັດຫນ້າ, ທ່ານສາມາດເພີ່ມຈໍານວນທີ່ເຫມາະສົມຕາມຄວາມຕ້ອງການເພື່ອບັນລຸຜົນກະທົບນີ້.
class = "side-border">
ການເພີ່ມເສັ້ນໃນລະຫວ່າງແຖວແມ່ນງ່າຍດາຍຫຼາຍ, ດັ່ງທີ່ທ່ານພຽງແຕ່ສາມາດເພີ່ມແຖວໃນແຖວທີ່ທ່ານຕ້ອງການເສັ້ນ.
class = "border-bottom">
ຫຼັງຈາກນັ້ນ, ຕື່ມ CSS ໃນເອກະສານສະໄຕຂອງທ່ານ:
border-side {
border-left: solid 1px black;
}
border-bottom {
ຂອບດ້ານລຸ່ມ: ແຂງ 1px ສີດໍາ;
}
ວິທີການເພີ່ມເສັ້ນໃນແຕ່ລະຫ້ອງແຕ່ລະຕາຕະລາງ
ເພື່ອເພີ່ມເສັ້ນປະມານຂອງແຕ່ລະຈຸລັງ, ທ່ານຕື່ມຫ້ອງຮຽນໄປຫາຫ້ອງທີ່ທ່ານຕ້ອງການຊາຍແດນປະມານ:
class = "border">
ແລະຫຼັງຈາກນັ້ນຕື່ມ CSS ດັ່ງຕໍ່ໄປນີ້ກັບເອກະສານສະໄຕຂອງທ່ານ:
border {
border: solid 1px black
}
ວິທີການເພີ່ມສາຍພາຍໃນຫ້ອງແຕ່ລະຄົນໃນຕາຕະລາງ
ຖ້າທ່ານຕ້ອງການເພີ່ມເສັ້ນໃນເນື້ອຫາຂອງເຊນ, ວິທີທີ່ງ່າຍທີ່ສຸດທີ່ຈະເຮັດນີ້ແມ່ນມີລະຫັດກົດລະບຽບທີ່ນອນ (
).
Tips useful
ຖ້າທ່ານສັງເກດເຫັນຄວາມແຕກຕ່າງໃນຂອບເຂດຂອງທ່ານ, ທ່ານຄວນແນ່ໃຈວ່າແບບລົງຊາຍແດນ - ລົ້ມລົງຖືກຕັ້ງຢູ່ໃນຕາຕະລາງຂອງທ່ານ. ຕື່ມຂໍ້ມູນຕໍ່ໄປນີ້ໃຫ້ແກ່ເອກະສານສະໄຕຂອງທ່ານ:
ຕາລາງ {
border-collapse: collapse;
}
ທ່ານສາມາດຫລີກລ່ຽງ CSS ທັງຫມົດຂ້າງເທິງແລະໃຊ້ຂອບເຂດຂອບໃນແທັບຕາຂອງທ່ານ. ແຕ່ໃຫ້ຮູ້ວ່າຄຸນລັກສະນະຂອງລາວ, ໃນຂະນະທີ່ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນ, ແມ່ນມີຄວາມຍືດຫຍຸ່ນຫນ້ອຍກວ່າ CSS, ເພາະວ່າທ່ານພຽງແຕ່ສາມາດກໍານົດຄວາມກວ້າງຂອງຂອບເຂດແລະສາມາດມີມັນຢູ່ທົ່ວທຸກໆຈຸລັງຂອງຕາຕະລາງຫຼືບໍ່ມີ.