ການໄດ້ຮັບທີ່ສຸດຈາກຕາຕະລາງ HTML ໂດຍການຮຽນຮູ້ຄຸນລັກສະນະຂອງຕາຕະລາງ
ຄຸນລັກສະນະຕາລາງ HTML ໃຫ້ທ່ານຄວບຄຸມຫຼາຍກວ່າຕາຕະລາງ HTML. ມີຫລາຍຄຸນລັກສະນະທີ່ມີຢູ່ໃນຕາຕະລາງເພື່ອເຮັດໃຫ້ມັນມີຄວາມຫນ້າສົນໃຈຫຼາຍແລະປ່ຽນຮູບຂອງຫນ້າຂອງທ່ານ.
HTML TABLE Element Attributes
ໃນ HTML5 ອົງປະກອບໃຊ້ຄຸນລັກສະນະທົ່ວໂລກແລະຄຸນສົມບັດອື່ນ:. ແລະມັນໄດ້ປ່ຽນໄປພຽງແຕ່ມີມູນຄ່າ 1 ຫຼືຫວ່າງເປົ່າ (ເຊົ່ນຊາຍແດນ = ""). ຖ້າທ່ານຕ້ອງການປ່ຽນແປງຂອບຂອງຂອບ, ທ່ານຄວນໃຊ້ຄຸນສົມບັດ CSS ຂອບເຂດຊາຍແດນ.
ເບິ່ງຂ້າງລຸ່ມນີ້ເພື່ອຮຽນຮູ້ກ່ຽວກັບຄຸນສົມບັດຕາຕະລາງ HTML5 ທີ່ຖືກຕ້ອງ.
ນອກຈາກນີ້ຍັງມີຄຸນລັກສະນະຫຼາຍຢ່າງທີ່ເປັນສ່ວນຫນຶ່ງຂອງຂໍ້ກໍານົດ HTML 4.01 ເຊິ່ງໄດ້ກາຍເປັນເວລາລຶບລ້າງໃນ HTML5:
- - ໃຊ້ຄຸນສົມບັດ padding CSS ໃນຕາຕະລາງ TD ແລະອົງປະກອບ TH.
- - ໃຊ້ຂອບເຂດຊາຍແດນຂອງຊັບສິນ CSS ໃນຕາຕະລາງ.
- - ໃຊ້ CSS styles border-color: black; ແລະແບບຊາຍແດນເທິງຕາຕະລາງ.
- - ໃຊ້ CSS styles border-color: black; ແລະແບບຊາຍແດນໃນຮູບແບບທີ່ເຫມາະສົມຂອງຕາຕະລາງ.
- - ນອກຈາກນັ້ນ, ທ່ານຄວນອະທິບາຍໂຄງສ້າງຂອງຕາຕະລາງໃນ CAPTION ຫຼືໃສ່ຕາຕະລາງທັງຫມົດໃນຮູບແລະອະທິບາຍມັນໃນຮູບພາບ. ອີກທາງເລືອກ, ທ່ານສາມາດງ່າຍໃນການສ້າງໂຄງສ້າງຂອງຕາຕະລາງດັ່ງນັ້ນບໍ່ມີຄໍາອະທິບາຍທີ່ຈໍາເປັນ.
- - ໃຊ້ຄຸນສົມບັດຄວາມກວ້າງ CSS.
ແລະຫນຶ່ງ attribute ທີ່ຖືກລຶບລ້າງໃນ HTML 4.01 ແລະຍັງລ້າໃນ HTML5.
ຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບ HTML 4.01 TABLE ຄຸນລັກສະນະ.
- align- Use the CSS margin property instead
ຍັງມີຄຸນລັກສະນະຫຼາຍຢ່າງທີ່ບໍ່ແມ່ນສ່ວນຫນຶ່ງຂອງຂໍ້ກໍານົດ HTML ໃດ.
ໃຊ້ຄຸນລັກສະນະເຫຼົ່ານີ້ຖ້າທ່ານຮູ້ວ່າຕົວທ່ອງເວັບທີ່ທ່ານສະຫນັບສະຫນູນສາມາດຈັດການກັບພວກມັນແລະທ່ານບໍ່ສົນໃຈກ່ຽວກັບ HTML ທີ່ຖືກຕ້ອງ.
- - ໃຊ້ພື້ນຖານສີພື້ນຖານ CSS ແທນ.
- bordercolor -Use CSS border-color property property instead.
- bordercolorlight -Use CSS property border-color instead.
- bordercolordark -Use CSS border-color property property instead.
- cols - ບໍ່ມີທາງເລືອກອື່ນສໍາລັບຄຸນລັກສະນະນີ້.
- height-Use height height property property instead
- - ໃຊ້ margin ຊັບສິນ CSS ແທນ.
- - ໃຊ້ margin ຊັບສິນ CSS ແທນ.
- - ໃຊ້ຄຸນສົມບັດ CSS ໃນພື້ນທີ່ສີຂາວແທນ.
- - ໃຊ້ຄຸນສົມບັດ CSS ຕັ້ງຕາມແນວຕັ້ງ, ແທນທີ່ຈະ.
ຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບຄຸນລັກສະນະຂອງຕາຕະລາງຕາຕະລາງຕົວທ່ອງເວັບ.
HTML5 TABLE Element Attributes
ດັ່ງທີ່ພວກເຮົາໄດ້ກ່າວມາຂ້າງເທິງ, ມີພຽງຫນຶ່ງ attribute, ນອກເຫນືອຈາກຄຸນລັກສະນະທົ່ວໂລກ, ທີ່ຖືກຕ້ອງໃນ HTML5 TABLE element: border.
attribute ຊາຍແດນຖືກໃຊ້ເພື່ອກໍານົດຂອບເຂດຮອບຕາຕະລາງທັງຫມົດແລະຈຸລັງທັງຫມົດພາຍໃນມັນ. ມີຄໍາຖາມບາງຢ່າງກ່ຽວກັບວ່າມັນຈະຖືກລວມຢູ່ໃນຂໍ້ກໍານົດ HTML5, ແຕ່ວ່າມັນຍັງຄົງຢູ່ເພາະວ່າມັນໄດ້ສະຫນອງຂໍ້ມູນກ່ຽວກັບໂຄງສ້າງຕາຕະລາງ, ນອກເຫນືອຈາກການປະຕິບັດແບບສະໄຕ.
ເພື່ອເພີ່ມຄຸນສົມບັດຊາຍແດນ, ທ່ານກໍານົດມູນຄ່າເປັນ 1 ຖ້າມີຂອບເຂດແລະຫວ່າງ (ຫຼືອອກຈາກຄຸນລັກສະນະ) ຖ້າບໍ່ມີ. ຕົວທ່ອງເວັບຫຼາຍທີ່ສຸດກໍ່ຈະສະຫນັບສະຫນູນ 0 ສໍາລັບບໍ່ມີຊາຍແດນ, ແລະມູນຄ່າ integer ອື່ນໆ (2, 3, 30, 500, ແລະອື່ນໆ) ເພື່ອປະກາດຄວາມກວ້າງຂອງຊາຍແດນໃນ pixels, ແຕ່ນີ້ແມ່ນໃຊ້ໃນ HTML5. ແທນທີ່ຈະ, ທ່ານຄວນໃຊ້ CSS ຄຸນລັກສະນະຂອງຮູບແບບຊາຍແດນເພື່ອກໍານົດ ຄວາມກວ້າງຂອງ ຊາຍແດນແລະຮູບແບບອື່ນໆ.
ເພື່ອສ້າງຕາຕະລາງທີ່ມີຊາຍແດນ, ຂຽນ:
border = "1" >
ນີ້ແມ່ນຕາຕະລາງທີ່ມີຂອບເຂດ
ມີ HTML 4.01 ຄຸນລັກສະນະທີ່ລ້າສະໄຫມໃນ HTML5. ຖ້າທ່ານວາງແຜນການຂຽນເອກະສານ HTML 4.01, ທ່ານສາມາດຮຽນຮູ້ພວກເຂົາ, ຖ້າບໍ່ດັ່ງນັ້ນ, ທ່ານສາມາດລະເວັ້ນພວກເຂົາ. ສ່ວນໃຫຍ່ຂອງຄຸນລັກສະນະເຫຼົ່ານີ້ມີທາງເລືອກທີ່ໄດ້ອະທິບາຍຂ້າງເທິງ.
ພວກເຮົາອະທິບາຍລັກສະນະຂອງອົງປະກອບທີ່ຖືກຕ້ອງໃນ HTML5 (ແລະ HTML 4.01). ນີ້ອະທິບາຍເຖິງຄຸນລັກສະນະ TABLE ທີ່ຖືກຕ້ອງໃນ HTML 4.01, ແຕ່ລ້າໆໃນ HTML5. ຖ້າທ່ານຍັງຂຽນເອກະສານ HTML 4.01, ທ່ານສາມາດນໍາໃຊ້ຄຸນລັກສະນະເຫຼົ່ານີ້, ແຕ່ສ່ວນໃຫຍ່ຂອງພວກມັນມີທາງເລືອກທີ່ຈະເຮັດໃຫ້ຫນ້າເວັບຂອງທ່ານໃນອະນາຄົດທີ່ຖືກຕ້ອງສໍາລັບເວລາທີ່ທ່ານຍ້າຍໄປ HTML5.
Valid HTML 401 Attributes
ຄຸນລັກສະນະທີ່ພວກເຮົາໄດ້ອະທິບາຍໄວ້ຂ້າງເທິງ.
ຄວາມແຕກຕ່າງພຽງແຕ່ໃນ HTML 4.01 ຈາກ HTML5 ແມ່ນວ່າທ່ານສາມາດລະບຸຈໍານວນເຕັມທັງຫມົດ (0, 1, 2, 15, 20, 200, ແລະອື່ນໆ) ເພື່ອກໍານົດຄວາມກວ້າງຂອງຂອບເຂດໃນ pixels.
ການສ້າງຕາຕະລາງທີ່ມີເສັ້ນຂອບ 5px, ຂຽນ:
border = "5" >
ຕາຕະລາງນີ້ມີເສັ້ນຂອບ 5px.
ເບິ່ງຕົວຢ່າງຂອງສອງຕາຕະລາງມີຂອບ.
ຄຸນລັກສະນະກໍານົດຈໍານວນຊ່ອງຫວ່າງລະຫວ່າງຊາຍແດນຂອງຫ້ອງແລະເນື້ອຫາຂອງຫ້ອງ. ຄ່າເລີ່ມຕົ້ນແມ່ນສອງ pixels. ຕັ້ງ cellpadding ເປັນ 0 ຖ້າທ່ານບໍ່ຕ້ອງການຊ່ອງຫວ່າງລະຫວ່າງເນື້ອຫາແລະຊາຍແດນ.
ເມື່ອຕ້ອງການກໍານົດການປ້ອນຫ້ອງການໃຫ້ 20, ໃຫ້ຂຽນວ່າ:
cellpadding = "20" >
ຕາຕະລາງນີ້ມີ cellpadding ຂອງ 20
ຂອບເຂດຂອງເຊນຈະຖືກແຍກໂດຍ 20 pixels.
ເບິ່ງຕົວຢ່າງຂອງຕາຕະລາງທີ່ມີ cellpadding
attribute ກໍານົດຈໍານວນຊ່ອງຫວ່າງລະຫວ່າງຈຸລັງຕາຕະລາງແລະເນື້ອໃນຂອງຈຸລັງ. ເຊັ່ນດຽວກັນກັບ cellpadding, ຄ່າເລີ່ມຕົ້ນຖືກກໍານົດໄວ້ເປັນສອງ pixels, ດັ່ງນັ້ນທ່ານຕ້ອງກໍານົດວ່າມັນເປັນ 0 ຖ້າທ່ານບໍ່ຕ້ອງການຊ່ອງຫວ່າງຫ້ອງ.
ເພື່ອເພີ່ມຊ່ອງຫວ່າງຂອງຫ້ອງການໃຫ້ກັບຕາຕະລາງ, ໃຫ້ຂຽນວ່າ:
cellpacing = "20" >
ຕາຕະລາງນີ້ມີ cellpacing ຂອງ 20
ຈຸລັງຈະແຍກດ້ວຍ 20 pixels.
ເບິ່ງຕາຕະລາງທີ່ມີ cellpacing
ຄຸນລັກສະນະກໍານົດວ່າບາງສ່ວນຂອງຊາຍແດນທີ່ອ້ອມຮອບນອກຕາຕະລາງຈະເຫັນໄດ້ຢ່າງໃດ. ທ່ານສາມາດວາງຕາຕະລາງຂອງທ່ານທັງສີ່ດ້ານ, ດ້ານຫນຶ່ງ, ດ້ານເທິງແລະດ້ານລຸ່ມ, ຊ້າຍແລະຂວາ, ຫຼືບໍ່ມີ.
ນີ້ແມ່ນ HTML ສໍາລັບຕາຕະລາງທີ່ມີພຽງແຕ່ຊາຍແດນເບື້ອງຊ້າຍ:
frame = "lhs" >
ຕາຕະລາງນີ້
ຈະມີ
ເທົ່ານັ້ນ
ດ້ານຊ້າຍກອບ.
ແລະຕົວຢ່າງອື່ນທີ່ມີຂອບຮ່າງ:
frame = "below" >
ຕາຕະລາງນີ້ມີກອບຢູ່ດ້ານລຸ່ມ.
ກວດເບິ່ງບາງຕາຕະລາງທີ່ມີເຟຣມ
attribute ແມ່ນຄ້າຍຄືກັນກັບ attribute frame, ມີພຽງແຕ່ຜົນກະທົບຕໍ່ຊາຍແດນທີ່ອ້ອມຮອບຫ້ອງຂອງຕາຕະລາງ. ທ່ານສາມາດຕັ້ງກົດລະບຽບກ່ຽວກັບຈຸລັງທັງຫມົດ, ລະຫວ່າງຄໍລໍາ, ລະຫວ່າງກຸ່ມເຊັ່ນ TBODY ແລະ TFOOT ຫຼືບໍ່ມີ.
ການສ້າງ ຕາຕະລາງທີ່ມີເສັ້ນ ພຽງແຕ່ລະຫວ່າງແຖວ, ຂຽນ:
rules = "rows" >
ຕາຕະລາງ 4x4 ນີ້ມີ
ແຖວບໍ່ແມ່ນຄໍລໍາ
ສະແດງດ້ວຍ
ກົດລະບຽບ
ແລະຄົນອື່ນທີ່ມີສາຍລະຫວ່າງຖັນ:
rules = "cols" >
ນີ້ແມ່ນ
ຕາຕະລາງ
ບ່ອນທີ່
ຄໍລໍາ
ແມ່ນ
ເນັ້ນ
ນີ້ແມ່ນຕົວຢ່າງຂອງຕາຕະລາງ aa ທີ່ມີກົດລະບຽບ
attribute ສະຫນອງຂໍ້ມູນກ່ຽວກັບຕາຕະລາງສໍາລັບຜູ້ອ່ານຫນ້າຈໍແລະຕົວແທນຜູ້ໃຊ້ອື່ນໆທີ່ອາດມີບັນຫາໃນການອ່ານຕາຕະລາງ. ເພື່ອໃຊ້ຄຸນສົມບັດສະຫຼຸບ, ທ່ານຂຽນຄໍາອະທິບາຍສັ້ນໆຂອງຕາຕະລາງແລະເອົາໃຈໃສ່ວ່າເປັນມູນຄ່າຂອງຄຸນລັກສະນະ. ສະຫຼຸບສັງລວມຈະບໍ່ສະແດງໃນຫນ້າເວັບໃນຕົວທ່ອງເວັບເວັບມາດຕະຖານທີ່ສຸດ.
ນີ້ແມ່ນວິທີການຂຽນຕາຕະລາງທີ່ງ່າຍດາຍດ້ວຍສະຫຼຸບ:
summary = "ນີ້ແມ່ນຕາຕະລາງຕົວຢ່າງທີ່ມີຂໍ້ມູນຕື່ມຂໍ້ມູນ. ຈຸດປະສົງຂອງຕາຕະລາງນີ້ແມ່ນເພື່ອສະແດງສະຫຼຸບສັງລວມ." >
ຄໍລໍາ 1 ແຖວ 1
ຄໍລໍາ 2 ແຖວ 1
ຄໍລໍາ 1 ແຖວ 2
ຄໍລໍາ 2 ແຖວ 2
ເບິ່ງຕາຕະລາງທີ່ມີສະຫຼຸບສັງລວມ
attribute ກໍານົດ width ຂອງຕາຕະລາງໃນ pixel ຫຼືເປັນເປີເຊັນຂອງອົງປະກອບຂອງບັນຈຸ. ຖ້າ width ບໍ່ໄດ້ກໍານົດ, ຕາຕະລາງຈະໃຊ້ພຽງພື້ນທີ່ຫຼາຍເທົ່າທີ່ຕ້ອງການສະແດງເນື້ອຫາເທົ່ານັ້ນ, ເທົ່າກັບ width ຂອງອົງປະກອບ parent.
ເພື່ອສ້າງຕາຕະລາງທີ່ມີຄວາມກວ້າງສະເພາະໃນ pixels, ຂຽນ:
width = "300" >
ຕາຕະລາງນີ້ແມ່ນ 80% ຂອງຄວາມກວ້າງຂອງບັນຈຸມັນຢູ່.
ແລະເພື່ອສ້າງຕາຕະລາງທີ່ມີຄວາມກວ້າງທີ່ເປັນເປີເຊັນຂອງອົງປະກອບແມ່, ໃຫ້ຂຽນວ່າ:
width = "80%" >
ຕາຕະລາງນີ້ແມ່ນ 80% ຂອງຄວາມກວ້າງຂອງບັນຈຸມັນຢູ່.
ເບິ່ງຕົວຢ່າງຂອງຕາຕະລາງທີ່ມີ width ເປັນ
HTML 401 TABLE Attribute ບໍ່ຖືກຕ້ອງ
ມີຫນຶ່ງ attribute ຂອງອົງປະກອບ TABLE ທີ່ຖືກ deprecated ໃນ HTML 4.01 ແລະລ້າໃນ HTML5: align . ຄຸນລັກສະນະນີ້ສາມາດເຮັດໃຫ້ທ່ານກໍານົດບ່ອນທີ່ຕາຕະລາງຄວນຕັ້ງຢູ່ໃນຫນ້າທີ່ກ່ຽວກັບຂໍ້ຄວາມທີ່ຢູ່ຂ້າງມັນ. ຄຸນລັກສະນະນີ້ຖືກລຶບລ້າງໃນ HTML 4.01, ແລະທ່ານຄວນຫຼີກເວັ້ນການໃຊ້ມັນ. ແທນທີ່ຈະ, ທ່ານຄວນຈະນໍາໃຊ້ຄຸນສົມບັດ CSS ຫຼື margin-left: auto; ແລະຂອບຂວາ: ອັດຕະໂນມັດ; ຮູບແບບ ຄຸນສົມບັດທີ່ເລື່ອນລອຍເຮັດໃຫ້ທ່ານຜົນໄດ້ຮັບທີ່ໃກ້ຊິດກັບສິ່ງທີ່ແອວເດີທີ່ສະຫນອງໃຫ້, ແຕ່ມັນສາມາດມີຜົນຕໍ່ວິທີທີ່ສ່ວນທີ່ເຫຼືອຂອງຫນ້າເວັບສະແດງ. ຂອບໃບດ້ານຂວາ: auto; ແລະຂອບຂອບຊ້າຍ: auto; ແມ່ນສິ່ງທີ່ W3C ແນະນໍາໃຫ້ເປັນທາງເລືອກ.
ນີ້ແມ່ນຕົວຢ່າງທີ່ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນໂດຍນໍາໃຊ້ແອວເດີທີ່ເຫມາະສົມ:
align = "right" >
ຕາຕະລາງນີ້ແມ່ນສອດຄ່ອງຂວາ
ຂໍ້ຄວາມໄຫລຜ່ານມັນໄປທາງຊ້າຍ
ເບິ່ງຕົວຢ່າງທີ່ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນໂດຍນໍາໃຊ້ຄຸນສົມບັດສອດຄ່ອງ.
ແລະເພື່ອໃຫ້ໄດ້ຜົນດຽວກັນກັບ HTML ທີ່ຖືກຕ້ອງ (ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນ), ຂຽນ:
style = "float: right" >
ຕາຕະລາງນີ້ແມ່ນສອດຄ່ອງຂວາ
ຂໍ້ຄວາມໄຫລຜ່ານມັນໄປທາງຊ້າຍ
ຕໍ່ໄປນີ້ອະທິບາຍລັກສະນະ TABLE ທີ່ບໍ່ແມ່ນສ່ວນຫນຶ່ງຂອງຂໍ້ກໍານົດ HTML ໃດ.
ຂໍ້ມູນກ່ອນຫນ້ານີ້ອະທິບາຍລັກສະນະຂອງເອກະສານ HTML ທີ່ຖືກຕ້ອງໃນ HTML 4.01 ແຕ່ລ້າສະໄຫມໃນ HTML5.
ຕໍ່ໄປນີ້ອະທິບາຍລັກສະນະ TABLE ທີ່ບໍ່ຖືກຕ້ອງໃນຂໍ້ກໍາຫນົດປັດຈຸບັນໃດ ຖ້າທ່ານບໍ່ສົນໃຈກ່ຽວກັບວ່າຫນ້າເວັບຂອງທ່ານຖືກຢືນຢັນຫຼືບໍ່ແລະຜູ້ໃຊ້ຂອງທ່ານໃຊ້ຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນອົງປະກອບເຫຼົ່ານີ້, ທ່ານສາມາດນໍາໃຊ້ອົງປະກອບເຫຼົ່ານີ້. ແຕ່ສ່ວນໃຫຍ່ຂອງພວກເຂົາແມ່ນບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນໃນຕົວທ່ອງເວັບທີ່ທັນສະໄຫມຫຼືມີທາງເລືອກທີ່ມີມາດຕະຖານຫຼາຍຂຶ້ນ.
ພວກເຮົາບໍ່ແນະນໍາໃຫ້ໃຊ້ຄຸນລັກສະນະເຫຼົ່ານີ້ ໃນຕາຕະລາງ HTML ຂອງທ່ານ.
ຄຸນລັກສະນະເປັນເອກະລັກເກົ່າເຊິ່ງໄດ້ຖືກລວມເຂົ້າກ່ອນ CSS ສະຫນັບສະຫນູນຢ່າງກວ້າງຂວາງ. ມັນອະນຸຍາດໃຫ້ທ່ານປ່ຽນສີພື້ນຫລັງຂອງຕາຕະລາງ. ທ່ານສາມາດກໍານົດຊື່ສີຫຼືລະຫັດເລກຖານສິບຫົກ. ຄຸນລັກສະນະນີ້ຍັງເຮັດວຽກຢູ່ໃນຫລາຍຕົວທ່ອງເວັບ, ແຕ່ສໍາລັບ HTML ທີ່ຮັບຮອງໃນອະນາຄົດ, ທ່ານບໍ່ຄວນໃຊ້ມັນແລະໃຊ້ CSS ແທນ.
ທາງເລືອກທີ່ດີກວ່າກັບຄຸນລັກສະນະນີ້ແມ່ນຊັບສົມບັດຂອງແບບ.
ການປ່ຽນແປງສີພື້ນຖານຂອງຕາຕະລາງ, ຂຽນ:
style = "background-color: #ccc;" >
ຕາຕະລາງນີ້ມີພື້ນຫລັງສີຂີ້ເຖົ່າ
ຄ້າຍກັບ attribute bgcolor, attribute bordercolor ຊ່ວຍໃຫ້ທ່ານປ່ຽນສີຂອງ attribute. attribute ນີ້ຈະຖືກສະຫນັບສະຫນູນໂດຍ Internet Explorer. ແທນທີ່ຈະ, ທ່ານຄວນໃຊ້ຄຸນສົມບັດແບບຊາຍແດນທີ່ມີສີສັນ.
ເພື່ອປ່ຽນສີຂອງເສັ້ນຂອບຂອງຕາຕະລາງຂອງທ່ານໃຫ້ຂຽນ:
style = "border-color: red;" >
ຕາຕະລາງນີ້ມີເສັ້ນຂອບສີແດງ.
ຄຸນລັກສະນະຂອງ bordercolorlight ແລະ bordercolordark ໄດ້ຖືກລວມຢູ່ໃນ Internet Explorer ເພື່ອໃຫ້ທ່ານສາມາດສ້າງຂອບເຂດ 3D ໃນຕາຕະລາງຂອງທ່ານ. ຢ່າງໃດກໍ່ຕາມ, ເນື່ອງຈາກ IE8 ແລະສູງກວ່ານີ້, ມັນໄດ້ຖືກສະຫນັບສະຫນູນໃນ ຮູບແບບ IE7 Standards Mode ແລະ Quirks Mode ເທົ່ານັ້ນ. Microsoft ບອກວ່າຄຸນສົມບັດເຫຼົ່ານີ້ບໍ່ມີການສະຫນັບສະຫນູນ.
ສໍາລັບເວລາສັ້ນໆ, ການສ້າງແອວເດີກ່ຽວກັບຕາຕະລາງ TABLE ໄດ້ຖືກສະເຫນີໃຫ້ຊ່ວຍໃຫ້ບັນດາຕົວທ່ອງເວັບຮູ້ຈັກຈໍານວນຄໍລໍາທີ່ມີຕາຕະລາງ. ສະຫຼຸບໄດ້ວ່ານີ້ຈະຊ່ວຍເລັ່ງການສະແດງຕາຕະລາງຂະຫນາດໃຫຍ່. ຢ່າງໃດກໍ່ຕາມມັນໄດ້ຖືກຈັດຕັ້ງປະຕິບັດໂດຍ Internet Explorer ເທົ່ານັ້ນ, ແລະຈາກ IE8 ແລະສູງກວ່ານີ້, ມັນໄດ້ຖືກສະຫນັບສະຫນູນໃນ IE7 Standards Mode ແລະ Quirks Mode.
ເນື່ອງຈາກມີຄຸນສົມບັດຄວາມກວ້າງ (ລ້າສຸດໃນ HTML5) ຫຼາຍຄົນຄິດວ່າມີຄຸນລັກສະນະສູງສໍາລັບຕາຕະລາງເຊັ່ນກັນ. ແຕ່ເນື່ອງຈາກຕາຕະລາງທີ່ສອດຄ່ອງກັບຄວາມກວ້າງຂອງເນື້ອຫາຫຼືຄວາມກວ້າງທີ່ຖືກກໍານົດໄວ້ໃນ CSS ຫຼື width attribute, height ບໍ່ສາມາດຖືກບັງຄັບ. ດັ່ງນັ້ນ, ແທນທີ່ຈະ, ຕົວທ່ອງເວັບໄດ້ອະນຸຍາດໃຫ້ຄຸນລັກສະນະສູງເພື່ອກໍານົດລະດັບຕໍາ່ສຸດທີ່ຂອງຕາຕະລາງ. ຖ້າຕາຕະລາງສູງກ່ວາລະດັບຄວາມສູງ, ມັນຈະສະແດງສູງ. ແຕ່ທ່ານຄວນໃຊ້ຊັບສິນ
ມີຄຸນສົມບັດຄວາມສູງຂອງ CSS ທ່ານສາມາດຈໍາກັດຄວາມສູງຖ້າທ່ານໃຊ້ຄຸນສົມບັດ CSS ເຊັ່ນດຽວກັນເພື່ອກໍານົດສິ່ງທີ່ເກີດຂື້ນກັບເນື້ອຫາທີ່ເກີນ.
ເພື່ອກໍານົດລະດັບຕໍາ່ສຸດໃນຕາຕະລາງ, ຂຽນ:
style = "height: 30em" >
ຕາຕະລາງນີ້ແມ່ນຢ່າງຫນ້ອຍ 30 ເອັມສູງ.
ທັງສອງຄຸນລັກສະນະແລະພື້ນທີ່ເພີ່ມເຕີມປະມານດ້ານຊ້າຍ / ຂວາ (hspace) ແລະດ້ານເທິງ / ດ້ານລຸ່ມ (vspace) ຂອງຕາຕະລາງ. ທ່ານຄວນໃຊ້ຄຸນສົມບັດແບບແທນ.
ເພື່ອກໍານົດຊ່ອງຕັ້ງເປັນ 20 pixels ແລະພື້ນທີ່ນອນໃຫ້ 40 pixels, ໃຫ້ຂຽນວ່າ:
style = "margin: 20px 40px"
ຕາຕະລາງນີ້ມີ vspace 20 pixels ແລະ hspace 40 pixels
ຄຸນລັກສະນະແມ່ນບັນຫາ boolean ທີ່ກໍານົດວ່າເນື້ອຫາຂອງຕາຕະລາງຄວນຫໍ່ຢູ່ແຂບຂອງອົງປະກອບແມ່ຫຼືປ່ອງຢ້ຽມຫຼືບັງຄັບໃຫ້ເລື່ອນພາບຕາມແນວນອນ. ແທນທີ່ຈະ, ທ່ານຄວນກໍານົດລັກສະນະການຫຸ້ມຫໍ່ຂອງແຕ່ລະຫ້ອງຕາໂດຍໃຊ້ຄຸນສົມບັດ CSS.
ເພື່ອເຮັດໃຫ້ຄໍລໍາທີ່ມີຂໍ້ຄວາມຫຼາຍບໍ່ລວບລວມຂຽນ:
style = "white-space: nowrap;" > ນີ້ແມ່ນຄໍລໍາທີ່ມີໂຕນເນື້ອຫາ. ແຕ່ເຖິງແມ່ນວ່າມັນກວ້າງກ່ວາບັນຈຸຂໍ້ຄວາມບໍ່ຄວນຫໍ່ໃສ່ເສັ້ນຕໍ່, ແຕ່ຕ້ອງບັງຄັບປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບເພື່ອເລື່ອນພາບໃນເບື້ອງຕາຕະລາງເພື່ອເບິ່ງເນື້ອຫາທັງຫມົດ.
ສຸດທ້າຍ, ຄຸນລັກສະນະກໍານົດວິທີການເນື້ອໃນຂອງແຕ່ລະຫ້ອງຄວນວາງແນວຕັ້ງຢູ່ພາຍໃນຫ້ອງ. ແທນທີ່ຈະມີຄຸນສົມບັດທີ່ບໍ່ຖືກຕ້ອງນີ້ທ່ານຄວນໃຊ້ຄຸນສົມບັດ CSS ໃນແຕ່ລະຫ້ອງທີ່ທ່ານຕ້ອງການປ່ຽນການປັບແຕ່ງ. ທ່ານຈະບໍ່ສັງເກດເຫັນຜົນກະທົບຂອງແບບນີ້, ເວັ້ນເສຍແຕ່ວ່າເນື້ອໃນຂອງຫ້ອງນັ້ນຫນ້ອຍກວ່າພື້ນທີ່ທີ່ສ້າງຂື້ນໂດຍຈຸລັງຂະຫນາດໃຫຍ່ອື່ນໆ.
ເພື່ອບັງຄັບໃຫ້ຫ້ອງການສອດຄ່ອງກັບລຸ່ມ (ແທນທີ່ຈະກາງ, ເປັນຄ່າເລີ່ມຕົ້ນ), ຂຽນ:
ເຊນນີ້ຍາວກວ່າສ່ວນທີ່ເຫຼືອແລະດັ່ງນັ້ນຈະບັງຄວາມສູງຂອງຄວາມສູງ. ດັ່ງນັ້ນ, ທ່ານຈະເຫັນວ່າເຊນທີ່ຕັ້ງຢູ່ຕາມແນວຕັ້ງແມ່ນສອດຄ່ອງກັບທາງລຸ່ມ.
style = "vertical-align: bottom;" > ເນື້ອຫາຢູ່ລຸ່ມ.
ເນື້ອຫາໃນກາງ.