ການສອນການສະແດງບັນດາບານ CSS

ການໃຊ້ CSS ສາມາດປັບປຸງປະຫວັດສາດຂອງຕາກີ HTML ຄືກັນ:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

ທ້າທາຍຕົວເອງອີກ.

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

下例为

、
和 元素规定了黑色边框：

ນາມເກີບ ນາມສຸດທ້າຍ
Bill Gates
Steve Jobs

ປະກອບສະໜອງ

table, th, td {
  border: 1px solid black;
}

ທ້າທາຍຕົວເອງອີກ.

ເຫັນດີ:ບົດສະຫຼຸບດັ່ງກ່າວມີກາງກະບຽນທີ່ມີສອງຝາງ. ຍ້ອນ table ແລະ <th> ແລະ <td> ປະກອບສູນມີກາງກະບຽນທີ່ອາດດຽວ.

ຕາການທີ່ກວດກາຄອງຄົວທັງໝົດ

ໃນບາງກໍລະນີຕາການດັ່ງກ່າວຄືກັບບໍ່ໃຫ່ຍ. ຖ້າເຈົ້າຕ້ອງການຕາການທີ່ສາມາດກວດກາຄອງຄົວທັງໝົດ (ຄວາມກວດດາຍ) ຂ້ອຍສະເໜີ width: 100% ສຳລັບ <table>

ປະກອບສະໜອງ

table {
  width: 100%;
}

ທ້າທາຍຕົວເອງອີກ.

ກາງກະບຽນທີ່ມີສອງຝາງ

ບໍ່ຄິດວ່າຕາການດັ່ງກ່າວມີກາງກະບຽນທີ່ມີສອງຝາງ. ຍ້ອນຕາການ ແລະ th ແລະ td ປະກອບສູນມີກາງກະບຽນທີ່ອາດດຽວ.

ຖ້າເຈົ້າຕ້ອງການລົບກາງກະບຽນທີ່ມີສອງຝາງ, ຂ້ອຍສະເໜີບົດສະຫຼຸບດັ່ງກ່າວຫຼັງຈາກນີ້.

ການປະສົມກາງກະບຽນຕາການ

border-collapse ການຕັດຕິງທີ່ຕັດຕິງກາງກາງຂອງກາງກະບຽນຕາການ:

ນາມເກີບ ນາມສຸດທ້າຍ
Bill Gates
Steve Jobs

ປະກອບສະໜອງ

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

ທ້າທາຍຕົວເອງອີກ.

ຖ້າເຈົ້າຕ້ອງການສ້າງຕາການທີ່ມີກາງກະບຽນທາງອ້ອມພຽງໜຶ່ງ, ຂ້ອຍສະເໜີ border: 1px solid black; ສຳລັບ <table> border ປະກອບສັບສັນ:

ນາມເກີບ ນາມສຸດທ້າຍ
Bill Gates
Steve Jobs

ປະກອບສະໜອງ

table {
  border: 1px solid black;
}

ທ້າທາຍຕົວເອງອີກ.

ຄວາມກວດສູງ ແລະ ຄວາມກວດດາຍຕາການ

ຄວາມກວດສູງ ແລະ ຄວາມກວດດາຍຂອງຕາການແມ່ນຕາມ: width ແລະ height ການການຕັດຕິງ.

ບົດສະຫຼຸບນີ້ຈະຕັດຕິງການຕິງຄວາມກວດສູງຂອງຕາການ 100% ແລະ ຕັດຕິງຄວາມກວດສູງຂອງ <th> 50px:

ນາມເກີບ ນາມສຸດທ້າຍ ການບັນທຶກ
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ປະກອບສະໜອງ

table {
  width: 100%;
}
th {
  height: 50px;
}

ທ້າທາຍຕົວເອງອີກ.

ເພື່ອສ້າງການສ້າງຕາການທີ່ຄືນພຽງໜຶ່ງເຄິ່ງບາງເທື່ອ, ຂ້ອຍສະເໜີ width: 50%:

