ระยะห่างระหว่างแถวของตาราง css ขอบภายในเซลล์
วัตถุประสงค์ของบทเรียน:ความรู้เบื้องต้นเกี่ยวกับคุณสมบัติของตารางและหลักการจัดวางตาราง CSS
มาดูคุณสมบัติพื้นฐานของตาราง CSS กัน
ชายแดน
คุณสมบัติถือเป็นหนึ่งเดียวและมีคุณสมบัติหลายอย่างพร้อมกัน:
- สไตล์เส้นขอบ
- เส้นขอบกว้าง
- ขอบ-สี
นอกจากนี้ยังมีกฎทั่วไป:
table.collapse( เส้นขอบยุบ:ยุบ; ) table.separate( เส้นขอบยุบ:แยก; )
ผลลัพธ์:
ความกว้างและความสูง
(ความสูงและความกว้างของตาราง)
ค่า:
ตัวอย่าง:
จัดข้อความ
(การจัดตำแหน่งแนวนอน)
ค่า:
- ศูนย์กลาง (กลาง)
- ซ้าย (ตามขอบซ้าย)
- ขวา (ขอบขวา)
- จัดชิดขอบ (กว้าง)
แนวตั้งจัด
(การจัดตำแหน่งแนวตั้ง)
ค่า:
- พื้นฐาน (ตามแนวพื้นฐาน)
- ย่อย (เป็นดัชนีย่อย)
- ซุปเปอร์ (เช่น superindex)
- ด้านบน (ตามขอบด้านบน)
- กลาง (ตรงกลาง)
- ด้านล่าง (ตามขอบด้านล่าง)
- % (ของความสูงของระยะห่างบรรทัด)
ตัวอย่าง:
ช่องว่างภายใน
(เยื้องในตาราง)
สีพื้นหลัง (พื้นหลัง)
สี (สีข้อความ)
เค้าโครงตาราง CSS
เนื่องจากคุณสมบัติของตารางจำนวนมากและการออกแบบที่หลากหลาย ตารางจึงเป็นมาตรฐานสำหรับการจัดวางหน้าเว็บมานานแล้ว หากคุณทำให้มองไม่เห็นเส้นขอบของตาราง คุณสามารถใช้แต่ละเซลล์ของตารางเป็นบล็อกแยกของหน้าได้ เช่น ส่วนหัว เมนู ท้ายกระดาษ ฯลฯ
แต่นี่ยังไม่ถูกต้องทั้งหมด เนื่องจากแต่ละแท็กมีวัตถุประสงค์ของตัวเอง และไม่ควรใช้ตารางในการจัดวางหน้า อย่างไรก็ตาม การไม่มีทางเลือกอื่นทำให้นักออกแบบใช้วิธีการจัดวางเฉพาะนี้
ขณะนี้มีวิธีอื่นคือการใช้เลเยอร์ซึ่งค่อยๆ แทนที่ตารางในงานประเภทนี้ด้วยหน้าเว็บ อย่างไรก็ตามแม้ในสมัยของเรานักออกแบบบางคนก็ประสบความสำเร็จในการใช้เค้าโครงแบบตาราง
เค้าโครงตารางที่มีสองคอลัมน์
วิธีจัดวางที่พบบ่อยที่สุดวิธีหนึ่งคือสองคอลัมน์ กล่าวคือ หน้านี้แบ่งออกเป็นสองส่วน
ตัวอย่าง:ตั้งค่าเฟรมหลักของหน้าจากสองคอลัมน์: คอลัมน์แรก - มีขนาดคงที่, คอลัมน์ที่สอง - สำหรับพื้นที่ที่เหลือของเบราว์เซอร์ เสร็จสิ้นภารกิจโดยใช้ สไตล์ CSS ()
การดำเนินการ:
| </หัว> <ร่างกาย > <รหัสตาราง = "maket" cellspacing = "0" > <ตร > <td id = "ซ้าย" > 1</td> <td id = "ถูกต้อง" > 2</td> </tr> </ตาราง> ... |
| 1 | 2 |
ผลลัพธ์:
ตัวอย่าง:ตั้งค่าพื้นหลังของเซลล์ที่แตกต่างกัน (เพื่อแยกสองคอลัมน์ออกจากกัน) และกำหนดระยะห่างระหว่างคอลัมน์ (ตัวคั่น)
การดำเนินการ:
มาเพิ่มคุณสมบัติสไตล์ใหม่:
/* สำหรับเซลล์ด้านซ้าย */ td#left( width:200px; พื้นหลัง: #ccc; border:1px solid black; /* ทำเครื่องหมายที่เส้นขอบชั่วคราว */ ) /* สำหรับเซลล์ด้านขวา */ td#right( พื้นหลัง: #fc3; border:1px solid black; /* ทำเครื่องหมายเส้นขอบชั่วคราว */ ) /* สำหรับตัวแบ่ง */ #razdel( width: 10px; /* ระยะห่างระหว่างคอลัมน์ */ )
ทั้งหมดเข้าด้วยกัน:
| </หัว> <ร่างกาย > <รหัสตาราง = "maket" cellspacing = "0" > <ตร > <td id = "ซ้าย" > 1</td> <td id = "ราซเดล"> <td id = "ถูกต้อง" > 2</td> </tr> </ตาราง> |
| 1 | 2 |
มีการเพิ่มเซลล์ใหม่สำหรับตัวคั่นแล้ว
ผลลัพธ์:
ตัวอย่าง:สร้างตัวคั่นระหว่างคอลัมน์ตารางโดยใช้ เส้นประขอบเขตของเซลล์ที่อยู่ติดกัน
การดำเนินการ:
มาเพิ่มคุณสมบัติเส้นขอบใหม่สำหรับเซลล์:
/* สำหรับเซลล์ด้านซ้าย */ td#left( width:200px; พื้นหลัง: #ccc; /* สีพื้นหลังของคอลัมน์ด้านซ้าย */ /* ใหม่ */ border-right: 1px dashed #000; /* ขอบประขวา ตัวเลือก */ )
ทั้งหมดเข้าด้วยกัน:
| </หัว> <ร่างกาย > <รหัสตาราง = "maket" cellspacing = "0" > <ตร > <td id = "ซ้าย" > 1</td> <td id = "ถูกต้อง" > 2</td> </tr> </ตาราง> |
| 1 | 2 |
ผลลัพธ์:
เค้าโครงตารางที่มีสามคอลัมน์
มีแนวคิดเกี่ยวกับเลย์เอาต์แบบตายตัวหรือแบบ "ลื่นไหล"
แก้ไขเค้าโครง CSS
- เมื่อใช้ รูปแบบคงที่ ความกว้างของตารางทั้งหมดระบุเป็นพิกเซลจากนั้น ไม่ว่าจอภาพและหน้าต่างเบราว์เซอร์จะมีความละเอียดเท่าใด ตารางก็จะมีความกว้างเท่ากันเสมอ
- ในกรณีนั้น ควรแก้ไขความกว้างของคอลัมน์ที่เหลือด้วย.
- คุณไม่สามารถระบุความกว้างของเซลล์หนึ่งเซลล์ได้ จากนั้นระบบจะคำนวณโดยอัตโนมัติตามขนาดของเซลล์ที่เหลือและทั้งตาราง
ตัวอย่าง:สร้างเทมเพลตหน้าสามคอลัมน์ ใช้เค้าโครงตารางคงที่:
- คอลัมน์ซ้าย - 150 พิกเซล;
- คอลัมน์กลาง - 400 พิกเซล;
การดำเนินการ:
| </หัว> <ร่างกาย > <รหัสตาราง = "maket" cellspacing = "0" > <ตร > <td id = "ซ้าย" > 1</td> <td id = "ส่วนกลาง" > 2</td> <td id = "ถูกต้อง" > 3</td> </tr> </ตาราง> |
| 1 | 2 | 3 |
ผลลัพธ์:
หุ่นยาง
- ความกว้างของตารางเมื่อใช้ดีไซน์ "ยาง" กำหนดเป็น % ของความกว้างหน้าต่างเบราว์เซอร์- ที่. เมื่อหน้าต่างเบราว์เซอร์เปลี่ยนแปลง ขนาดตารางก็จะเปลี่ยนไปด้วย
- ความกว้างของเซลล์ทั้งหมดสามารถติดตั้งได้ เป็นเปอร์เซ็นต์.
- ตัวเลือกที่สองคือเมื่อใด ความกว้างของบางเซลล์ได้รับการติดตั้งแล้ว เป็นเปอร์เซ็นต์, ก บางส่วน - เป็นพิกเซล.
สำคัญ:ผลรวมของความกว้างของคอลัมน์ทั้งหมดควรเป็น 100% โดยไม่คำนึงถึงความกว้างของตาราง
ตัวอย่าง:
- คอลัมน์ซ้าย - 20%;
- คอลัมน์กลาง - 40%;
- คอลัมน์ขวา - 40%;
ตั้งค่าพื้นหลังสำหรับคอลัมน์และแยกคอลัมน์ด้วยสายตาด้วยเส้นขอบ
การดำเนินการ:
| </หัว> <ร่างกาย > <รหัสตาราง = "maket" cellspacing = "0" > <ตร > <td id = "ซ้าย" > 1</td> <td id = "ส่วนกลาง" > 2</td> <td id = "ถูกต้อง" > 3</td> </tr> </ตาราง> |
| 1 | 2 | 3 |
ผลลัพธ์:
ลองพิจารณาตัวเลือกที่สองเมื่อเบราว์เซอร์เลือกความกว้างของคอลัมน์กลางโดยอัตโนมัติ ตัวอย่างคือรูปภาพต่อไปนี้: 
ตัวอย่าง:สร้างเทมเพลตหน้าสามคอลัมน์ ใช้เค้าโครงตารางแบบไหล:
- คอลัมน์ซ้าย - 150 พิกเซล;
- คอลัมน์กลาง - 40%;
- คอลัมน์ด้านขวา - 200 พิกเซล;
ตั้งค่าพื้นหลังสำหรับคอลัมน์และแยกคอลัมน์ด้วยสายตาด้วยเส้นขอบ
การดำเนินการ:
| </หัว> <ร่างกาย > <รหัสตาราง = "maket" cellspacing = "0" > <ตร > <td id = "ซ้าย" > 1</td> <td id = "ส่วนกลาง" > 2</td> <td id = "ถูกต้อง" > 3</td> </tr> </ตาราง> |
| 1 | 2 | 3 |
ผลลัพธ์:
ผลลัพธ์จะใกล้เคียงกันโดยประมาณ เฉพาะ "การยืด" เท่านั้นที่จะเกิดขึ้นเนื่องจากคอลัมน์กลาง
การใช้ตารางที่ซ้อนกันในรูปแบบของเหลว
หากความกว้างของสองคอลัมน์ตั้งค่าเป็นเปอร์เซ็นต์ และคอลัมน์ที่สามเป็นพิกเซล คุณจะไม่สามารถผ่านไปได้ด้วยตารางเดียว ดังนั้น หากความกว้างของตารางทั้งหมดคือ 100 เปอร์เซ็นต์ คอลัมน์แรกคือ 200 พิกเซล และคอลัมน์ที่เหลือคือ 20 เปอร์เซ็นต์ การคำนวณอย่างง่ายจะแสดงว่าขนาดของคอลัมน์แรกคือ 60 เปอร์เซ็นต์ ในกรณีนี้ เบราว์เซอร์จะไม่ยอมรับค่าที่ระบุเป็นพิกเซล และขนาดจะถูกกำหนดเป็นเปอร์เซ็นต์ 
- ตารางต้นฉบับถูกสร้างขึ้นโดยมีสองเซลล์ ความกว้างของตารางถูกกำหนดเป็นเปอร์เซ็นต์.
- สำหรับเซลล์ด้านซ้ายกำหนดความกว้าง (คอลัมน์แรก) แล้ว เป็นพิกเซล.
- ความกว้างของเซลล์ด้านขวา(พื้นฐานสำหรับคอลัมน์อื่นๆ) ไม่ได้ระบุ- ตารางที่สองซึ่งประกอบด้วยสองเซลล์ก็ถูกแทรกเข้าไปในเซลล์นี้
- สำหรับเซลล์ตารางที่ซ้อนกัน ความกว้างจะถูกตั้งค่าเป็นเปอร์เซ็นต์.
- ควรตั้งค่าความกว้างของโต๊ะด้านในเป็น 100 เปอร์เซ็นต์เพื่อให้ตารางนี้ใช้พื้นที่ว่างทั้งหมดในตารางภายนอก
- ความกว้างของคอลัมน์ตรงกลางและคอลัมน์ด้านขวาจะคำนวณโดยสัมพันธ์กับความกว้างของเซลล์ ไม่ใช่ตารางด้านนอกโดยรวม
ตัวอย่าง:สร้างเทมเพลตหน้าสามคอลัมน์ ใช้รูปแบบของเหลวกับตารางที่ซ้อนกัน:
- คอลัมน์ซ้าย - 150 พิกเซล;
- คอลัมน์กลาง - 60%;
- คอลัมน์ขวา - 40%;
กำหนดพื้นหลังให้กับคอลัมน์
การดำเนินการ:
แอตทริบิวต์แท็ก cellpadding และ cellspacing เป็นสิ่งจำเป็นที่นี่เพื่อให้แน่ใจว่าไม่มี "ช่องว่าง" ระหว่างตาราง สวัสดี ตารางที่เป็นองค์ประกอบมีลักษณะเฉพาะของตัวเองซึ่งทำให้แตกต่างจากบล็อกที่หลายคนคุ้นเคยมากกว่า วันนี้ฉันอยากจะพูดถึงวิธีการลงทะเบียน ระยะห่างของ CSSระหว่างเซลล์ตาราง ความแตกต่างกับรูปแบบบล็อกในการกำหนดระยะห่างระหว่างบล็อก โดยปกติจะใช้ระยะขอบด้านนอก แต่ในกรณีของเซลล์ วิธีนี้จะไม่ทำงาน สามารถระบุการเยื้องภายในสำหรับเซลล์ได้ แต่การเยื้องภายนอกไม่สามารถระบุได้ นี่ดูเหมือนจะเป็นปัญหาเล็กๆ แต่โดยค่าเริ่มต้น เซลล์ในตารางไม่ได้อยู่ใกล้กัน แต่มีการเยื้องเล็กน้อยซึ่งไม่จำเป็นเสมอไป จะลบมันได้อย่างไร? คุณสมบัติการเว้นระยะห่างชายแดนคุณสมบัติที่เข้ามาช่วยเหลือคือคุณสมบัติที่ใช้ใน CSS สำหรับข้อมูลแบบตารางโดยเฉพาะ - ระยะห่างขอบ ตามชื่อที่แสดง จะกำหนดพื้นที่ว่าง (ระยะขอบ) จากแต่ละเซลล์ จุดสำคัญ: จำเป็นต้องตั้งค่าระยะห่างเส้นขอบสำหรับทั้งตารางนั่นคือเช่นนี้: โต๊ะ( ด้วยกฎนี้เราจะลบระยะห่างระหว่างเซลล์และตอนนี้พวกมันก็ถูกกดทับกันอย่างแน่นหนา ดังนั้น คุณสามารถกำหนดระยะห่างนี้เป็นพิกเซลได้หากจำเป็น อาจเป็นเรื่องผิดปกติเล็กน้อยที่จะตั้งค่าคุณสมบัติบนตัวเลือกตาราง แต่เป็นคุณลักษณะของตาราง คุณเพียงแค่ต้องจำไว้ คุณสมบัติจะไม่ทำงานหากตารางถูกตั้งค่าเป็น border-collapse: allowance ในกรณีนี้ ขอบด้านนอกของเซลล์จะถูกลบออกโดยอัตโนมัติ และไม่จำเป็นต้องมีระยะห่างขอบ วิธีที่ล้าสมัยในการกำหนดระยะขอบของเซลล์ก่อนหน้านี้สำหรับแท็กนี้
ใน ในตัวอย่างนี้เราได้สีพื้นหลังสีน้ำเงินสำหรับเซลล์ (แท็ก ) และสีแดงที่ชื่อ (แท็ก | - เนื่องจากไม่ได้กำหนดสไตล์สำหรับตัวเลือก TH ดังนั้นพื้นหลังของพาเรนต์ ในกรณีนี้คือตัวเลือกตาราง จึงเป็น "แสดงผ่าน"
| และมีการระบุสีของตัวเลือก TD ไว้อย่างชัดเจน ดังนั้นเซลล์จึง "เต็ม" ด้วยสีน้ำเงิน ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 2.4. ข้าว. 2.4. การเปลี่ยนสีพื้นหลังขอบภายในเซลล์
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
ในตัวอย่างนี้ โดยการจัดกลุ่มตัวเลือก ฟิลด์จะถูกตั้งค่าพร้อมกันสำหรับตัวเลือก TD และ TH ผลลัพธ์ของตัวอย่างจะแสดงในรูป 2.5. ข้าว. 2.5. เขตข้อมูลในเซลล์
โดนาเทลโล
ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 2.6. ข้าว. 2.6. มุมมองตารางเมื่อใช้ระยะห่างขอบ เบราว์เซอร์อินเทอร์เน็ตเอ็กซ์พลอเรอร์ เวอร์ชันจนถึงและรวมถึงเวอร์ชัน 7 ไม่รองรับคุณสมบัติ border-spacing ดังนั้นในเบราว์เซอร์นี้ ค่า Cellspacing เริ่มต้น (ปกติคือ 2px) จะใช้สำหรับตาราง เมื่อเพิ่มคุณสมบัติการยุบเส้นขอบด้วยค่าการยุบลงในตัวเลือกตาราง คุณลักษณะการเว้นวรรคเซลล์จะถูกละเว้น และค่าระยะห่างเส้นขอบจะถูกรีเซ็ตเป็นศูนย์ตามค่าเริ่มต้น ไม่มีเส้นขอบในตารางในตอนแรก และการเพิ่มจะเกิดขึ้นโดยใช้แอตทริบิวต์เส้นขอบของแท็ก
ตัวอย่างนี้ใช้เส้นขอบคู่สีดำรอบตารางและมีขอบสีขาวทึบรอบแต่ละเซลล์ ผลลัพธ์ของตัวอย่างจะแสดงในรูป 2.7.
ข้าว. 2.7. ล้อมรอบตารางและเซลล์ โปรดทราบว่ามีการสร้างเส้นคู่ที่เซลล์เชื่อมต่อกัน ได้รับอีกครั้งเนื่องจากการทำงานของแอตทริบิวต์ cellspacing ของแท็ก
ตัวอย่างนี้สร้างเส้นทึบสีเขียวระหว่างเซลล์และเส้นสีดำรอบๆ ตาราง เส้นขอบทั้งหมดภายในตารางมีความหนาเท่ากัน ผลลัพธ์ของตัวอย่างจะแสดงในรูป 2.8.
ข้าว. 2.8. ขอบรอบโต๊ะ การจัดแนวเนื้อหาของเซลล์ตามค่าเริ่มต้น ข้อความในเซลล์ตารางจะถูกจัดชิดซ้าย ข้อยกเว้นสำหรับกฎนี้คือแท็ก จะกำหนดส่วนหัวที่อยู่ตรงกลาง หากต้องการเปลี่ยนวิธีการจัดตำแหน่ง ให้ใช้คุณสมบัติสไตล์การจัดตำแหน่งข้อความ (ตัวอย่าง 2.8)
| ตัวอย่างที่ 2.8 จัดเนื้อหาเซลล์ในแนวนอน ตัวอย่างที่ 2.4 เขตข้อมูลในตาราง
ในตัวอย่างนี้ เนื้อหาของแท็ก จัดชิดซ้ายและเนื้อหาของแท็ก | - อยู่ตรงกลาง ผลลัพธ์ของตัวอย่างแสดงไว้ด้านล่าง (รูปที่ 2.9)
|
ข้าว. 2.9. การจัดแนวข้อความในเซลล์ การจัดแนวแนวตั้งในเซลล์จะจัดกึ่งกลางเสมอ เว้นแต่จะระบุไว้เป็นอย่างอื่น ซึ่งไม่สะดวกเสมอไป โดยเฉพาะกับตารางที่มีเนื้อหาในเซลล์มีความสูงต่างกัน ในกรณีนี้ การจัดตำแหน่งจะถูกตั้งค่าไว้ที่ขอบด้านบนของเซลล์โดยใช้คุณสมบัติการจัดตำแหน่งตามแนวตั้ง ดังแสดงในตัวอย่างที่ 2.9 ตัวอย่างที่ 2.9 จัดแนวเนื้อหาของเซลล์ในแนวตั้ง ตัวอย่างที่ 2.4 เขตข้อมูลในตาราง
ตัวอย่างนี้กำหนดความสูงของส่วนหัว เช่น 40 พิกเซล และข้อความจัดชิดขอบด้านล่าง ผลลัพธ์ของตัวอย่างจะแสดงในรูป 2.10.
|
ข้าว. 2.10. การจัดแนวข้อความในเซลล์ เซลล์ว่างเบราว์เซอร์จะแสดงเซลล์โดยไม่มีอะไรอยู่ข้างในแตกต่างไปจากนี้ “ไม่มีอะไร” ในกรณีนี้หมายความว่าไม่ได้เพิ่มรูปภาพหรือข้อความลงในเซลล์ และไม่มีการพิจารณาช่องว่าง โดยธรรมชาติแล้ว ลักษณะของเซลล์จะแตกต่างกันก็ต่อเมื่อมีการกำหนดเส้นขอบไว้รอบๆ เมื่อใช้เส้นขอบที่มองไม่เห็น ลักษณะของเซลล์ไม่ว่าจะมีอะไรอยู่ในนั้นหรือไม่ก็ตามก็จะเหมือนกัน เบราว์เซอร์รุ่นเก่าไม่แสดงสีพื้นหลังของเซลล์มุมมองว่าง ดังนั้นเมื่อจำเป็นต้องออกจากเซลล์โดยไม่มีเนื้อหาแต่แสดงสีพื้นหลัง ช่องว่างที่ไม่แยก () จะถูกเพิ่มเข้าไปในเซลล์ พื้นที่ไม่เหมาะสมเสมอไป โดยเฉพาะอย่างยิ่งเมื่อคุณต้องการตั้งค่าความสูงของเซลล์เป็น 1-2 พิกเซล ซึ่งเป็นเหตุผลว่าทำไมการออกแบบโปร่งใสหนึ่งพิกเซลจึงแพร่หลาย อันที่จริงภาพดังกล่าวสามารถปรับขนาดได้ตามดุลยพินิจของคุณ แต่จะไม่แสดงบนหน้าเว็บ แต่อย่างใด
| โชคดีที่ยุคของการวาดภาพแบบพิกเซลเดียวและตัวเว้นวรรคทุกประเภทได้ผ่านไปแล้ว เบราว์เซอร์ทำงานค่อนข้างถูกต้องกับตารางแม้ว่าจะไม่มีเนื้อหาในเซลล์ก็ตาม หากต้องการควบคุมลักษณะที่ปรากฏของเซลล์ว่าง ให้ใช้คุณสมบัติเซลล์ว่าง เมื่อตั้งค่าให้ซ่อน เส้นขอบและพื้นหลังจะไม่แสดงในเซลล์ว่าง หากเซลล์ทั้งหมดในแถวว่างเปล่า ทั้งแถวจะถูกซ่อนไว้ เซลล์จะถือว่าว่างเปล่าในกรณีต่อไปนี้:
ส่วนที่เพิ่มเข้าไป พื้นที่ไม่ทำลายถูกมองว่าเป็นเนื้อหาที่มองเห็นได้เช่น เซลล์จะไม่ว่างเปล่าอีกต่อไป (ตัวอย่าง 2.10) ตัวอย่าง 2.10. เซลล์ว่าง ตัวอย่างที่ 2.4 เขตข้อมูลในตาราง
มุมมองตารางใน เบราว์เซอร์ซาฟารีแสดงในรูปที่. 2.11ก. ตารางเดียวกันในเบราว์เซอร์ IE7 จะแสดงในรูป. 2.11ข.
ก. ในเบราว์เซอร์ Safari, Firefox, Opera, IE8, IE9
ข. ในเบราว์เซอร์ IE7 ข้าว. 2.11. มุมมองของตารางที่มีเซลล์ว่าง ข้อมูลแบบตาราง- ข้อมูลที่สามารถแสดงในตารางและแบ่งออกเป็นคอลัมน์และแถวตามตรรกะ ใช้เพื่อแสดงข้อมูลแบบตารางบนหน้าเว็บ แท็ก HTML
|
