คุณสมบัติ CSS ด้านคำอธิบายใช้เพื่อจัดตำแหน่งกล่องคำอธิบายตารางในแนวตั้ง สามารถใช้ค่าบนและล่างเป็นค่าได้ โดยค่าเริ่มต้น คำอธิบายตารางจะอยู่ที่ด้านบนสุด
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ CSS list-style มีดังนี้−
Selector { caption-side: /*value*/ }
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS ด้านคำอธิบายภาพ
<!DOCTYPE html> <html> <head> <style> table * { border: ridge skyblue; padding: 0.5rem; } table { margin: 20px; box-shadow: 0 0 6px 3px indianred; empty-cells: show; } caption { border-top-style: none; caption-side: bottom; border-color: darkkhaki; border-radius: 50%; } </style> </head> <body> <table id="demo"> <caption>Demo</caption> <tr> <th colspan="3">Table</th> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> table { margin: auto; border: double black 13px; border-radius: 6px; } td, th { border-left: 1px solid black; border-top: 1px solid black; } th { background-color: lightblue; border-top: none; } td:first-child, th:first-child { border-left: none; } caption { margin-top: 3px; background-color: purple; caption-side: bottom; color: white; border-radius: 20%; } </style> </head> <body> <h2>Demo Table</h2> <table> <caption>Demo</caption> <tr> <th colspan="4">Table</th> </tr> <tr> <td>One...</td> <td>Two...</td> <td>Three</td> <td>Four</td> </tr> <tr> <td>Five</td> <td>Six</td> <td>Seven</td> <td>Eight</td> </tr> </table> </body> </html>
ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -