การสร้างตาราง หากต้องการนำเสนอข้อมูลที่มีปริมาณมากๆ หรือข้อมูลที่ต้องมีการเปรียบเทียบกันการนำเสนอข้อมูลในรูปแบบของตารางจะช่วยทำให้ข้อมูลประเภทนี้ดูง่ายยิ่งขึ้นและเป็นระเบียบเรียบร้อยอ่านได้ง่ายกว่าปกติ การสร้างตารางในเอกสาร HTML มีอยู่หลายรูปแบบแล้วแต่ผู้เขียนโปรแกรมจะกำหนดโดยใช้คำสั่งต่าง ๆ ดังต่อไปนี้
รูปแบบคำสั่ง <TABLE>...........</TABLE>
คำสั่งย่อยคือ
<CAPTION> คือชื่อตาราง
<TR> ระบุสิ่งที่อยู่ภายในแถวเดียวกัน
<TD> ระบุสิ่งที่อยู่ภายในเซลล์เดียวกัน หรือ คอลัมน์
BORDER คือ การกำหนดเส้นขอบตาราง ใส่ใน Tag <table>
รูปแบบคำสั่งคือ border="x" โดย x คือ ตัวเลข
ALIGN คือ กำหนดตำแหน่ง สามารถใช้รวมกับ Tag ต่างๆได้
รูปแบบคำสั่งคือ align="left หรือ right หรือ center"
BORDER คือ การกำหนดเส้นขอบตาราง ใส่ใน Tag <table>
รูปแบบคำสั่งคือ border="x" โดย x คือ ตัวเลข
ALIGN คือ กำหนดตำแหน่ง สามารถใช้รวมกับ Tag ต่างๆได้
รูปแบบคำสั่งคือ align="left หรือ right หรือ center"
<TABLE border=2>
<CAPTION> ชื่อตาราง </CAPTION>
<TR>
<TH> .....ข้อมูลส่วนหัว..... </TH>
</TR>
<TR>
<TD> .....ข้อมูล..... </TD>
</TR>
<TR>
<TD>..... ข้อมูล..... </TD>
</TR>
</TABLE>
ตัวอย่าง
<html>
<head><title>การสร้างตาราง</title></head>
<body>
<table border=2>
<caption>ตาราง</caption>
<tr>
<th>รายละเอียดของตาราง</th>
</tr>
<tr>
<td align="right">คอลัมน์\แถว</td>
<td align="center">แถว</td>
<td align="center">แถว</td>
</tr>
<tr>
<td align="left">คอลัมน์</td>
<td>.............</td>
<td>.............</td>
</tr>
</table>
</body>
</html>
ผลที่ได้
--------------------------------------------------------------------------------------
การปรับขนาดของตาราง
โดยใช้ WIDTH = X คือ ความกว้างของเซลล์
HEIGHT = X คือ ความสูงของเซลล์
ตัวอย่าง
<html>
<head><title>การสร้างตาราง</title></head>
<body>
<table border=2 width=300 height=100>
<caption>ตาราง</caption>
<tr>
<th>รายละเอียดของตาราง</th>
</tr>
<tr>
<td align="center" width=1000 height=100>คอลัมน์\แถว</td>
<td align="center" width=400 height=50>แถว</td>
<td align="center">แถว</td>
</tr>
<tr>
<td align="center">คอลัมน์</td>
<td>.............</td>
<td>.............</td>
</tr>
</table>
</body>
</html>
ผลที่ได้
--------------------------------------------------------------------------------------
การรวมเซลล์
โดยใช้ COLSPAN=X คือ การผสานเซลล์ระหว่างคอลัมน์ X เป็นจำนวนคอลัมน์ที่จะผสาน
ROWSPAN=Y คือ การผสานเซลล์ระหว่างแถว Y เป็นจำนวนแถวที่จะผสาน
ตัวอย่าง
<html>
<head><title>การสร้างตาราง</title></head>
<body>
<table border=2 width=300 height=100>
<caption>ตาราง</caption>
<tr>
<th colspan=3>รายละเอียดของตาราง</th>
</tr>
<tr>
<td align="center" width=1000 height=100>คอลัมน์\แถว</td>
<td align="center" width=400 height=50>แถว</td>
<td align="center" rowspan=2>แถว</td>
</tr>
<tr>
<td align="center" colspan=2>คอลัมน์</td>
</tr>
</table>
</body>
</html>
ผลที่ได้
--------------------------------------------------------------------------------------
อ้างอิง
http://sbeebird.blogspot.com/ {10/9/56}
ไม่มีความคิดเห็น:
แสดงความคิดเห็น