BlogGang.com : : yaovarit : การสร้างตารางและการประยุกต์ใช้

การสร้างตารางและการประยุกต์ใช้

การสร้างตาราง

เราสามารถสร้างตารางได้โดยใช้แท็ก <table> เป็นจุดเริ่มต้นของตาราง และใช้แท็กปิด </table> เป็นจุดสิ้นสุดของตาราง

การกำหนดจำนวนแถว

กำหนดโดยใช้แท็ก <tr> ... </tr> ถ้าต้องการสร้างกี่แถวก็สร้าง <tr> ให้เท่ากับจำนวนแถว

การกำหนดจำนวนคอลัมน์

กำหนดโดยใช้แท็ก <td>...</td> ถ้าต้องการกี่คอลัมน์ก็สร้าง <td> ให้เท่ากับจำนวนคอลัมน์

ตัวอย่างการสร้างตารางที่มี 3 แถว 2 คอลัมน์

<table >

<tr>

<td>คอลัมน์ 1 แถว 1</td>

<td>คอลัมน์ 2 แถว 1</td>

</tr>

<tr>

<td>คอลัมน์ 1 แถว 2</td>

<td>คอลัมน์ 2 แถว 2</td>

</tr>

<tr>

<td>คอลัมน์ 1 แถว 3</td>

<td>คอลัมน์ 2 แถว 3</td>

</tr>

</table>

จากการสร้างตารางที่ผ่านมาเราไม่ได้กำหนดค่าแอตทริบิวต์ให้แก่ตาราง ดังนั้นตารางที่ได้จะไม่มีเส้นของ ไม่มีพื้นหลัง ค่าต่างๆจะเป็นค่าพื้นฐาน

การกำหนดรูปแบบของตาราง

สามารถกำหนดโดยการเพิ่ม style เข้าไปในแท็ก <table>และกำหนดค่าแอตทริบิวต์ต่างๆ

แอตทริบิวต์ต่างๆจะอยู่ภายในเครื่องหมาย " " และมี ; คั่นระหว่างแอตทริบิวต์ต่างๆ เช่น

style="width: 100%; float: none; text-align: left; vertical-align: baseline; border-style: outset; background-image: none; border-width: 1px; height: 100%; border-collapse: collapse;border: 2px solid #DEB9ff;"

width ความกว้างของตาราง เป็น % หรือ พิกเซล

float อันนี้ไม่รู้กำหนดอะไร ค่าที่เป็นไปได้คือ

none

left

right

text-align การจัดวางตัวอักษรในแนวนอน ค่าที่เป็นไปได้คือ

left

center

right

justify

vertical-align การจัดวางตัวอักษรในแนวตั้ง ค่าที่เป็นไปได้คือ

baseline

top

middle

bottom

border-style รูปแบบของเส้นขอบ ค่าที่เป็นไปได้คือ

none

solid

dotted

dashed

double

groove

ridge

inset

outset

background-image รูปพื้นหลัง

border-width ความกว้างของเส้นขอบ เป็นพิกเซล

height ความสูงของตาราง เป็น % หรือ พิกเซล

border-collapse อันนี้ไม่รู้กำหนดอะไร ค่าที่เป็นไปได้คือ

none

ollapse

border มีการกำหนดค่า3 อย่างคือ ขนาดเส้น รูปแบบเส้น สีเส้น

border: 2px solid #DEB9ff;

การกำหนดให้มีการขีดเส้นของตาราง

ทำได้โดย เพิ่มแอตทริบิวต์ต่างๆ ดังนี้ เข้าไปในแท็ก <table>

border="1" cellspacing="1" cellpadding="1" frame="hsides" rules="rows"

border คือ ขนาดของเส้นขอบ

cellspacing คือ ระยะห่างระหว่างขอบด้านซ้ายกับข้อความในตาราง

cellpadding คือระยะห่างระหว่างขอบด้านบนกับข้อความในตาราง

frame การกำหนดให้มีการขีดเส้นขอบของตาราง

void เป็นค่าปกติ ไม่มีการขีดเส้นขอบ

above เส้นขอบมีเฉพาะด้านบน

below เส้นขอบมีเฉพาะด้านล่าง

hsides มีเส้นขอบเฉพาะแนวนอน

vsides มีเส้นขอบเฉพาะแนวตั้ง

lhs มีเส้นขอบเฉพาะด้านซ้าย

rhs มีเส้นขอบเฉพาะด้านขวา

border มีเส้นขอบทั้งสี่ด้าน

rules การกำหนดให้มีการขีดเส้นของช่องตาราง

none ไม่ให้มีเส้นตาราง

rows ให้มีเฉพาะเส้นแนวนอน

cols ให้มีเฉพาะเส้นแนวตั้ง

all ให้มีทั้งเส้นแนวตั้งและแนวนอน

ถ้าต้องการกำหนดตำแหน่งแสดงผลของตารางก็เพิ่ม align = "ตำแหน่งที่ต้องการแสดงผล" เข้าไปในแท็ก <table> ครับ

การประยุกต์ใช้ตารางในการทำกรอบข้อความ

การทำกรอบโดยใช้แท็ก <table> จะเป็นการสร้างตารางที่มีคอลัมน์ 1 คอลัมน์ แถว 1 แถว เช่น

<table style="border: 1px solid #DFA1A4;"cellpadding="0" cellspacing="0"><tr><td>ข้อความ</td></tr></table>

จากตัวอย่างเป็นรูปแบบพื้นฐานที่ควรทดลองทำก่อนเพื่อความเข้าใจ

ค่าต่างๆที่กำหนดจะมี

1. style="border: 1px solid #DFA1A4;" กำหนดรูปแบบของเส้นตารางโดยกำหนด ขนาดเส้นขอบ ลักษณะเส้นขอบ สีเส้นขอบ

2. cellpadding="0" กำหนดระยะห่างจากขอบบน ถ้ามีค่าเป็นศูนย์เนื้อหาหรือตารางที่จะทำซ้อนจะติดกัน

3. cellspacing="0" กำหนดระยะห่างจากขอบ

การสร้างตารางซ้อนกัน

ทำโดยแทรกแท็ก table เข้าไปในตารางแรกในส่วนของ td

<table style="border: 3px dashed #FF22AC;"cellpadding="0" cellspacing="0"><tr><td><table style="border: 1px solid #DFA1A4;"cellpadding="0" cellspacing="0"><tr><td>ข้อความ</td></tr></table></td></tr></table>

ถ้าต้องการสร้างตารางซ้อนกันหลายๆชั้นก็ทำแบบเดียวกันแต่ระวังสับสนนะครับค่อยๆเพิ่มทีละชั้นดู