home

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

การจัดรูปแบบตารางการทำงานกับ CSS

เราสามารถกำหนดรูปแบบสำหรับตารางโดยใช้ CSS คุณสมบัติต่อไปนี้ใช้เพื่อจัดรูปแบบ

และองค์ประกอบต่างๆ -

  • ชายแดน

    คุณสมบัติ CSS border ใช้เพื่อกำหนด border-width, border-style และ border-color

  • ยุบขอบ

    คุณสมบัตินี้ใช้เพื่อระบุว่าองค์ประกอบ

ควรมีขอบที่ใช้ร่วมกันหรือแยกจากกัน

  • คำบรรยายภาพ

    คุณสมบัติด้านคำอธิบายภาพใช้เพื่อจัดตำแหน่งกล่องคำอธิบายตารางในแนวตั้ง

  • เซลล์ว่าง

    คุณสมบัตินี้ใช้เพื่อระบุการแสดงเซลล์ว่างของตาราง

  • เค้าโครงตาราง เพื่อกำหนดอัลกอริทึมที่จะใช้โดยเบราว์เซอร์สำหรับการจัดวางแถว คอลัมน์ และเซลล์ของตาราง


    • ตัวอย่าง

    ตัวอย่างต่อไปนี้แสดงการจัดรูปแบบตาราง −

    <!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: 'Bookman Old Style', serif;
}
th {
   letter-spacing: 1.9px;
}
#one {
   border-right: thick solid blue;
}
td {
   text-align: center;
}
</style>
</head>
<body>
<h2>Employee List</h2>
<div>
<table>
<tr>
<th id="one">Employee</th>
<th>Department</th>
</tr>
<tr>
<td>John </td>
<td>Marketing</td>
</tr>
<tr>
<td>Brad</td>
<td>Finance</td>
</tr>
<tr>
<td>Tim </td>
<td>IT</td>
</tr>
<tr>
<td>Steve</td>
<td>Operations</td>
</tr>
</table>
</div>
</body>
</html>

    ผลลัพธ์

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

    การจัดรูปแบบตารางการทำงานกับ CSS

    ตัวอย่าง

    <!DOCTYPE html>
<html>
<head>
<style>
table {
   float: left;
   empty-cells: hide;
   box-shadow: inset 0 0 4px orange;
}
tr {
   box-shadow: inset 0 0 10px greenyellow;
}
td {
   font-style: italic;
   box-shadow: inset 0 0 8px red;
}
table,td {
   margin: 6px;
   padding: 6px;
   border: 1px solid black;
}
table
</style>
</head>
<body>
<table>
<caption>Demo Table</caption>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>demo</td>
</tr>
<tr>
<td></td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>

    ผลลัพธ์

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

    การจัดรูปแบบตารางการทำงานกับ CSS