ล่าสุดการพัฒนาเว็บบทเรียน
×

CSS เกี่ยวกับการสอน

CSS บ้าน CSS บทนำ CSS วากยสัมพันธ์ CSS ทำอย่างไร CSS สี CSS ภูมิหลัง CSS พรมแดน CSS อัตรากำไรขั้นต้น CSS การขยายความ CSS สูงกว้าง CSS ข้อความ CSS แบบอักษร CSS การเชื่อมโยง CSS รายการ CSS ตาราง CSS รูปแบบกล่อง ร่าง CSS การแสดงผล CSS CSS ความกว้างสูงสุด CSS ตำแหน่ง CSS ลอย CSS Inline-block CSS เป็นเส้นตรง CSS combinators CSS หลอกชั้น CSS องค์ประกอบหลอก CSS แถบนำทาง CSS เมนูแบบเลื่อนลง CSS คำแนะนำเครื่องมือ CSS แกลเลอรี่ภาพ CSS ภาพทึบ CSS ภาพแบบ Sprite CSS attr Selectors รูปแบบ CSS CSS เคาน์เตอร์

CSS3

CSS3 บทนำ CSS3 มุมโค้งมน CSS3 แสดงสินค้าชายแดน CSS3 ภูมิหลัง CSS3 สี CSS3 การไล่ระดับสี CSS3 เงา CSS3 ข้อความ CSS3 แบบอักษร CSS3 แปลง 2D CSS3 แปลง 3D CSS3 การเปลี่ยน CSS3 ภาพเคลื่อนไหว CSS3 ภาพ CSS3 ปุ่ม CSS3 การให้เลขหน้า CSS3 หลายคอลัมน์ CSS3 หน้าจอผู้ใช้ CSS3 กล่องขนาด CSS3 Flexbox CSS3 สื่อแบบสอบถาม CSS3 ตัวอย่าง MQ

CSS การออกแบบเว็บที่ตอบสนอง

การออกแบบเว็บที่ตอบสนอง แนะนำ การออกแบบเว็บที่ตอบสนอง วิวพอร์ต การออกแบบเว็บที่ตอบสนอง ตารางมุมมอง การออกแบบเว็บที่ตอบสนอง สื่อแบบสอบถาม การออกแบบเว็บที่ตอบสนอง ภาพ การออกแบบเว็บที่ตอบสนอง วิดีโอ การออกแบบเว็บที่ตอบสนอง กรอบ

CSS Examples

CSS ตัวอย่าง CSS ทดสอบ CSS ใบรับรอง

CSS References

CSS การอ้างอิง CSS selectors CSS ฟังก์ชั่น CSS หูอ้างอิง CSS Web Safe แบบอักษร CSS Animatable CSS หน่วย CSS PX-EM แปลง CSS สี CSS ค่าสี CSS ชื่อสี CSS3 สนับสนุนเบราว์เซอร์

 

CSSตาราง

❮ก่อนหน้า ❯บทถัดไป

ลักษณะของตาราง HTML ได้ดีขึ้นมากด้วย CSS:

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

ตารางที่พรมแดน

เพื่อระบุพรมแดนตารางใน CSS ใช้ border คุณสมบัติ

ตัวอย่างด้านล่างระบุขอบสีดำสำหรับ <table> , <th> และ <td> องค์ประกอบ:

ตัวอย่าง

table, th, td {
   border: 1px solid black;
}
ลองตัวเอง»

ขอให้สังเกตว่าตารางในตัวอย่างข้างต้นมีพรมแดนคู่ นี้เป็นเพราะทั้งโต๊ะและ <th> และ <td> องค์ประกอบที่มีพรมแดนแยกต่างหาก

ยุบตารางพรมแดน

border-collapse คุณสมบัติชุดไม่ว่าจะเป็นเส้นขอบโต๊ะควรจะทรุดลงชายแดนเดียว:

ตัวอย่าง

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
ลองตัวเอง»

ถ้าคุณต้องการเฉพาะเส้นขอบรอบ ๆ โต๊ะเพียงระบุ border อสังหาริมทรัพย์สำหรับ <table> :

ตัวอย่าง

table {
    border: 1px solid black;
}
ลองตัวเอง»

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

ความกว้างและความสูงของตารางจะถูกกำหนดโดย width และ height คุณสมบัติ

ตัวอย่างด้านล่างนี้กำหนดความกว้างของตารางถึง 100% และความสูงของ <th> องค์ประกอบ 50px:

ตัวอย่าง

table {
    width: 100%;
}

th {
    height: 50px;
}
ลองตัวเอง»

การจัดตำแหน่งแนวนอน

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

โดยค่าเริ่มต้นเนื้อหาของ <th> องค์ประกอบคือศูนย์ชิดและเนื้อหาของ <td> องค์ประกอบจัดชิดซ้าย

ตัวอย่างต่อไปนี้ซ้ายสอดคล้องข้อความใน <th> องค์ประกอบ:

ตัวอย่าง

th {
    text-align: left;
}
ลองตัวเอง»

แนวตั้ง

