ตาราง ตอนที่ 2

การใช้ Cellpadding และ Cellspacing


Cellpadding เป็นแอตทริบิวต์ที่ใช้สำหรับกำหนดพื้นที่การแสดงข้อมูลภายในตาราง หากมีค่ามากก็จะมีพื้นที่การแสดงผลเป็นที่ว่างมากขึ้น โดยปกติค่าของ Cellpadding จะมีค่าเป็น 0 (มีหน่วยเป็น Pixel)ซึ่งจะมีพื้นที่เท่ากับข้อมูลที่มีอยู่
Cellspacing เป็นแอตทริบิวต์ที่ใช้สำหรับกำหนดขนาดเส้นตาราง หากมีค่ามากขึ้นเส้นตารางก็ จะมีขนาดมากตามไปด้วย โดยปกติค่าของ Cellspacing จะมีค่าเป็น 0 (มีหน่วยเป็น Pixel) ดังตัวอย่าง

ตัวอย่าง 1

Source
<table cellspacing=10 border=1>
<tr>
<td>1</td><td>2</td><td>3</td></tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
<br>

<table cellpadding=10 border=1>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td> </tr>
</table>
View
123
456

123
456


จะเห็นว่า Cellspacing ทำให้กรอบมีขนาดใหญ่ขึ้น แต่ไม่ใช่ทำให้เส้นกรอบหนาขึ้น กรุณาอย่าสับสนการใช้คำสั่ง <Border> จากตัวอย่างเส้นกรอบมีขนาดใหญ่เท่ากัน 10 พิกเชล จากข้อมูล
และจากตัวอย่าง การใช้คำสั่ง Cellpadding ทำให้พื้นที่ระหว่างข้อมูลกับเส้นกรอบมีระยะห่างกัน 10 พิกเชล

123
456

นี่ก็เป็นอีกตัวอย่างหนึ่ง ในการใช้ Cellpadding,Celspacing และ Border ร่วมกัน ทำให้เกิดความสวยงามขึ้น


การทำส่วนหัวของตาราง (TH)


โดยทั่วๆไปการทำตารางมักจะมีส่วนหัวของตารางเช่น วันเดือน/ปี/เกิด ชื่อ นามสกุล เป็นต้น การทำหัวตารางนั้น ก็เพื่อบอกถึงรายละเอียดว่า ส่วนนี้เกี่ยวข้องกับอะไร เมื่อไร ...
<TH>...</TH>เกิดขึ้นเพื่อกำหนดส่วนหัวของตาราง ข้อความที่อยู่ในแทกนี้จะอยู่กึ่งกลาง และเป็นตัวหนา ดังตัวอย่าง ที่ 2

ตัวอย่าง 2

Source
<table border=1>
<tr><th>Name</th><th>Surname</th></tr>
<tr> <td>Mr.Patrick </td> <td>B</td></tr>
</table>
View
NameSurname
Mr.PatrickB


NOTE & TIP !!
คำสั่ง <TH>..<TH> มีค่าเท่ากับ <td align=center><b>หัวตาราง</b></td>