ປະກອບສະໜອງ

table {
  width: 50%;
}
th {
  height: 70px;
}

ທ້າທາຍຕົວເອງອີກ.

ຕັດຕິງທີ່ຕິງຊ້າຍ

text-align ການຕັດຕິງທີ່ຕິງຄຳຂຽນທີ່ສັບສົນ th ແລະ td (ຕິງຊ້າຍ, ຕິງຊ້າຍຫຼັງຫຼັງ ຫຼື ຕິງກາງສູນ).

ໂດຍປົກກະຕິພວກມັນຈະຕັດຕິງທີ່ຕິງກາງສູນ th ແລະ ຕັດຕິງທີ່ຕິງຊ້າຍ td.

ເພື່ອປະຕິບັດການຕັດຕິງທີ່ຕິງກາງສູນຄຳຂຽນທີ່ສັບສົນ td, ຂ້ອຍສະເໜີ text-align: center:

ນາມເກີບ ນາມສຸດທ້າຍ ການບັນທຶກ
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ປະກອບສະໜອງ

th {
  text-align: center;
}

ທ້າທາຍຕົວເອງອີກ.

ບົດສະຫຼຸບນີ້ຈະການຕັດຕິງຄຳຂຽນທີ່ສັບສົນ <th> ເພື່ອປະຕິບັດການຕັດຕິງທີ່ຕິງຊ້າຍ:

ນາມເກີບ ນາມສຸດທ້າຍ ການບັນທຶກ
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ປະກອບສະໜອງ

th {
  text-align: left;
}

ທ້າທາຍຕົວເອງອີກ.

ຕັດຕິງທີ່ຕິງລົງ

vertical-align ການການຕັດຕິງທີ່ຕິງຄຳຂຽນທີ່ສັບສົນ th ແລະ td (ຕິງລົງ, ຕິງລົງຫຼັງຫຼັງ ຫຼື ຕິງກາງສູນ).

ໂດຍປົກກະຕິພວກມັນຈະຕັດຕິງທີ່ຕິງກາງສູນ (th ແລະ td ປະກອບສູນກັນ).

ບົດສະຫຼຸບນີ້ຈະການການຕັດຕິງຄຳຂຽນທີ່ສັບສົນ <td> ເພື່ອປະຕິບັດການຕັດຕິງທີ່ຕິງລົງ:

ນາມເກີບ ນາມສຸດທ້າຍ ການບັນທຶກ
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ປະກອບສະໜອງ

td {
  height: 50px;
  vertical-align: bottom;
}

ທ້າທາຍຕົວເອງອີກ.

表格内边距

ເພື່ອຄວບຄຸມຄວາມຫ່າງບໍ່ດີລະຫວ່າງກາງການສະແດງ ແລະ ສິນລະສັບ <td> ແລະ <th>: padding ປະກອບສັບສັນ:

ນາມເກີບ ນາມສຸດທ້າຍ ການບັນທຶກ
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ປະກອບສະໜອງ

th, td {
  padding: 15px;
  text-align: left;
}

ທ້າທາຍຕົວເອງອີກ.

ກາງການສະແດງ

ນາມເກີບ ນາມສຸດທ້າຍ ການບັນທຶກ
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ກັບ <th> ແລະ <td>: border-bottom ປະກອບສັບສັນເພື່ອພິມການສະແດງກາງການສະແດງ:

ປະກອບສະໜອງ

th, td {
  border-bottom: 1px solid #ddd;
}

ທ້າທາຍຕົວເອງອີກ.

ກາງການສະແດງທີ່ສາມາດສະແດງຄວາມຄິດຕອບສະແດງ:

ທີ່ຈະສະແດງກາງການສະແດງ ທີ່ຈະສະແດງກາງການສະແດງທີ່ຈະສະແດງຄວາມຄິດຕອບສະແດງທີ່ມີສີປະກອບ: :hover

