home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

คุณสมบัติ CSS ที่จำเป็นสำหรับการจัดแต่งตาราง

เราสามารถกำหนดรูปแบบสำหรับตารางโดยใช้ 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>

    ผลลัพธ์

    สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -

    คุณสมบัติ CSS ที่จำเป็นสำหรับการจัดแต่งตาราง

    ตัวอย่าง

    <!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>

    ผลลัพธ์

    สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -

    คุณสมบัติ CSS ที่จำเป็นสำหรับการจัดแต่งตาราง