vertical-align สถานที่ให้บริการกำหนดแนวตั้ง (เช่นด้านบนด้านล่างหรือกลาง) ของเนื้อหาใน <th> หรือ <td>

โดยค่าเริ่มต้นการจัดตำแหน่งในแนวตั้งของเนื้อหาในตารางเป็นกลาง (ทั้ง <th> และ <td> องค์ประกอบ)

ตัวอย่างต่อไปนี้กำหนดจัดตำแหน่งข้อความในแนวตั้งที่ด้านล่างสำหรับ <td> องค์ประกอบ:

ตัวอย่าง

td {
    height: 50px;
    vertical-align: bottom;
}
ลองตัวเอง»

ระยะห่างจากขอบโต๊ะ

ในการควบคุมช่องว่างระหว่างชายแดนและเนื้อหาในตารางที่ใช้ padding ทรัพย์สินใน <td> และ <th> องค์ประกอบ:

ตัวอย่าง

th, td {
    padding: 15px;
    text-align: left;
}
ลองตัวเอง»

แบ่งแนวนอน

ชื่อจริง นามสกุล เงินออม
จางไป สัตว์ประหลาดมีปีกเป็นนกอินทรี $ 100
ลัวส์ สัตว์ประหลาดมีปีกเป็นนกอินทรี $ 150
โจ สเวนสัน $ 300

เพิ่ม border-bottom คุณสมบัติการ <th> และ <td> สำหรับวงเวียนแนวนอน:

ตัวอย่าง

th, td {
    border-bottom: 1px solid #ddd;
}
ลองตัวเอง»

ตาราง Hoverable

ใช้ :hover เลือกใน <tr> เพื่อเน้นแถวตารางบนเมาส์มากกว่า:

ชื่อจริง นามสกุล เงินออม
จางไป สัตว์ประหลาดมีปีกเป็นนกอินทรี $ 100
ลัวส์ สัตว์ประหลาดมีปีกเป็นนกอินทรี $ 150
โจ สเวนสัน $ 300

ตัวอย่าง

tr:hover {background-color: #f5f5f5}
ลองตัวเอง»

ตารางลาย

ชื่อจริง นามสกุล เงินออม
จางไป สัตว์ประหลาดมีปีกเป็นนกอินทรี $ 100
ลัวส์ สัตว์ประหลาดมีปีกเป็นนกอินทรี $ 150
โจ สเวนสัน $ 300

สำหรับตารางลายม้าลายใช้ nth-child() เลือกและเพิ่ม background-color ทุกแม้ (หรือคี่) แถวตาราง:

ตัวอย่าง

tr:nth-child(even) {background-color: #f2f2f2}
ลองตัวเอง»

สีตาราง

ตัวอย่างด้านล่างระบุสีพื้นหลังและข้อความสีของ <th> องค์ประกอบ:

ชื่อจริง นามสกุล เงินออม
จางไป สัตว์ประหลาดมีปีกเป็นนกอินทรี $ 100
ลัวส์ สัตว์ประหลาดมีปีกเป็นนกอินทรี $ 150
โจ สเวนสัน $ 300

ตัวอย่าง

th {
    background-color: #4CAF50;
    color: white;
}
ลองตัวเอง»

ตารางที่ตอบสนองต่อ

ตารางการตอบสนองจะแสดงแถบเลื่อนแนวนอนถ้าหน้าจอที่มีขนาดเล็กเกินไปที่จะแสดงเนื้อหาทั้งหมด:

ชื่อจริง นามสกุล จุด จุด จุด จุด จุด จุด จุด จุด จุด จุด จุด จุด
จิลล์ ช่างเหล็ก 50 50 50 50 50 50 50 50 50 50 50 50
วันก่อนวันหยุด แจ็คสัน 94 94 94 94 94 94 94 94 94 94 94 94
อาดัม จอห์นสัน 67 67 67 67 67 67 67 67 67 67 67 67

เพิ่มองค์ประกอบภาชนะ (เช่น <div> ) กับ overflow-x:auto รอบ <table> องค์ประกอบที่จะทำให้มันตอบสนอง:

ตัวอย่าง

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
ลองตัวเอง»
ตัวอย่าง

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

ทำให้ตารางแฟนซี
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างตารางแฟนซี

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

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 » ออกกำลังกาย 6 »

คุณสมบัติของตาราง CSS

คุณสมบัติ ลักษณะ
border ทุกชุดคุณสมบัติชายแดนในการประกาศ
border-collapse ระบุหรือไม่ว่าเส้นขอบตารางควรจะทรุดตัวลง
border-spacing ระบุระยะห่างระหว่างพรมแดนของเซลล์ที่อยู่ติดกัน
caption-side ระบุตำแหน่งของคำอธิบายตาราง
empty-cells ระบุหรือไม่ที่จะแสดงเส้นขอบและพื้นหลังในเซลล์ว่างในตาราง
table-layout ขั้นตอนวิธีการตั้งค่ารูปแบบที่จะใช้สำหรับตาราง

❮ก่อนหน้า ❯บทถัดไป