การจัดรูปแบบรายการและตารางเป็นส่วนสำคัญในการแสดงข้อมูลบนเว็บไซต์ของคุณ CSS ให้คุณสมบัติและคลาสเพื่อสร้างและปรับแต่งรายการและตารางตามที่คุณต้องการ นี่คือคำแนะนำโดยละเอียดเกี่ยวกับวิธีจัดรูปแบบรายการและตารางใน CSS
การจัดรูปแบบรายการ
รายการที่ไม่เรียงลำดับ(ul)
คุณสมบัติหลัก: list-style-type
ค่า: none, disc, circle, square
.
ตัวอย่าง:
รายการสั่งซื้อ(เก่า)
คุณสมบัติหลัก: list-style-type
ค่า: ไม่มี(ค่าเริ่มต้น), ทศนิยม, อัลฟาล่าง, อัลฟาบน, โรมันล่าง, โรมันบน
ตัวอย่าง:
รายการคำจำกัดความ(dl)
คุณสมบัติหลัก: ไม่มีคุณสมบัติ CSS เฉพาะในการจัดรูปแบบรายการคำจำกัดความ อย่างไรก็ตาม คุณสามารถจัดรูปแบบองค์ประกอบภายในรายการได้โดยใช้คลาสหรือคุณสมบัติอื่นๆ เช่น font-size, font-weight, margin, padding, etc.
ตัวอย่าง:
การจัดรูปแบบตาราง
การจัดรูปแบบโครงสร้างตาราง
คุณสมบัติหลัก: border-collapse
.
ค่า: separate(default), collaps
e.
ตัวอย่าง:
การจัดรูปแบบเส้นขอบตาราง
คุณสมบัติหลัก: border
.
ค่า: ค่าเส้นขอบ ตัวอย่างเช่น: 1px solid black
.
ตัวอย่าง:
การจัดรูปแบบเส้นขอบเซลล์
คุณสมบัติหลัก: border
.
ค่า: ค่าเส้นขอบ ตัวอย่างเช่น: 1px solid black
.
ตัวอย่าง:
การจัดตำแหน่งและระยะห่างของเซลล์ตาราง
คุณสมบัติหลัก: text-align, padding
.
- text-align: ค่าการจัดตำแหน่ง เช่น
left, right, center
. - การเติม: ค่าระยะห่างภายในเซลล์ เช่น 10px
ตัวอย่าง:
พื้นหลังและสีข้อความในตาราง
คุณสมบัติหลัก: background-color, color
background-color
: ค่าสีพื้นหลัง เช่นlightgray
.color
: ค่าสีข้อความ เช่นwhite
.
ตัวอย่าง:
ขนาดคอลัมน์และแถวในตาราง
คุณสมบัติหลัก: width
, height
.
width
: ค่าความกว้าง เช่น "100px", "20%"height
: ค่าความสูง เช่น "50px", "10%"
ตัวอย่าง:
นี่คือคำแนะนำที่ครอบคลุมเกี่ยวกับวิธีจัดรูปแบบรายการและตารางใน CSS คุณสามารถปรับแต่งค่าและคุณสมบัติเพื่อสร้างรายการและสไตล์ตารางที่เหมาะกับความต้องการในการออกแบบของคุณบนเว็บไซต์ของคุณ