Photobucket
Group Blog
 
All blogs
 
โค้ดสร้างตาราง


<TABLE>...</TABLE> แท็กเปิด จะอยู่บนสุด และแท็กปิดจะอยู่ท้ายสุดของตาราง เป็นการบอกว่า นี่คือ 1 ตารางนะจ๊ะ
<TBODY>...</TBODY> ตำแหน่งจะอยู่คร่อมแท็ก <TR>...</TR> เป็นการแบ่งกลุ่มให้กับแถว โดยที่ในกลุ่มนั้นอาจมีมากกว่า 1 แถวก็ได้ ถึงแม้เราไม่ใส่ก็จะถือว่า ข้อมูลที่อยู่ระหว่างแท็ก Table นั้นเป็นส่วนของ Tbody
<TR>...</TR> คือ 1 แถวของตาราง ตำแหน่งที่ใช้ อยู่ระหว่าง <TABLE>...</TABLE> ถ้าต้องการให้ตารางมีกี่แถว เราก็ต้องเพิ่มแท็ก <TR>...</TR> ไปเท่านั้น
<TD>...</TD> คือ 1 ช่องในแถวของตาราง ตำแหน่งที่ใช้ อยู่ระหว่าง <TR>...</TR> ถ้าต้องการให้ใน 1แถว มีกี่ช่อง เราก็ต้องเพิ่มแท็ก <TD>...</TD> ไปเท่านั้น
ตัวอย่างการสร้างตาราง ในที่นี้จะสร้างตาราง 3 แถวโดยให้แต่ละแถวมี 4 ช่อง และใส่คำสั่ง border เพื่อแสดงขอบตาราง





















ช่องที่ 1 แถว 1ช่องที่ 2 แถว 1ช่องที่ 3 แถว 1ช่องที่ 4 แถว 1
ช่องที่ 1 แถว 2ช่องที่ 2 แถว 2ช่องที่ 3 แถว 2ช่องที่ 4 แถว 2
ช่องที่ 1 แถว 3ช่องที่ 2 แถว 3ช่องที่ 3 แถว 3ช่องที่ 4 แถว 3

โค้ดสร้างตาราง
<center> <TABLE border=1>
<TBODY>
<TR>
<TD>ช่องที่ 1 แถว 1</TD>
<TD>ช่องที่ 2 แถว 1</TD>
<TD>ช่องที่ 3 แถว 1</TD>
<TD>ช่องที่ 4 แถว 1</TD>
</TR>
<TR>
<TD>ช่องที่ 1 แถว 2</TD>
<TD>ช่องที่ 2 แถว 2</TD>
<TD>ช่องที่ 3 แถว 2</TD>
<TD>ช่องที่ 4 แถว 2</TD>
</TR>
<TR>
<TD>ช่องที่ 1 แถว 3</TD>
<TD>ช่องที่ 2 แถว 3</TD>
<TD>ช่องที่ 3 แถว 3</TD>
<TD>ช่องที่ 4 แถว 3</TD>
</TR>
</TBODY>
</TABLE>
</center>





Create Date : 21 มีนาคม 2551
Last Update : 21 มีนาคม 2551 14:50:37 น. 1 comments
Counter : 474 Pageviews.

 
แอบมาหาโค้ดตารางค่ะ


โดย: gayko วันที่: 19 กันยายน 2552 เวลา:10:40:24 น.  

ชื่อ :
Comment :
  *ใช้ code html ตกแต่งข้อความได้เฉพาะสมาชิก
 

สร้อยหมาก
Location :
สิงห์บุรี Thailand

[Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed

ผู้ติดตามบล็อก : 2 คน [?]





โค้ดแต่งบล็อก ขั้นพื้นฐาน

ยินดีต้อนรับบล็อกสร้อยหมาก
Mini Blog By Ego Box
เพื่อนที่กำลังเยี่ยมชมบล็อกขณะ

จำนวนผู้เข้าชม
Free Cursors

>

Google

WWW
sunantakeng.bloggang.com

Friends' blogs
[Add สร้อยหมาก's blog to your web]
Links
 

MY VIP Friend

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.