คู่มือการจัดรูปแบบรายการและตารางใน CSS- คุณสมบัติและตัวอย่าง

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

 

การจัดรูปแบบรายการ

รายการที่ไม่เรียงลำดับ(ul)

คุณสมบัติหลัก: list-style-type

ค่า: none, disc, circle, square.

ตัวอย่าง:

ul {  
  list-style-type: disc;  
}  

รายการสั่งซื้อ(เก่า)

คุณสมบัติหลัก: list-style-type

ค่า: ไม่มี(ค่าเริ่มต้น), ทศนิยม, อัลฟาล่าง, อัลฟาบน, โรมันล่าง, โรมันบน

ตัวอย่าง:

ol {  
  list-style-type: decimal;  
}  

รายการคำจำกัดความ(dl)

คุณสมบัติหลัก: ไม่มีคุณสมบัติ CSS เฉพาะในการจัดรูปแบบรายการคำจำกัดความ อย่างไรก็ตาม คุณสามารถจัดรูปแบบองค์ประกอบภายในรายการได้โดยใช้คลาสหรือคุณสมบัติอื่นๆ เช่น font-size, font-weight, margin, padding, etc.

ตัวอย่าง:

<dl>  
  <dt>HTML</dt>  
  <dd>A markup language for creating web pages</dd>  
  <dt>CSS</dt>  
  <dd>A styling language for web pages</dd>  
</dl>  

dt {  
  font-weight: bold;  
}  

 

การจัดรูปแบบตาราง

การจัดรูปแบบโครงสร้างตาราง

คุณสมบัติหลัก: border-collapse.

ค่า: separate(default), collaps e.

ตัวอย่าง:

table {  
  border-collapse: collapse;  
}  

การจัดรูปแบบเส้นขอบตาราง

คุณสมบัติหลัก: border.

ค่า: ค่าเส้นขอบ ตัวอย่างเช่น: 1px solid black.

ตัวอย่าง:

table {  
  border: 1px solid black;  
}  

การจัดรูปแบบเส้นขอบเซลล์

คุณสมบัติหลัก: border.

ค่า: ค่าเส้นขอบ ตัวอย่างเช่น: 1px solid black.

ตัวอย่าง:

td, th {  
  border: 1px solid black;  
}  

การจัดตำแหน่งและระยะห่างของเซลล์ตาราง

คุณสมบัติหลัก: text-align, padding.

• text-align: ค่าการจัดตำแหน่ง เช่น left, right, center.
• การเติม: ค่าระยะห่างภายในเซลล์ เช่น 10px

ตัวอย่าง:

th {  
  text-align: center;  
  padding: 10px;  
}  

พื้นหลังและสีข้อความในตาราง

คุณสมบัติหลัก: background-color, color

• background-color: ค่าสีพื้นหลัง เช่น lightgray.
• color: ค่าสีข้อความ เช่น white.

ตัวอย่าง:

table {  
  background-color: lightgray;  
  color: white;  
}  

ขนาดคอลัมน์และแถวในตาราง

คุณสมบัติหลัก: width, height.

• width: ค่าความกว้าง เช่น "100px", "20%"
• height: ค่าความสูง เช่น "50px", "10%"

ตัวอย่าง:

th {  
  width: 100px;  
  height: 50px;  
}  

 

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