.
โดยใช้ ซีเอสเอส-คุณสมบัติ ระยะห่างชายแดน.
ก็ต้องเน้นย้ำว่า ระยะห่างชายแดนระบุไว้สำหรับตารางโดยรวมในขณะที่คุณสมบัติ ช่องว่างภายในถูกเขียนโดยตรงสำหรับเซลล์
ลองดูตัวอย่าง:
ตาราง ( เส้นขอบ: ทึบ 1px สีน้ำเงิน; ยุบขอบ: แยก; ระยะห่างชายแดน: 5px; ) td ( เส้นขอบ: ทึบ 1px สีน้ำเงิน; ขยาย: 10px; ขยายด้านล่าง: 20px; )
และผลลัพธ์ที่ได้ก็คือ:
ให้เรากำหนดทันทีว่าคุณไม่ควรพยายามใช้การเยื้องดังกล่าว การล่มสลายของเส้นขอบ: การล่มสลาย- ท้ายที่สุดเมื่อใช้ตัวเลือกนี้ เซลล์จะ "ติด" ซึ่งกันและกัน
และเพื่อให้แยกออกจากกันคุณควรใช้ การล่มสลายของเส้นขอบ: แยกจากกัน- สิ่งสำคัญคือต้องเข้าใจว่าค่านี้เป็นค่าเริ่มต้น และใช้เพื่อแสดงให้เห็นอย่างชัดเจนว่าปัญหานี้ได้รับการแก้ไขอย่างไร หากเราลบบรรทัดนี้ ผลลัพธ์ในรูปแบบเซลล์ที่แยกจากกันจะถูกบันทึก
วัตถุประสงค์ของบทเรียน:ความรู้เบื้องต้นเกี่ยวกับคุณสมบัติของตารางและหลักการจัดวางตาราง CSS
มาดูหลักกันดีกว่า คุณสมบัติซีเอสเอสตาราง
ชายแดน
คุณสมบัติถือเป็นหนึ่งเดียวและมีคุณสมบัติหลายอย่างพร้อมกัน:
- สไตล์เส้นขอบ
- เส้นขอบกว้าง
- ขอบ-สี
นอกจากนี้ยังมีกฎทั่วไป:
table.collapse( เส้นขอบยุบ:ยุบ; ) table.separate( เส้นขอบยุบ:แยก; )
ผลลัพธ์:
ความกว้างและความสูง
(ความสูงและความกว้างของตาราง)
ค่า:
ตัวอย่าง:
จัดข้อความ
(การจัดตำแหน่งแนวนอน)
ค่า:
- ศูนย์กลาง (กลาง)
- ซ้าย (ตามขอบซ้าย)
- ขวา (ขอบขวา)
- จัดชิดขอบ (กว้าง)
แนวตั้งจัด
(การจัดตำแหน่งแนวตั้ง)
ค่า:
- พื้นฐาน (ตามแนวพื้นฐาน)
- ย่อย (เป็นดัชนีย่อย)
- ซุปเปอร์ (เช่น superindex)
- ด้านบน (ตามขอบด้านบน)
- กลาง (ตรงกลาง)
- ด้านล่าง (ตามขอบด้านล่าง)
- % (ของความสูงของระยะห่างบรรทัด)
ตัวอย่าง:
ช่องว่างภายใน
(เยื้องในตาราง)
สีพื้นหลัง (พื้นหลัง)
สี (สีข้อความ)
เค้าโครงตาราง CSS
ขอบคุณ จำนวนมากคุณสมบัติของตารางและรูปแบบต่างๆ ในการออกแบบ ตาราง เป็นเวลานานเป็นมาตรฐานสำหรับการจัดวางหน้าเว็บ หากคุณทำให้มองไม่เห็นเส้นขอบของตาราง คุณสามารถใช้แต่ละเซลล์ของตารางเป็นบล็อกแยกของหน้าได้ เช่น ส่วนหัว เมนู ท้ายกระดาษ ฯลฯ
แต่นี่ยังไม่ถูกต้องทั้งหมด เนื่องจากแต่ละแท็กมีวัตถุประสงค์ของตัวเอง และไม่ควรใช้ตารางในการจัดวางหน้า อย่างไรก็ตาม การไม่มีทางเลือกอื่นทำให้นักออกแบบใช้วิธีการจัดวางเฉพาะนี้
ขณะนี้มีวิธีอื่นคือการใช้เลเยอร์ซึ่งค่อยๆ แทนที่ตารางในงานประเภทนี้ด้วยหน้าเว็บ อย่างไรก็ตามแม้ในสมัยของเรานักออกแบบบางคนก็ประสบความสำเร็จในการใช้เค้าโครงแบบตาราง
เค้าโครงตารางที่มีสองคอลัมน์
วิธีจัดวางที่พบบ่อยที่สุดวิธีหนึ่งคือสองคอลัมน์ กล่าวคือ หน้านี้แบ่งออกเป็นสองส่วน
โดยปกติด้านซ้ายจะเป็นเมนูและ องค์ประกอบเพิ่มเติมและด้านขวาคือส่วนหลักสำหรับเนื้อหาหลัก
ในกรณีนี้ความกว้างของส่วนด้านซ้ายจะถูกตั้งค่าเป็นค่าที่แน่นอนเช่น อย่างเหนียวแน่นและด้านขวาจะกินพื้นที่ที่เหลือของหน้า
ในกรณีนี้ คุณต้องตั้งค่าความกว้างรวมของทั้งตาราง (แท็กตาราง) เป็นเปอร์เซ็นต์ผ่านคุณสมบัติความกว้าง (100%) และสำหรับเซลล์แรก (แท็ก td) ให้ตั้งค่าความกว้าง (รวมถึงคุณสมบัติความกว้างด้วย) เป็นพิกเซล หรือเปอร์เซ็นต์
ตัวอย่าง:ตั้งค่าเฟรมหลักของหน้าจากสองคอลัมน์: คอลัมน์แรก - มีขนาดคงที่, คอลัมน์ที่สอง - สำหรับพื้นที่ที่เหลือของเบราว์เซอร์ ทำงานให้เสร็จสิ้นโดยใช้สไตล์ CSS ()
การดำเนินการ:
| </หัว>
<ร่างกาย >
<รหัสตาราง = "maket" cellspacing = "0" >
<ตร >
<td id = "ซ้าย" > 1</td>
<td id = "ถูกต้อง" > 2</td>
</tr>
</ตาราง>
...
|
...
ผลลัพธ์:
ทีนี้ลองแยกคอลัมน์ตารางสองคอลัมน์ออกจากกันด้วยสายตา
ตัวอย่าง:ตั้งค่าพื้นหลังของเซลล์ที่แตกต่างกัน (เพื่อแยกสองคอลัมน์ออกจากกัน) และกำหนดระยะห่างระหว่างคอลัมน์ (ตัวคั่น)
การดำเนินการ:
มาเพิ่มคุณสมบัติสไตล์ใหม่: /* สำหรับเซลล์ด้านซ้าย */ 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>
</ตาราง>
|
มีการเพิ่มเซลล์ใหม่สำหรับตัวคั่นแล้ว
ผลลัพธ์:
ตัวคั่นระหว่างคอลัมน์สามารถทำให้โดดเด่นน้อยลงได้เช่นกัน เมื่อต้องการทำเช่นนี้ เราจะใช้สไตล์เส้นขอบ
ตัวอย่าง:สร้างตัวคั่นระหว่างคอลัมน์ในตารางโดยใช้เส้นประที่ล้อมรอบเซลล์ที่อยู่ติดกัน
การดำเนินการ:
มาเพิ่มคุณสมบัติเส้นขอบใหม่สำหรับเซลล์: /* สำหรับเซลล์ด้านซ้าย */ td#left( width:200px; พื้นหลัง: #ccc; /* สีพื้นหลังของคอลัมน์ด้านซ้าย */ /* ใหม่ */ border-right: 1px dashed #000; /* ขอบประขวา ตัวเลือก */ )
ทั้งหมดเข้าด้วยกัน:
| </หัว>
<ร่างกาย >
<รหัสตาราง = "maket" cellspacing = "0" >
<ตร >
<td id = "ซ้าย" > 1</td>
<td id = "ถูกต้อง" > 2</td>
</tr>
</ตาราง>
|
ผลลัพธ์:
เค้าโครงตารางที่มีสามคอลัมน์
มีแนวคิดเกี่ยวกับเลย์เอาต์แบบตายตัวหรือแบบ "ลื่นไหล"
แก้ไขเค้าโครง CSS
- เมื่อใช้ รูปแบบคงที่ ความกว้างของตารางทั้งหมดระบุเป็นพิกเซลจากนั้น ไม่ว่าจอภาพและหน้าต่างเบราว์เซอร์จะมีความละเอียดเท่าใด ตารางก็จะมีความกว้างเท่ากันเสมอ
- ในกรณีนั้น ควรแก้ไขความกว้างของคอลัมน์ที่เหลือด้วย.
- คุณไม่สามารถระบุความกว้างของเซลล์หนึ่งเซลล์ได้ จากนั้นระบบจะคำนวณโดยอัตโนมัติตามขนาดของเซลล์ที่เหลือและทั้งตาราง
ตัวอย่าง:สร้างเทมเพลตหน้าสามคอลัมน์ ใช้เค้าโครงตารางคงที่:
- คอลัมน์ซ้าย - 150 พิกเซล;
- คอลัมน์กลาง - 400 พิกเซล;
การดำเนินการ:
| </หัว>
<ร่างกาย >
<รหัสตาราง = "maket" cellspacing = "0" >
<ตร >
<td id = "ซ้าย" > 1</td>
<td id = "ส่วนกลาง" > 2</td>
<td id = "ถูกต้อง" > 3</td>
</tr>
</ตาราง>
|
ผลลัพธ์:
หุ่นยาง
- ความกว้างของตารางเมื่อใช้ดีไซน์ "ยาง" กำหนดเป็น % ของความกว้างหน้าต่างเบราว์เซอร์- ที่. เมื่อหน้าต่างเบราว์เซอร์เปลี่ยนแปลง ขนาดตารางก็จะเปลี่ยนไปด้วย
- ความกว้างของเซลล์ทั้งหมดสามารถติดตั้งได้ เป็นเปอร์เซ็นต์.
- ตัวเลือกที่สองคือเมื่อใด ความกว้างของบางเซลล์ได้รับการติดตั้งแล้ว เป็นเปอร์เซ็นต์, ก บางส่วน - เป็นพิกเซล.
สำคัญ:ผลรวมของความกว้างของคอลัมน์ทั้งหมดควรเป็น 100% โดยไม่คำนึงถึงความกว้างของตาราง
ตัวอย่าง:
- คอลัมน์ซ้าย - 20%;
- คอลัมน์กลาง - 40%;
- คอลัมน์ขวา - 40%;
ตั้งค่าพื้นหลังสำหรับคอลัมน์และแยกคอลัมน์ด้วยสายตาด้วยเส้นขอบ
การดำเนินการ:
| </หัว>
<ร่างกาย >
<รหัสตาราง = "maket" cellspacing = "0" >
<ตร >
<td id = "ซ้าย" > 1</td>
<td id = "ส่วนกลาง" > 2</td>
<td id = "ถูกต้อง" > 3</td>
</tr>
</ตาราง>
|
ผลลัพธ์:
ลองพิจารณาตัวเลือกที่สองเมื่อเบราว์เซอร์เลือกความกว้างของคอลัมน์กลางโดยอัตโนมัติ ตัวอย่างคือรูปภาพต่อไปนี้:
ตัวอย่าง:สร้างเทมเพลตหน้าสามคอลัมน์ ใช้เค้าโครงตารางแบบไหล:
- คอลัมน์ซ้าย - 150 พิกเซล;
- คอลัมน์กลาง - 40%;
- คอลัมน์ด้านขวา - 200 พิกเซล;
ตั้งค่าพื้นหลังสำหรับคอลัมน์และแยกคอลัมน์ด้วยสายตาด้วยเส้นขอบ
การดำเนินการ:
| </หัว>
<ร่างกาย >
<รหัสตาราง = "maket" cellspacing = "0" >
<ตร >
<td id = "ซ้าย" > 1</td>
<td id = "ส่วนกลาง" > 2</td>
<td id = "ถูกต้อง" > 3</td>
</tr>
</ตาราง>
|
ผลลัพธ์:
ผลลัพธ์จะใกล้เคียงกันโดยประมาณ เฉพาะ "การยืด" เท่านั้นที่จะเกิดขึ้นเนื่องจากคอลัมน์กลาง
การใช้ตารางที่ซ้อนกันในรูปแบบของเหลว
หากความกว้างของสองคอลัมน์ตั้งค่าเป็นเปอร์เซ็นต์ และคอลัมน์ที่สามเป็นพิกเซล คุณจะไม่สามารถผ่านไปได้ด้วยตารางเดียว ดังนั้น หากความกว้างของตารางทั้งหมดคือ 100 เปอร์เซ็นต์ คอลัมน์แรกคือ 200 พิกเซล และคอลัมน์ที่เหลือคือ 20 เปอร์เซ็นต์ การคำนวณอย่างง่ายจะแสดงว่าขนาดของคอลัมน์แรกคือ 60 เปอร์เซ็นต์ ในกรณีนี้ เบราว์เซอร์จะไม่ยอมรับค่าที่ระบุเป็นพิกเซล และขนาดจะถูกกำหนดเป็นเปอร์เซ็นต์
- ตารางต้นฉบับถูกสร้างขึ้นโดยมีสองเซลล์ ความกว้างของตารางถูกกำหนดเป็นเปอร์เซ็นต์.
- สำหรับเซลล์ด้านซ้ายกำหนดความกว้าง (คอลัมน์แรก) แล้ว เป็นพิกเซล.
- ความกว้างของเซลล์ด้านขวา(พื้นฐานสำหรับคอลัมน์อื่นๆ) ไม่ได้ระบุ- ตารางที่สองซึ่งประกอบด้วยสองเซลล์ก็ถูกแทรกเข้าไปในเซลล์นี้
- สำหรับเซลล์ตารางที่ซ้อนกัน ความกว้างจะถูกตั้งค่าเป็นเปอร์เซ็นต์.
- ควรตั้งค่าความกว้างของโต๊ะด้านในเป็น 100 เปอร์เซ็นต์เพื่อให้ตารางนี้ใช้พื้นที่ว่างทั้งหมดในตารางภายนอก
- ความกว้างของคอลัมน์ตรงกลางและคอลัมน์ด้านขวาจะคำนวณโดยสัมพันธ์กับความกว้างของเซลล์ ไม่ใช่ตารางด้านนอกโดยรวม
ตัวอย่าง:สร้างเทมเพลตหน้าสามคอลัมน์ ใช้รูปแบบของเหลวกับตารางที่ซ้อนกัน:
- คอลัมน์ซ้าย - 150 พิกเซล;
- คอลัมน์กลาง - 60%;
- คอลัมน์ขวา - 40%;
กำหนดพื้นหลังให้กับคอลัมน์
การดำเนินการ:
|
แอตทริบิวต์แท็ก cellpadding และ cellspacing เป็นสิ่งจำเป็นที่นี่เพื่อให้แน่ใจว่าไม่มี "ช่องว่าง" ระหว่างตาราง
ผลลัพธ์:
สวัสดีทุกคน! ตอนนี้คุณรู้วิธีสร้างตารางพื้นฐานที่ประกอบด้วยแถวและคอลัมน์ได้มากเท่าที่จำเป็น ไม่เลวไม่เลว ตอนนี้เรามาพูดถึงการออกแบบตารางเหล่านี้กันดีกว่า
ในบทเรียนที่แล้ว ตารางถูกแสดงโดยไม่มีเส้นขอบ และคุณจะเห็นว่ามันดูธรรมดา คุณไม่สามารถเรียกมันว่าสัญญาณได้ หากต้องการสร้างเส้นขอบตารางในรูปแบบ HTML คุณควรเพิ่มลงในแท็ก
คุณลักษณะ ชายแดนโดยให้ค่าอื่นที่ไม่ใช่ศูนย์
เรามาสร้างขอบโต๊ะกันดีกว่า ตัวอย่างเช่นสำหรับอันที่เรามีอยู่แล้ว:
| เซลล์ซ้ายบน | เซลล์ขวาบน |
| เซลล์ล่างซ้าย | เซลล์ล่างขวา |
ผลลัพธ์ในเบราว์เซอร์:
วิธีลบเส้นขอบตาราง
ในทางกลับกัน หากต้องการลบเส้นขอบของตาราง HTML หรือคุณสามารถพูดว่า ทำให้มองไม่เห็น คุณต้องมีแอตทริบิวต์ ชายแดนตั้งค่า 0
- หลังจากขั้นตอนง่ายๆ เหล่านี้ เฟรมจะถูกลบออก
แอ็ตทริบิวต์อนุญาตให้คุณสร้างแต่ไม่สามารถจัดการขอบเขตได้ ช่วยให้คุณเปลี่ยนความหนาได้เท่านั้น
ดังนั้นตอนนี้เราจะมาพูดถึง ซีเอสเอสซึ่งมีคุณสมบัติทำให้สามารถใช้งานได้ ชายแดนสร้างเส้นขอบที่แตกต่างกัน ทั้งภายในแต่ละเซลล์และภายนอก รอบตารางโดยรวม
มาดูวิธีใช้ CSS เพื่อสร้างเส้นขอบด้านนอกและด้านในของตารางกัน
ในการดำเนินการนี้ ให้ลบแอตทริบิวต์ border ออกจากตารางของเราและเพิ่มสไตล์:
ตารางตัวอย่าง
| เซลล์ซ้ายบน |
เซลล์ขวาบน |
| เซลล์ล่างซ้าย |
เซลล์ล่างขวา |
ผลลัพธ์ในเบราว์เซอร์:
ตอนนี้เรามาเพิ่มเส้นขอบให้กับแต่ละเซลล์ด้วย ในการดำเนินการนี้ เพียงเพิ่มสไตล์:
ผลลัพธ์ในเบราว์เซอร์:
วิธีลบช่องว่างภายในระหว่างเซลล์ในตาราง HTML
ยอมรับว่าขอบเขตที่กำหนดด้วย ใช้ CSSไม่มีเช่นนั้น รูปร่างตามที่เราต้องการ ไม่ต้องสงสัยเลยว่าจากมุมมองเชิงสุนทรีย์ มีบางอย่างที่ต้องทำ บนหน้าเบราว์เซอร์ คุณจะเห็นว่าตามค่าเริ่มต้นจะแสดงเส้นขอบตารางและเซลล์แยกกัน ตัวอย่างนี้แสดงให้เห็นอย่างชัดเจน
อย่างไรก็ตาม คุณสามารถกำจัดเส้นขอบดังกล่าวซึ่งเรียกว่าเส้นขอบคู่ได้อย่างสมบูรณ์ หากคุณใช้คุณสมบัติ CSS ที่ยุบเส้นขอบ ในทางปฏิบัติดูเหมือนว่านี้: ตาราง ( เส้นขอบ: ทึบ 1px สีน้ำเงิน; ยุบขอบ: ยุบ; ) ... เป็นผลให้ระยะห่างระหว่างเซลล์ถูกลบออก:
ค่าการยุบที่กำหนดให้กับแอตทริบิวต์ border ช่วยให้คุณสามารถลบเส้นขอบคู่ได้ ดังที่คุณเห็น ผลลัพธ์คือการยุบเส้นขอบเซลล์ที่อยู่ติดกัน รวมถึงเฟรมเซลล์และกรอบตารางด้านนอก ส่วนอย่างหลังอาจจะถอดออกหมดก็ได้ และหากจำเป็นต้องแสดง ก็ต้องเพิ่มความกว้าง วิธีนี้ทำให้เรากำจัดตัวคั่นในตารางออกไป และในบทเรียนถัดไป เราจะพูดถึงวิธีกำหนดขอบเขตแนวตั้งและแนวนอน ขอให้ทุกคนโชคดี!
ใหม่
วิธีฟื้นฟูรอบประจำเดือนหลังคลอดบุตร:
|