ນາມເກີບ ນາມສຸດທ້າຍ ການບັນທຶກ
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ປະກອບສະໜອງ

tr:hover {background-color: #f5f5f5;}

ທ້າທາຍຕົວເອງອີກ.

ກາງການສະແດງ

ນາມເກີບ ນາມສຸດທ້າຍ ການບັນທຶກ
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ເພື່ອພິມສະແດງກາງການສະແດງທີ່ມີຄວາມຄິດຕອບສະແດງທີ່ມີສີປະກອບ: nth-child() ຄູ່ມິດເລືອກຕົວເລືອກທີ່ຈະກຳນົດສີສະໜອງຫົວໜ້າທັງໝົດການສະແດງທີ່ເປັນສິ່ງສະເຫຼີມ (ຫຼືສິ່ງອັນສະນະ): background-color:

ປະກອບສະໜອງ

tr:nth-child(even) {background-color: #f2f2f2;}

ທ້າທາຍຕົວເອງອີກ.

ສີສະແດງກາງການສະແດງ

ບົດສະຫຼຸບນີ້ສະແດງວ່ານັ້ນຈະກຳນົດສະແດງສີສະໜອງຫົວໜ້າກາງການສະແດງ ແລະ ສີຂຽວ:

ນາມເກີບ ນາມສຸດທ້າຍ ການບັນທຶກ
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ປະກອບສະໜອງ

th {
  background-color: #4CAF50;
  color: white;
}

ທ້າທາຍຕົວເອງອີກ.

ຄວາມຄິດຕອບສະແດງຄວາມຄິດຕອບສະແດງ

ຖ້າໜ້າຈໍາກັດບໍ່ພຽງພໍເພື່ອສະແດງທັງໝົດເນື້ອຫາຍ ການສະແດງຄວາມຄິດຕອບສະແດງຈະສະແດງສາຍຄົ້ນຫົວໜ້າສະແດງທີ່ມີຄວາມຄິດຕອບສະແດງ:

ນາມເກີບ ນາມສຸດທ້າຍ Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

ກັບ <table> ປະກອບກັບ overflow-x:auto ຂອງປະກອບສະໜອງ (ເປັນຕົວຢ່າງ <div>) ເພື່ອພິມສະແດງຄວາມຄິດຕອບສະແດງ:

ປະກອບສະໜອງ

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

ທ້າທາຍຕົວເອງອີກ.

ຄວາມເຫັນ:ໃນ OS X Lion (ໃນ Mac) ການສະແດງສາຍຄົ້ນຫົວໜ້າແມ່ນຖືກປິດຄາດຫົວໜ້າດັ່ງກ່າວ ແລະ ຈະສະແດງຄາດຫົວໜ້າໃນຂະນະທີ່ຈະໃຊ້ (ເຖິງວ່າຈະໄດ້ກະກຽມ "overflow:scroll").

ຫຼາຍບົດສະຫຼຸບອີກ.

ກຳລັງສະແດງກາງການສະແດງ.
ບົດສະຫຼຸບນີ້ສະແດງວ່ານັ້ນຈະປະກອບຕັ້ງກາງການສະແດງ.
ການກະກຽມຕອນຕັ້ງຫົວໜ້າກາງການສະແດງ.
ບົດສະຫຼຸບນີ້ສະແດງວ່ານັ້ນຈະປະກອບຕັ້ງຫົວໜ້າກາງການສະແດງ.

ປະກອບສັບສັນ CSS

ປະກອບ ການອະທິບາຍ
border 简写属性。在一条声明中设置所有边框属性。
border-collapse 规定是否应折叠表格边框。
border-spacing 规定相邻单元格之间的边框的距离。
caption-side 规定表格标题的位置。
empty-cells 规定是否在表格中的空白单元格上显示边框和背景。
table-layout 设置用于表格的布局算法。