Disclaimer: This page is a Thai translation from the W3C documents. The translation was written by Aliasa Brookshield, and may contain translation errors. For the original english version, please see Original Document


คำปฏิเสธความรับผิดชอบ : บทความในหน้านี้เป็นบทความแปลซึ่งอาจมีข้อผิดพลาดจากการแปลเกิดขึ้น   เอกสารต้นฉบับ เป็นของ W3C ซึ่งอาจมีการเปลี่ยนแปลงปรับปรุงเนื้อหา ท่านควรดูต้นฉบับประกอบการอ่านเพื่อความถูกต้อง

เว็บสไตล์ชีท
CSS ทิป & ทริค

(หน้านี้มีการใช้ CSS สไตล์ชีท)

สถานะ

หมายเหตุ: ในเวลาที่เขียนบทความนี้ (กุมภาพันธ์ 2003), เบราเซอร์หลักปัจจุบันยังไม่รองรับ ซีเล็คเตอร์ 'nth-child' (ซึ่งเริ่มใช้ในเดือนพฤศจิกายน 2001) และมีเพียงเบราเซอร์บางตัวที่รองรับ อีเลเมนต์ COL

การกำหนดสีให้บรรทัดคู่และบรรทัดคี่

วิธีหนึ่งที่ช่วยให้การอ่านตารางใหญ่ๆเป็นไปได้ง่าย คือการกำหนดสีสลับบรรทัดคู่คี่ เช่น ตารางด้านล่างให้ฉากหลังมีสีเทาในแถวคู่ และสีขาวในแถวคี่ สไตล์ชีทที่ใช้ คือ: 

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
เดือน199419951996199719981999200020012002
มกรา141314131411111111
กุมภา131512151512141313
มีนา161514171615141515
เมษา171617171715151616
พฤษภา212020212220212019
มิถุนา242325242523252324
กรกฎา292826262726252625
สิงหา292827282827262826
กันยา242323262424242221
ตุลา2022202220192022
พฤศจิกา1817161716151415
ธันวา1513131413101311

ในความจริงแล้ว ท่านสามารถกใช้ซีเล็คเตอร์นี้กำหนดค่าอื่น และใช้ช่วงในการหำหนดบรรทัดแทนได้ เช่น: 

li:nth-child(5n+3) {font-weight: bold}

โค้ดข้างบนจะกำหนดให้ทุก 5 บรรทัดจะมีอักษรเป็นตัวหนา เริ่มจากบรรทัดที่ 3 หรือก็คือ บรรทัดที่ 3, 8, 13, 18, 23, ... จะเป็นตัวหนานั่นเอง

คอลัมน์คู่คี่

สไตล์ข้างตันยังใช้ได้กับคอลัมน์ของตารางอีกด้วย โดยใช้อีเลเมนต์ที่แสดงคอลัมน์ ใน HTML คือ COL ท่านต้องใส่ COL ตามจำนวนคอลัมน์ที่ใช้:

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Month<th>1994<th>1995<th>1996...

(COL สามารถประยุกต์ใช้ทำอย่างอื่นได้อีก แต่ในครั้งนี้เราเพียงต้องการแสดงจำนวนคอลัมน์เท่านั้น COL) สไตล์ด้านล่างใช้กำหนดให้คอลัมน์แรกมีสีเหลือง และคอลัมน์ต่อๆไปตั้งแต่คอลัมน์ที่สามเป็นสีเทา:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}
เดือน199419951996199719981999200020012002
มกรา141314131411111111
กุมภา131512151512141313
มีนา161514171615141515
เมษา171617171715151616
พฤษภา212020212220212019
มิถุนา242325242523252324
กรกฎา292826262726252625
สิงหา292827282827262826
กันยา242323262424242221
ตุลา2022202220192022
พฤศจิกา1817161716151415
ธันวา1513131413101311

ฉากหลังของแถว (TR) จะอยู่เหนือฉากหลังของคอลัมน์ (COL) เสมอดังนั้นหากท่านต้องการให้สีของฉากหลังของคอลัมน์มองเห็น ท่านต้องไม่กำหนดฉากหลังของแถวไว้

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
เขียนวันที่ 17 มกราคม 2001;
ปรับปรุงล่าสุด $วันที่: 2009/03/03 12:46:42 $ GMT