วิธีที่ 1: การใช้แอตทริบิวต์ “ความกว้าง” ของ HTML
“ ความกว้าง ” เป็นแอตทริบิวต์พื้นฐานที่จัดทำโดย HTML กำหนดความกว้างหรือความยาวแนวนอนขององค์ประกอบ HTML ในการแก้ไขข้อมูลตาราง จะใช้แอตทริบิวต์ width ในขั้นตอนด้านล่าง
ขั้นตอนที่ 1: สร้างตาราง ขั้นตอนที่ 2: เพิ่มคุณสมบัติ CSS ในองค์ประกอบ 'ตาราง' ขั้นตอนที่ 3: การกำหนดคุณสมบัติให้กับองค์ประกอบ “td” ขั้นตอนที่ 4: การกำหนดคุณสมบัติให้กับองค์ประกอบ “th” ผลลัพธ์จะแสดงเป็น: ภาพรวมด้านบนแสดงให้เห็นว่าความกว้างของคอลัมน์ทั้งหมดถูกกำหนดไว้ที่ 30% ต่อคอลัมน์ คุณสมบัติ nth-child() ของ CSS ใช้เพื่อสร้างตารางที่มีความกว้างคงที่ คุณสมบัตินี้รับหมายเลขคอลัมน์และเลือก ' ผลลัพธ์ของบล็อกโค้ดด้านบนคือ: เอาต์พุตนี้แสดงว่าคอลัมน์หมายเลข 1 และ 3 ถูกกำหนดไว้ที่ความกว้าง 10% ข้างใน ' โต๊ะ ” ในส่วนของ CSS ให้เพิ่ม “ เค้าโครงตาราง: คงที่ ” คุณสมบัติเพื่อตั้งค่า “ความกว้าง” ขององค์ประกอบตารางข้อมูล: ในไฟล์ HTML ให้เพิ่ม “ หลังจากรันโค้ดด้านบน ผลลัพธ์ที่ได้คือ: นั่นคือวิธีที่ผู้ใช้สามารถกำหนดความกว้างขององค์ประกอบข้อมูลตาราง ในการกำหนดความกว้างของข้อมูลตาราง ให้ใช้ปุ่ม “ ความกว้าง ' คุณลักษณะ, ' ลูกคนที่ n ( ) ” ตัวคั่น และ “
ในไฟล์ HTML ให้ใช้ ' <ศูนย์> แท็ก ” เพื่อแสดงแต่ละองค์ประกอบที่อยู่ภายในตรงกลางของหน้าเว็บ ภายในนั้น สร้างตารางโดยใช้ “ <ตาราง> ”,” ' และ ' ” แท็กและเขียนข้อมูลในนั้น:
< ศูนย์ >
< โต๊ะ >
< ท >
< ไทย > ชื่อ < / ไทย >
< ไทย > สถานะ < / ไทย >
< ไทย > เบอร์ห้อง < / ไทย >
< / ท >
< ท >
< td > ฟาคาร์ < / td >
< td > นักเรียน < / td >
< td > 06 < / td >
< / ท >
< ท >
< td > โอมาร์ < / td >
< td > นักเรียน < / td >
< td > 06 < / td >
< / ท >
< / โต๊ะ >
< / ศูนย์ >
ใช้ตัวเลือกองค์ประกอบตารางใน CSS และเพิ่ม “ ชายแดน ” ของ 1px สีแดงทึบ “ จัดข้อความ ” จัดข้อความให้อยู่กึ่งกลาง และ “ ความกว้าง ” ที่กำหนดความกว้างโดยรวมของตารางเป็น 80%:
โต๊ะ {
ชายแดน : 1px สีแดงทึบ;
ข้อความ- จัด : ศูนย์;
ความกว้าง : 80 %; }
ใช้ ' td ” ตัวเลือกองค์ประกอบและตั้งค่า “ เส้นขอบด้านล่าง ” ของ 5px สีแดงทึบ “ การขยายความ ” ขนาด 20px เพื่อทำให้รายการเด่นขึ้น และ “ ความกว้าง ” กำหนดเป็น 30%:
td {
ขอบล่าง: 5px สีแดงทึบ;
ช่องว่างภายใน: 20px;
ความกว้าง : 30 %;
}
ใช้ ' ไทย ” ตัวเลือกองค์ประกอบเพื่อเปลี่ยนสีของ “ เส้นขอบด้านล่าง ” จากสีแดงเป็นสีเขียวน้ำทะเลเพื่อสร้างการแสดงภาพที่ดีขึ้น:
ไทย {
ขอบล่าง: 5px สีเขียวน้ำทะเล;
ช่องว่างภายใน: 20px;
ความกว้าง : 30 %;
}
วิธีที่ 2: การใช้ตัวเลือก “nth-child( )”
' และ ' แท็ก ตัวอย่างเช่น ความกว้างคือ “ ที่ตายตัว ” สำหรับหมายเลขคอลัมน์เท่านั้น “ 1 ' และ ' 3 '. แต่ละคอลัมน์เหล่านี้มีความกว้าง 10% บทความนี้ได้สาธิตวิธีแก้ไขความกว้างของตารางข้อมูลเรียบร้อยแล้ว td:ลูกคนที่ n ( 3 ) {
ความกว้าง : 10 %;
}
th:nth-ลูก ( 1 ) {
ความกว้าง : 10 %;
}
วิธีที่ 3: การใช้แท็ก
เค้าโครงตาราง: คงที่;
ความกว้าง : 80 %;
ชายแดน : 1px สีแดงทึบ;
ข้อความ- จัด : ศูนย์;
}
< พ.อ สไตล์ = 'ความกว้าง: 15%;' / >
< พ.อ สไตล์ = 'ความกว้าง: 30%;' / >
บทสรุป