คำแนะนำ HyperText Markup Language (HTML) ที่สร้างตารางที่วางไว้ในหน้าเว็บจะมีพารามิเตอร์เพิ่มเติมจำนวนมากพอสมควร ซึ่งแตกต่างจากองค์ประกอบบล็อกอื่นๆ ในการตั้งค่าขนาด ไม่เพียงแต่โดยใช้ภาษา CSS (Cascading Style Sheets หรือ "Cascading Style Sheets") แต่ยังใช้ HTML เองด้วย
คำแนะนำ
ขั้นตอนที่ 1
ใช้แอตทริบิวต์ width ของแท็ก table เพื่อระบุความกว้างของตารางเป็นพิกเซล ตารางแท็ก (คำสั่ง HTML) ประกอบด้วยการเปิด (
) ส่วนซึ่งมีแท็กที่สร้างแถวและเซลล์ของตาราง สามารถวางพารามิเตอร์เพิ่มเติม (แอตทริบิวต์) ลงในแท็กเปิดได้ ซึ่งรายการสำหรับแท็กเฉพาะแต่ละรายการจะถูกกำหนดโดยมาตรฐานสากล สำหรับแท็กตาราง มาตรฐานเหล่านี้อนุญาตให้ใช้แอตทริบิวต์ width ซึ่งระบุความกว้างของตารางเป็นพิกเซล โค้ด HTML ของตารางอย่างง่ายที่มีแท็กกำหนดความกว้าง 500 พิกเซลสามารถมีลักษณะดังนี้:
| เซลล์ที่ 1 | เซลล์ที่ 2 |
ขั้นตอนที่ 2
เพิ่มอักขระ % ให้กับค่าของแอตทริบิวต์ width หากคุณต้องการระบุความกว้างของตารางเป็นเปอร์เซ็นต์แทนที่จะเป็นพิกเซล:
| เซลล์ที่ 1 | เซลล์ที่ 2 |
โปรดทราบว่าเปอร์เซ็นต์เหล่านี้ไม่จำเป็นต้องขึ้นอยู่กับความกว้างของหน้าต่างเบราว์เซอร์ โครงสร้างของเอกสารมีความสำคัญที่นี่ เช่นเดียวกับตุ๊กตาที่ทำรังที่ซ้อนกันไม่สามารถกว้างกว่าที่มันถูกซ้อนอยู่ ดังนั้น 100% ของความกว้างของตารางจะต้องไม่เกินความกว้างขององค์ประกอบหลัก ตัวอย่างเช่น หากตารางอยู่ภายในบล็อก div ความกว้างของบล็อกนี้จะถูกนำมาเป็น 100%
ขั้นตอนที่ 3
ใช้คำแนะนำภาษาของคำอธิบายลักษณะหากคุณต้องการตั้งค่าความกว้างเท่ากันสำหรับตารางในหน้าเว็บในที่เดียวในซอร์สโค้ด เมื่อต้องการทำเช่นนี้ อันดับแรกในส่วนหัวของโค้ด HTML (ระหว่างและ) แท็กเปิดและปิดที่จำกัดคำสั่งภาษา CSS:
/ * คำแนะนำ CSS จะอยู่ที่นี่ * /
จากนั้นใส่ CSS ต่อไปนี้ระหว่างแท็กเหล่านั้น: ตาราง {ความกว้าง: 100px;} ในที่นี้ ตารางระบุว่าคำอธิบายที่วางอยู่ภายในวงเล็บปีกกาควรใช้กับแท็กตารางทั้งหมดที่ปรากฏในโค้ดของเพจ พารามิเตอร์ width เป็นตัวกำหนดความกว้าง คุณสามารถใช้ความกว้างสัมพัทธ์เป็นเปอร์เซ็นต์ได้เช่นกัน
ขั้นตอนที่ 4
ระบุชื่อคลาสในโค้ด CSS และในแท็กตาราง HTML หากคุณต้องการระบุความกว้าง ไม่ใช่สำหรับตารางทั้งหมด แต่สำหรับหนึ่งหรือหลายตารางเท่านั้น ตัวอย่างเช่น สมมติว่าคลาสที่ทำเครื่องหมายกลุ่มของตารางแคบๆ นั้นเล็ก จากนั้นคำอธิบายของสไตล์อาจมีลักษณะดังนี้: table.tiny {width: 100px;} และแท็กที่เกี่ยวข้องของตารางใดตารางหนึ่งในโค้ด HTML จะเป็นดังนี้:
| เซลล์ที่ 1 | เซลล์ที่ 2 |