CSS caption-side การกำหนดตำแหน่งของ caption

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

GoB
PHP Super Member
PHP Super Member
Posts: 212
Joined: 12/01/2015 10:14 am

CSS caption-side การกำหนดตำแหน่งของ caption

Post by GoB » 13/03/2015 4:20 pm

CSS caption-side การกำหนดตำแหน่งของ caption

caption เป็นแท็กที่เกี่ยวกับการอธิบาย เช่น ตัวอย่างคำอธิบายตาราง ซึ่งปกติดแล้วแท็ก <caption> นี้ไว้ภายในแท็กของ <table> ซึ่งเราก็จะสามารถกำหนดตำแหน่งการแสดงให้ไปอยู่ตำแหน่งที่ต้องการได้ โดยการใช้คำสั่ง caption-side:ค่าที่ใช้สำหรับคำสั่งนี้ เช่น


caption-side: top; กำหนดให้อยู่บนของตาราง
caption-side: bottom; กำหนดให้อยู่ด้านล่างของตาราง
caption-side: left; กำหนดให้อยู่ด้านซ้ายของตาราง
caption-side: right; กำหนดให้อยู่ด้านขวาของตาราง

ตัวอย่างโค้ดที่เขียน

Code: Select all

<html>
<head>
<style>
caption {
    caption-side: bottom;      //กำหนดให้ คำอธิบาย อยู่ด้านล่างของตาราง
}
</style>
</head>
<body>

<table border="1">
<caption>ตารางที่ 1.1 Company</caption>      //เรียกใช้แท็กของ Caption
<tr>
  <th>บริษัท</th>
  <th>จังหวัด</th>
</tr>
<tr>
  <td>บริษัท ก </td>
  <td>กรุงเทพมหานคร</td>
</tr>
<tr>
  <td>บริษัท ข </td>
  <td>ราชบุรี</td>
</tr>
<tr>
  <td>บริษัท ค </td>
  <td>สมุทปราการ</td>
</tr>
<tr>
  <td>บริษัท ง </td>
  <td>ลพบุรี</td>
</tr>
<tr>
  <td>บริษัท จ </td>
  <td>กรุงเทพมหานคร</td>
</tr>
</table>
</body>
</html>


ผลลัพธ์ที่ได้
2015-03-10_17-43-36.jpg
2015-03-10_17-43-36.jpg (28.56 KiB) Viewed 406 times


บทความที่เกี่ยวข้อง
CSS การใส่สีให้เส้นขอบตาราง
CSS การสร้างตาราง

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests