การควบคุมตำแหน่งคำอธิบายตารางด้วย CSS

คุณสมบัติ caption-side ใน CSS ใช้สำหรับจัดตำแนวแนวตั้งของกล่องคำอธิบายตาราง สามารถรับค่า top และ bottom โดยค่าเริ่มต้นคำอธิบายตารางจะถูกวางไว้ที่ด้านบน

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ CSS caption-side ดังนี้:

Selector {    caption-side: /*value*/ }

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS caption-side:

<!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>ตารางสาธิต</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>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้: