หรือคุณสามารถทำสิ่งนี้:

ที่นี่เช่นเดียวกับทั่วทั้งภาษา HTMLลำดับที่พารามิเตอร์แท็กปรากฏไม่สำคัญ ดังนั้นจึงสามารถบันทึกทั้งสองตัวเลือกได้ ตอนนี้เรามาสร้างตารางที่มีความกว้าง 360 พิกเซลและสูง 80 พิกเซล ตารางจะประกอบด้วยสองแถวและสองคอลัมน์ (เช่น จะมี 4 เซลล์) แถวจะมีความสูงเท่ากันและเซลล์จะมีความกว้างเท่ากัน คำนวณขนาดของเซลล์เดียวด้วยตัวเอง จากนั้นจึงวาดและวัดตารางในอนาคต เราเขียนโค้ดโดยไม่ได้ระบุขนาดเฉพาะ:

คุณได้เห็นโค้ดที่คล้ายกันแล้ว ยกตัวอย่างไว้แล้วในหน้าที่แล้ว มีเพียง 3 แถว 3 คอลัมน์ ในที่นี้มีอย่างละ 2 แถว ตอนนี้ คุณจะเสริมโค้ดง่ายๆ นี้ด้วยพารามิเตอร์มิติ ลองด้วยตัวเองก่อนแล้วดูโค้ดที่เสร็จแล้วด้านล่าง:

จากการใส่รหัสนี้ในเบราว์เซอร์คุณจะเห็นภาพที่คล้ายกัน

ขนาดตารางสัมพัทธ์

ตอนนี้เรามาดูหน่วยการวัดสัมพัทธ์กัน - เปอร์เซ็นต์ ระบบขนาดสัมพัทธ์มีความยืดหยุ่นมากกว่า เนื่องจากในกรณีนี้ ขนาดของเซลล์หรือตารางจะถูกปรับตามขนาดขององค์ประกอบที่เซลล์หรือตารางนี้ตั้งอยู่ องค์ประกอบภายนอกที่มีเซลล์หรือตารางดังกล่าวเรียกอีกอย่างว่า องค์ประกอบหลัก- สำหรับเซลล์ พาเรนต์จะเป็นตารางที่มีเซลล์เสมอ สำหรับตารางที่อยู่ในเซลล์ "เซลล์" ของตารางอื่น องค์ประกอบหลักจะเป็นเซลล์ "เซลล์" สำหรับตารางที่อยู่ในคอนเทนเนอร์แท็กโดยตรง องค์ประกอบหลักจะเป็น เนื้อหาของหน้า- ดังนั้น หากกำหนดขนาดของเซลล์/ตารางเป็นเปอร์เซ็นต์ เบราว์เซอร์จะคำนวณเปอร์เซ็นต์เหล่านั้น ขนาดขององค์ประกอบหลัก- หากคุณยังไม่เข้าใจสิ่งที่เรากำลังพูดถึง ไม่ต้องกังวล: ตัวอย่างจะช่วยให้คุณเข้าใจสาระสำคัญได้

ตัวอย่างที่หนึ่ง สมมติว่าตารางอยู่ในส่วนเนื้อหาของหน้าโดยตรง และพารามิเตอร์ความกว้างของตารางจะเป็นดังนี้: ความกว้าง = "50%"- ในสถานการณ์เช่นนี้ ความกว้างของตารางจะเท่ากับเสมอ ครึ่งหนึ่งของความกว้างของหน้า- ไม่ว่าเพจนี้จะเปิดมอนิเตอร์ตัวไหนก็ตาม และไม่ว่าขนาดของหน้าต่างเบราว์เซอร์จะเปลี่ยนแปลงไปอย่างไร

ตัวอย่างที่สอง สมมติว่าคุณมีตารางที่มีความกว้าง 500 พิกเซล และความกว้างของเซลล์ใด ๆ จะถูกตั้งค่าดังนี้: ความกว้าง = "10%"- ในกรณีนี้ ความกว้างของเซลล์จะเป็น 10% ของความกว้างของตาราง เช่น ความกว้างของเซลล์จะเป็น 50 พิกเซล แต่ตอนนี้คุณตัดสินใจเปลี่ยนความกว้างของตารางเป็น 700 พิกเซล เมื่อคุณทำเช่นนี้ ความกว้างของเซลล์จะเปลี่ยนเป็น 70 พิกเซลโดยอัตโนมัติ

ตัวอย่างที่สาม ความกว้างของตารางคือ 70% ของความกว้างหน้า และขนาดของเซลล์ ความกว้าง = "10%"- ในกรณีนี้ ความกว้างของตารางจะปรับตามความกว้างของหน้าต่างเบราว์เซอร์ ดังตัวอย่างแรก และความกว้างของเซลล์จะปรับตามความกว้างของตาราง เหล่านั้น. เมื่อหน้าต่างเบราว์เซอร์ถูกขยาย/บีบอัดตามความกว้าง ไม่เพียงแต่ความกว้างของตารางเท่านั้น แต่ยังรวมถึงความกว้างของเซลล์ด้วยที่เปลี่ยนแปลงโดยอัตโนมัติ

ตอนนี้เรามาสร้างตารางเดียวกันกับที่ให้ไว้ด้านบน แต่มาทำให้ขนาดเซลล์สัมพันธ์กัน

โปรดทราบว่าตารางกลายเป็นตารางที่เหมือนกับตารางที่ระบุไว้ในขนาดสัมบูรณ์โดยสิ้นเชิง สิ่งนี้เกิดขึ้นเนื่องจากขนาดของตารางยังคงสัมบูรณ์ หากมีความสัมพันธ์กัน ตารางจะเปลี่ยนขนาดเมื่อหน้าต่างเบราว์เซอร์ขยายหรือย่อ ลองตั้งค่าในโค้ดก่อนหน้า ญาติขนาดสำหรับแท็ก

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

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

ต้องเน้นย้ำว่าแต่ละตารางมีความกว้างขั้นต่ำและความสูงขั้นต่ำของตัวเองซึ่งได้รับผลกระทบจากเนื้อหา และแม้ว่าคุณจะตั้งค่าความกว้างและความสูงให้น้อยลง แต่ก็ไม่มีอะไรเกิดขึ้น ด้านข้างของโต๊ะจะต้องไม่เกินค่าต่ำสุด

ในการระบุความกว้างของตาราง คุณต้องใช้คุณสมบัติ CSS ความกว้างและเพื่อกำหนดความสูงคุณต้องใช้คุณสมบัติ ความสูง.

ในตัวอย่างจะมีลักษณะเช่นนี้

ตาราง ( กว้าง: 500px; สูง: 100px; )

ผลลัพธ์ในเบราว์เซอร์:

รหัสเต็ม:

ค่าความกว้างและความสูงของตารางสามารถระบุเป็นค่าสัมบูรณ์ (เป็นพิกเซล) หรือเป็นค่าสัมพัทธ์ - เป็นเปอร์เซ็นต์ เช่น 20px และ 20% ตามลำดับ

หากคุณใช้เปอร์เซ็นต์ในการกำหนดขนาดตาราง จะมีการคำนวณตามขนาดขององค์ประกอบหลัก หากเราพูดถึงตัวอย่างของเรา เรากำลังพูดถึงหน้าต่างเบราว์เซอร์

มีความหมายอื่น - รถยนต์ และมีความพิเศษเนื่องจากความกว้างและความสูงของตารางจะถูกคำนวณโดยอัตโนมัติตามค่าเริ่มต้น ในทางปฏิบัติ การระบุค่านี้จะมีลักษณะเช่นนี้

ความกว้าง: อัตโนมัติ;

ความสูง: อัตโนมัติ;

เราอยากจะดึงความสนใจของคุณไปยังจุดสำคัญอีกจุดหนึ่ง เป็นการดีกว่าที่จะไม่ระบุความสูงเป็นเปอร์เซ็นต์เนื่องจากตามกฎแล้วจะไม่ทำงานในกรณีนี้

การระบุขนาดของแต่ละเซลล์และคอลัมน์

หากคุณคิดว่าเบราว์เซอร์ไม่ได้ตั้งค่าความกว้างของคอลัมน์ตามเนื้อหาของเซลล์อย่างถูกต้อง คุณมีสิทธิ์ระบุขนาดของเซลล์และคอลัมน์ด้วยตัวเอง และตอนนี้เราจะพูดถึงวิธีเปลี่ยนขนาดเซลล์ในตาราง HTML

การปรับขนาดเซลล์ทำได้โดยใช้คุณสมบัติ CSS เดียวกันกับขนาดตาราง กล่าวคือ: ความกว้างและ ความสูง.

หากต้องการเพิ่มสไตล์ให้กับเซลล์ คุณสามารถใช้หนึ่งในสองตัวเลือก:

1. ตั้งชื่อคลาสเป็นรายบุคคลให้กับเซลล์ มันจะมีลักษณะเช่นนี้: class="cell-50px"

   และหลังจากนั้นคุณควรใช้สไตล์กับคลาสเหล่านี้

2. เปิดใช้งานแอตทริบิวต์ สไตล์ข้างในเขียนโค้ด CSS ที่จำเป็น

ในทางปฏิบัติ ตัวเลือกที่สองจะมีลักษณะดังนี้: