1. Home
  2. ตาราง CSS (ตาราง)

บทช่วยสอน ตาราง CSS (ตาราง) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ เส้นขอบตาราง,ตัวอย่าง,กรอบพับ,ตัวอย่าง,ความกว้างของตารางและความสูง,ตัวอย่าง,การจัดตำแหน่งข้อความในแบบฟอร์ม,ตัวอย่าง,ตัวอย่าง,กรอกแบบฟอร์ม,ตัวอย่าง,ตารางสี,ตัวอย่าง,ตัวอย่างเพิ่มเติม,

ตาราง CSS (ตาราง)

ใช้ CSS สามารถปรับปรุงลักษณะของตารางแบบ HTML

บริษัท ติดต่อ ประเทศ
Alfreds Futterkiste มาเรียเดส ประเทศเยอรมัน
Berglunds snabbkop คริสติเกอร์สเตน สวีเดน
Centro Comercial ม็อกเตซู ฟรานซิสช้าง เม็กซิโก
เอินส์ทฮัน Roland เมนเดล ออสเตรีย
เทรดดิ้งเกาะ เฮเลนเบนเน็ตต์ สหราชอาณาจักร
Koniglich เอสเซน ฟิลิป Cramer ประเทศเยอรมัน
หัวเราะแบคคัส Winecellars โยชิ Tannamuri แคนาดา
Magazzini Alimentari Riuniti จิโอวานนี่ Rovelli อิตาลี
เหนือ / ใต้ ไซมอนโครว์ สหราชอาณาจักร
specialites ปารีส มารีเบอร์ทรานด์ ฝรั่งเศส
ชีสบิ๊ก ลิซนิกสัน ประเทศสหรัฐอเมริกา
Vaffeljernet Palle หงุดหงิด เดนมาร์ก

เส้นขอบตาราง

ระบุชายแดนตาราง CSS, ใช้ทรัพย์สินชายแดน

ตัวอย่างต่อไปนี้ระบุตาราง Th และองค์ประกอบ TD ขอบสีดำ A:

ตัวอย่าง

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

ลอง»

โปรดสังเกตว่าในตัวอย่างข้างต้นตารางมีขอบคู่ เพราะนี่คือตารางและ TH / การองค์ประกอบ td มีพรมแดนแยกต่างหาก

เพื่อที่จะแสดงกรอบเดียวของตารางให้ใช้คุณสมบัติชายแดนล่มสลาย

กรอบพับ

แอตทริบิวต์ชายแดนยุบกำหนดว่าพรมแดนตารางที่มีการทรุดตัวลงไปในขอบเดียวหรือแยกออกจากกัน:

ตัวอย่าง

ตาราง
{
ชายแดนยุบ: การล่มสลาย;
}
ตาราง TH, TD
{
ชายแดน: 1px ของแข็งสีดำ
}

ลอง»

ความกว้างของตารางและความสูง

ความกว้างและความสูงแอตทริบิวต์กำหนดความกว้างและความสูงของตาราง

ตัวอย่างต่อไปนี้ถูกตั้งไว้ที่ 100% ความกว้างของตารางความสูง 50 พิกเซล TH องค์ประกอบ:

ตัวอย่าง

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

ลอง»

การจัดตำแหน่งข้อความในแบบฟอร์ม

การจัดตำแหน่งข้อความตารางและคุณสมบัติแนวตั้ง

คุณสมบัติ text-align มีการตั้งค่าการจัดตำแหน่งในแนวนอนเช่นซ้ายขวาหรือศูนย์:

ตัวอย่าง

td
{
text-align:right;
}

ลอง»

การตั้งค่าคุณสมบัติแนวตั้งแนวตั้ง-align เช่นด้านบนด้านล่างหรือกลาง:

ตัวอย่าง

td
{
height:50px;
vertical-align:bottom;
}

ลอง»

กรอกแบบฟอร์ม

หากช่องว่างระหว่างการควบคุมชายแดนในตารางของเนื้อหาที่คุณควรใช้ TD เติมแอตทริบิวต์และองค์ประกอบ Th:

ตัวอย่าง

td
{
padding:15px;
}

ลอง»

ตารางสี

ตัวอย่างต่อไปนี้ระบุสีของเส้นขอบและองค์ประกอบ TH สีตัวอักษรและพื้นหลัง:

ตัวอย่าง

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

ลอง»

ตัวอย่าง

ตัวอย่างเพิ่มเติม

ทำให้รูปแบบส่วนบุคคล
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างรูปแบบส่วนบุคคล

ตั้งตำแหน่งคำอธิบายภาพตาราง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการวางตำแหน่งส่วนหัวของตาราง

บทแนะนำยอดนิยม

Contact US

ตาราง CSS (ตาราง)
10/30