เราสามารถกำหนดรูปแบบสำหรับตารางโดยใช้ CSS คุณสมบัติต่อไปนี้มักใช้เพื่อจัดรูปแบบ
และองค์ประกอบต่างๆ -- ชายแดน
คุณสมบัติ CSS border ใช้เพื่อกำหนด border-width, border-style และ border-color
- ยุบขอบ
คุณสมบัตินี้ใช้เพื่อระบุว่าองค์ประกอบ
คุณสมบัติด้านคำอธิบายภาพใช้เพื่อจัดตำแหน่งกล่องคำอธิบายตารางในแนวตั้ง
คุณสมบัตินี้ใช้เพื่อระบุการแสดงเซลล์ว่างของตาราง
เพื่อกำหนดอัลกอริทึมที่จะใช้โดยเบราว์เซอร์สำหรับการจัดวางแถว คอลัมน์ และเซลล์ของตาราง
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงการจัดรูปแบบตาราง −
<!DOCTYPE html> <html> <head> <style> table, table * { border: thin solid; padding: 5px; font-style: italic; } caption { caption-side: bottom; } td { box-shadow: inset 0 0 6px green; } </style> </head> <body> <table> <caption>Demo caption</caption> <tr> <td>demo</td> </tr> <tr> <td>demo</td> <td></td> </tr> <tr> <td>demo</td> <td>demo</td> <td></td> </tr> </table> </body> </html>
ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> div { display: flex; float: left; } table { border: 3px solid black; } td { border: 3px solid lightgreen; } th { border: 3px solid lightblue; } #t2 { border-collapse: collapse; } </style> </head> <body> <h2>Team Rankings</h2> <div> <table id="t1"> <tr> <th>Team (Test)</th> <th>Rank </th> </tr> <tr> <td>India </td> <td>1 </td> </tr> <tr> <td>Australia</td> <td>2</td> </tr> </table> </div> <div> <table id="t2"> <tr> <th>Team (ODI) </th> <th>Rank </th> </tr> <tr> <td>India </td> <td>1 </td> </tr> <tr> <td>England</td> <td>2</td> </tr> </table> </div> </body> </html>
ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -