ตาราง 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 คุณสมบัติ

ตัวอย่างนี้กำหนดขอบเขตดำสำหรับองค์ประกอบ <table>、<th> และ <td>:

ชื่อจริง สกุล
Bill Gates
Steve Jobs

ตัวอย่าง

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

ลองด้วยตัวเอง

หมายเหตุ:ตารางในตัวอย่างด้านบนมีขอบเขตเบื้องด้านนอก นี่เพราะตารางและองค์ประกอบ <th> และ <td> มีขอบเขตเบื้องด้านนอกแยกต่างกัน

ตารางกว้างทั้งหมด

ในบางกรณี ตารางด้านบนเหมือนจะเล็กมาก. หากคุณต้องการตารางที่เต็มทั้งหน้าหนึ่ง (กว้างทั้งหมด) ให้เพิ่มคุณสมบัติ width: 100% ต่อองค์ประกอบ <table>

ตัวอย่าง

table {
  width: 100%;
}

ลองด้วยตัวเอง

ขอบเขตเบื้องด้านนอก

โปรดสังเกตว่าตารางด้านบนมีขอบเขตเบื้องด้านนอก

หากต้องการลบขอบเขตเบื้องด้านนอก โปรดดูตัวอย่างด้านล่าง

เรียงขอบเขตตารางเข้ากัน

border-collapse ตั้งค่าคุณสมบัติเพื่อกำหนดว่าจะทำให้ขอบเขตตารางเกิดการเรียงเข้ากันหรือไม่:

ชื่อจริง สกุล
Bill Gates
Steve Jobs

ตัวอย่าง

table {
  border-collapse: collapse;
}
table, th, td {
  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> ด้วยคุณสมบัติ text-align (ซ้าย, ขวา หรือกลาง)

โดยมาตรฐาน ข้อความตัวอักษรภาษาไทยในองค์ประกอบ <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> ด้วยการใช้คุณสมบัติ vertical-align (สูง, ล่าง หรือกลาง)

โดยมาตรฐาน การปรับเรียงข้อความตัวอักษรภาษาไทยในตารางเป็นกลาง (ทั้ง <th> และ <td> ฝากไว้ที่นี่เช่นกัน)

ตัวอย่างนี้จะตั้งค่าการปรับเรียงข้อความตัวอักษรภาษาไทยขององค์ประกอบ <td> ให้ตั้งตรงล่าง:

ชื่อจริง สกุล บัตรเงินสด
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ตัวอย่าง

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

ลองด้วยตัวเอง

ระยะห่างในตาราง

ถ้าต้องการควบคุมระยะห่างระหว่างเส้นเข้มตัวบรรทัดและเนื้อหาตาราง ใช้ padding ตัวแปร:

ชื่อจริง สกุล บัตรเงินสด
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ตัวอย่าง

ตัวแปร
  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;}

ลองด้วยตัวเอง

สีตาราง

ตัวอย่างด้านล่างกำหนดสีพื้นหลังและสีข้อความขององค์ประกอบ <th>:

ชื่อจริง สกุล บัตรเงินสด
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>
</div>

ลองด้วยตัวเอง

หมายเหตุ：ใน OS X Lion (บน Mac) ตราสูตรเรียกใช้ตารางหลอดน้ำแบบเริ่มต้นที่ซ่อนไว้ และแสดงเมื่อใช้งานเท่านั้น (แม้ว่าจะตั้งค่า "overflow:scroll")。

ตัวอย่างเพิ่มเติม

ทำตารางที่มีลักษณะเด่น
ตัวอย่างนี้แสดงวิธีการสร้างตารางที่มีลักษณะเด่น。
จัดตั้งตำแหน่งข้อความหัวตาราง
ตัวอย่างนี้แสดงวิธีการจัดตั้งข้อความหัวตาราง。

CSS ตารางความสัมพันธ์

属性 描述
border คุณสมบัติย่อย ตั้งค่าคุณสมบัติของขอบเส้นทั้งหมดในการบอกเล่าเพียงหนึ่งคำ
border-collapse กำหนดว่าจะตกลงขอบเส้นตารางหรือไม่
border-spacing กำหนดระยะทางของขอบเส้นระหว่างเซลล์
caption-side กำหนดตำแหน่งของข้อหัวข้อตาราง
empty-cells กำหนดว่าจะแสดงขอบเส้นและสีพื้นที่ด้านในเซลล์ว่างของตาราง
table-layout ตั้งค่าวิธีแบบจำลองเพื่อตาราง