��ù��ʹ͢����Ŵ��µ��ҧ��ҧ������Ҩ��繵�ͧ��á�ü�ҹ����ͧ���ҧ��Ҵ��¡ѹ�����͡Ẻ���ҧ���٧��������� 㹡�ù��ʹ͢����Ŵ��µ��ҧ ���Ǣ�����繡�ü�ҹ�������������͡�����������ǹ �ͷ��Ժ�ǵ� colspan
Attribute
�����ͷ��Ժ�Ƿ�colspan���˹�����������Դ <td>...</td>�ٻẺ�������<td colspan="value">... </td>value�ӹǹ����Ţ�ͧ���� �� 1, 2, 3
������ҧ�����ҹ
<body>
<table border="1" width="400">
<caption> ��ҹ����� 1 ��� 2 ��Ƿ�� 1</caption>
<tr> <td colspan="2"> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> <td> </td> </tr>
</table>
����ʴ���
�ҡ������ҧ������������Ƿ�� 1 ���ըӹǹ������§ 2 ���� ���ͧ�ҡ ��������� colspan ������������� 1 ��� 2 ��Ҵ��¡ѹ ����ѧࡵبҡ������ ���á��Ҩ������ <td> ����§ 2 �����ѹ��
�մ���
��ü�ҹ��
���Ǣ����繡�����������ǵ���������������褹���ǹ���ͧ ��觨е�ͧ���Ƿ������Դ�ѹ��ҹ�� �����ͷ��Ժ�ǵ� rospan
Attribute
�����ͷ��Ժ�Ƿ�rowspan���˹�����������Դ <td>...</td>�ٻẺ�������<td rowspan="value">... </td>value�ӹǹ����Ţ�ͧ���� �� 1, 2, 3
������ҧ�����ҹ
<body >
<table border="1" width="400">
<caption> ��ҹ����� 1 �ͧ�Ƿ�� 2 ��� 3</caption>
<tr> <td> </td> <td> </td> <td> </td> </tr>
<tr> <td rowspan="2"> </td> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> </tr>
</table>
����ʴ���
�ҡ������ҧ������ 1 �ͧ�Ƿ�� 2 ��� 3 ����ѹ��������� �����Ƿ�� 3 ������§ 2 ������ҹ�����ͧ�ҡ������ 1 �������Ѻ������1 �ͧ�Ƿ�� 2
การใช้ตารางเหมาะสำหรับการนำเสนอข้อมูลจำนวนมาก โดยตารางสามารถใช้งานได้หลายแบบตั้งแต่ใช้เป็นตารางธรรมดาเพื่อแสดงค่าตัวเลขทางสถิติหรือตัวเลขที่มีความสัมพันธ์กัน ซึ่งการใช้ตารางนำเสนอข้อมูลแบบนี้ทำให้เห็นการเปรียบเทียบที่ชัดเจน และการประยุกต์ใช้ตารางกับข้อมูลประเภทอื่นๆ เช่น ข้อความ หรือรูปภาพเพื่อช่วยออกแบบโฮมเพจ (เว็บเพจหน้าแรก) ซึ่งตารางสามารถจัดองค์ประกอบต่าง ๆ ได้อย่างเป็นสัดส่วนและอยู่ในตำแหน่งที่ต้องการได้
1. โครงสร้างของตาราง
<table>
<caption>………</caption>
<tr>
<th>………</th>
<th>………</th>
</tr>
<tr>
<td>………</td>
<td>………</td>
</tr>
<tr>
<td>………</td>
<td>………</td>
</tr>
</table>
- <table> กำหนดการสร้างตาราง และมีคำสั่งปิดคือ </table>
- <caption> เป็นการกำหนดคำ หรือข้อความอธิบายตาราง และมีคำสั่งปิดคือ </caption>
- <tr> (Table Row) เป็นการกำหนดแถวของตารางในแนวนอน และมีคำสั่งปิดคือ </tr>
- <th> (Table Head) เป็นการกำหนดหัวเรื่องในคอลัมน์ และมีคำสั่งปิดคือ </th>
- <td> (Table Data) เป็นการกำหนดข้อมูลในตาราง และมีคำสั่งปิดคือ </td>
คุณสมบัติของตาราง <table>
แอตทริบิวต์คุณสมบัติalign= “align-type”กำหนดตำแหน่งตาราง โดยleft=กำหนดตารางให้อยู่ทางซ้าย
center = กำหนดตารางให้อยู่กึ่งกลาง
right=กำหนดตารางให้อยู่ทางขวาbackground=“url”ใส่ภาพกราฟิก เป็นพื้นหลังตาราง โดย url เป็น ตำแหน่งภาพbgcolor=“n”กำหนดสีพื้นหลังให้ตาราง โดย n คือ #รหัสสี หรือชื่อสีborder=“n”กำหนดเส้นขอบตาราง โดย n เป็นค่าความหนาของขอบตารางbordercolor=“n”กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER ซึ่ง n คือ #รหัสสี หรือชื่อสีcellpadding=“n”กำหนดระยะห่างระหว่างตัวหนังสือและเส้นแบ่งตาราง โดย n เป็นค่าระยะห่างcellspacing=“n”กำหนดขนาดความห่างของซ่องเซลล์ โดย n เป็นขนาดของความห่างwidth=“n”กำหนดความกว้างของตาราง เป็นตัวเลขและเป็น %height=“n”กำหนดความสูงของตารางเป็นตัวเลขและเป็น %
คุณสมบัติของแท็ก <tr>
แอตทริบิวต์คุณสมบัติalign= “align-type”กำหนดตำแหน่งตาราง โดยleft=กำหนดตารางให้อยู่ทางซ้าย
center = กำหนดตารางให้อยู่กึ่งกลาง
right=กำหนดตารางให้อยู่ทางขวาbackground=“url”ใส่ภาพกราฟิก เป็นพื้นหลังตาราง โดย url เป็น ตำแหน่งภาพbgcolor=“n”กำหนดสีพื้นหลังให้ตาราง โดย n คือ #รหัสสี หรือชื่อสีbordercolor=“n”กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER ซึ่ง n คือ #รหัสสี หรือชื่อสีvalign=“align-type”จัดตำแหน่งข้อมูลในแนวตั้ง โดย
top= จัดอยู่ข้างบน
middle = จัดอยู่ตรงกลาง
bottom= จัดอยู่ข้างล่าง
คุณสมบัติของแท็ก <th>
แอตทริบิวต์คุณสมบัติalign= “align-type”กำหนดตำแหน่งตาราง โดยleft=กำหนดตารางให้อยู่ทางซ้าย
center = กำหนดตารางให้อยู่กึ่งกลาง
right=กำหนดตารางให้อยู่ทางขวาbackground=“url”ใส่ภาพกราฟิก เป็นพื้นหลังตาราง โดย url เป็น ตำแหน่งภาพbgcolor=“n”กำหนดสีพื้นหลังให้ตาราง โดย n คือ #รหัสสี หรือชื่อสีbordercolor=“n”กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER ซึ่ง n คือ #รหัสสี หรือชื่อสีcolspan=“n”ปรับขนาดของคอลัมน์ให้มีขนาดเป็นเท่าของความกว้างปกติ สูงสุดเท่ากับจำนวนคอลัมน์ที่มี โดย n คือ ค่าตัวเลขของคอลัมน์rowspan=“n”ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี โดย n คือ ค่าตัวเลขของแถวvalign=“align-type”จัดตำแหน่งข้อมูลในแนวตั้ง โดย
top= จัดอยู่ข้างบน middle = จัดอยู่ตรงกลาง bottom= จัดอยู่ข้างล่าง
คุณสมบัติของแท็ก <td>
แอตทริบิวต์คุณสมบัติalign= “align-type”กำหนดตำแหน่งตาราง โดยleft=กำหนดตารางให้อยู่ทางซ้าย
center = กำหนดตารางให้อยู่กึ่งกลาง
right=กำหนดตารางให้อยู่ทางขวาbackground=“url”ใส่ภาพกราฟิก เป็นพื้นหลังตาราง โดย url เป็น ตำแหน่งภาพbgcolor=“n”กำหนดสีพื้นหลังให้ตาราง โดย n คือ #รหัสสี หรือชื่อสีbordercolor=“n”กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER ซึ่ง n คือ #รหัสสี หรือชื่อสีcolspan=“n”ปรับขนาดของคอลัมน์ให้มีขนาดเป็นเท่าของความกว้างปกติ สูงสุดเท่ากับจำนวนคอลัมน์ที่มี โดย n คือ ค่าตัวเลขของคอลัมน์rowspan=“n”ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี โดย n คือ ค่าตัวเลขของแถวvalign=“align-type”จัจัดตำแหน่งข้อมูลในแนวตั้ง โดย
top= จัดอยู่ข้างบน middle = จัดอยู่ตรงกลาง bottom= จัดอยู่ข้างล่าง
2. การสร้างตาราง
ชื่อแท็ก table, tr, td
ตำแหน่งของแท็ก table อยู่ภายในแท็ก <body>…</body>
tr อยู่ภายในแท็ก <table>…</table>
td อยู่ภายในแท็ก <tr>…</tr>
รูปแบบแท็ก HTML
<table>
<tr><td>ข้อมูล</td><td>ข้อมูล</td></tr>
<tr><td>ข้อมูล</td><td>ข้อมูล</td></tr>
…
<table>
ตัวอย่างการใช้งาน
<html>
<head>
<title>การสร้างตาราง</title>
<body>
<table>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล4</td></tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
3. การใส่หัวเรื่อง <th> และตีเส้นตาราง
รูปแบบแท็ก HTML (การใส่หัวเรื่อง)
<tr><th>หัวข้อ1</th><th>หัวข้อ2</th></tr>
รูปแบบแท็ก HTML (การตีเส้นตาราง)
<table border=“ความหนาของเส้น”>
ตัวอย่างการใช้งาน
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″>
<tr><th>หัวข้อ1</th><th>หัวข้อ2</th></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล4</td></tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
4. การกำหนดข้อความกำกับให้กับตาราง
รูปแบบแท็ก HTML <caption align=“ตำแหน่ง”>ข้อความกำกับ</caption>
ค่าที่กำหนดให้ใช้ ตำแหน่งของข้อความกำกับ ได้แก่ top (กลางบน), bottom (กลางล่าง), left (ซ้ายบน), right (ขวาบน)
ตัวอย่างการใช้งาน
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″>
<caption align=”top”>ตารางแสดงการกำหนดข้อความกำกับตาราง</caption>
<tr><th>หัวข้อ1</th><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><th>หัวข้อ2</th><td>ข้อมูล3</td><td>ข้อมูล4</td></tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
5. การปรับความห่างและการเว้นระยะระหว่างข้อมูลในเซลล์กับกรอบเซลล์
รูปแบบแท็ก HTML <table cellspacing=“ความห่าง”>
ค่าที่กำหนดให้ใช้ ขนาดเป็นพิกเซล (pixels) เช่น 5, 7, 10
รูปแบบแท็ก HTML <table cellpadding=“ระยะที่ต้องการเว้น”>
ค่าที่กำหนดให้ใช้ ขนาดเป็นพิกเซล (pixels) เช่น 5, 7, 10
ตัวอย่างการใช้งาน
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ cellspacing=”0″ cellspacing=”0″>
<tr><th>หัวข้อ1</th><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><th>หัวข้อ2</th><td>ข้อมูล3</td><td>ข้อมูล4</td></tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
6. การปรับความกว้างและความสูงของตาราง
รูปแบบแท็ก HTML <table width=“ความกว้าง” height=“ความสูง”>
ค่าที่กำหนดให้ใช้ ขนาดเป็นพิกเซล (pixels) เช่น 5, 7, 10 หรือ %
ตัวอย่างการใช้งาน
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ width=”50%” height=”50%”>
<tr><th>หัวข้อ1</th><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><th>หัวข้อ2</th><td>ข้อมูล3</td><td>ข้อมูล4</td></tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
7. การปรับขนาดช่องเซลล์
หากเราต้องการปรับขนาดช่องเซลล์จากปกติ 1 ช่อง ที่มีขนาด 1 แถว 1 คอลัมน์เป็นแบบ 1 แถว 3 คอลัมน์ เราก็สามารถทำได้ดังนี้
รูปแบบแท็ก HTML <td colspan=“จำนวนคอลัมน์ที่ต้องการขยาย”>
ค่าที่กำหนดให้ใช้ จำนวนคอลัมน์ที่ต้องการขยาย
ตัวอย่างการขยายเซลล์เกิน 1 คอลัมน์
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ width=”50%” height=”50%”>
<tr><td colspan=”2″>ข้อมูล1</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล4</td></tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
รูปแบบแท็ก HTML <td rowspan=“จำนวนแถวที่ต้องการขยาย”>
ค่าที่กำหนดให้ใช้ จำนวนแถวที่ต้องการขยาย
ตัวอย่างการขยายเซลล์เกิน 1 แถว
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ width=”50%” height=”50%”>
<tr><td rowspan=”2″>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td></tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
8. การใส่สีในช่องเซลล์
รูปแบบแท็ก HTML bgcolor=“ชื่อสี/#รหัสสี”
ค่าที่กำหนดให้ใช้ สีที่กำหนดเป็นสีพื้นฐานหรือเลขฐาน 16
ตัวอย่างการใช้งาน
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ bgcolor=”pink”>
<tr bgcolor=”yellow”><th>หัวเรื่อง1</th><th>หัวเรื่อง2</th></tr>
<tr><td bgcolor=”sky blue”>ข้อมูล1</td><td bgcolor=”white”>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล2</td></tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
9. การกำหนดสีกรอบตาราง
รูปแบบแท็ก HTML bordercolor=“ชื่อสี/#รหัสสี”
ค่าที่กำหนดให้ใช้ สีที่กำหนดเป็นสีพื้นฐานหรือเลขฐาน 16
ตัวอย่างการใช้งาน
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ bordercolor=”blue”>
<tr><th>หัวเรื่อง1</th><th>หัวเรื่อง2</th></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล2</td></tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
10. การใส่รูปภาพพื้นหลังตาราง
รูปแบบแท็ก HTML background=“ตำแหน่งรูปภาพ”
ค่าที่กำหนดให้ใช้ ชื่อตำแหน่งและไฟล์รูปภาพ
ตัวอย่างการใช้งาน
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ bordercolor=”blue” background=”pic/background-31.jpg”>
<tr><th>หัวเรื่อง1</th><th>หัวเรื่อง2</th></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล2</td></tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
11. การจัดตำแหน่งตาราง แถว และคอลัมน์
รูปแบบแท็ก HTML <table align=“ตำแหน่งของข้อมูล” >, <tr align=”ตำแหน่งของข้อมูล”>, <td align=”ตำแหน่งของข้อมูล”>
ค่าที่กำหนดให้ใช้ ตำแหน่งของข้อมูล ได้แก่ center (กลาง), left (ซ้าย), right (ขวา) และ justify (เต็มช่อง)
ตัวอย่างการจัดตำแหน่งข้อมูลแนวนอน
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table width=”40%” border=”1″ align=”center”>
<tr align=”center”><th>หัวเรื่อง1</th><th>หัวเรื่อง2</th></tr>
<tr align=”center”><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr align=”center”><td>ข้อมูล3</td><td>ข้อมูล2</td></tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
รูปแบบแท็ก HTML <td vlign=“ตำแหน่งของข้อมูล”>
ค่าที่กำหนดให้ใช้ ตำแหน่งของข้อมูล ได้แก่ baseline (ตามเส้นฐาน), bottom (ชิดล่าง), middle (กลาง) และ top (ชิดบน), right (ขวา) และ justifty (เต็มช่อง)
ตัวอย่างการจัดตำแหน่งข้อมูลแนวตั้ง
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table width=”100%” height=”50%” border=”2″>
<tr>
<td valign=”baseline”>Baseline</td>
<td valign=”top”>top</td>
<td valign=”middle”>middle</td>
<td valign=”bottom”>bottom</td>
</tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
12. การกำหนดการแสดงเส้นตาราง
เป็นการกำหนดให้แสดงเส้นตารางบางด้านเพื่อความเหมาะสมสำหรับการแสดงข้อมูล เช่น ต้องการแสดงเส้นเฉพาะคอลัมน์
รูปแบบแท็ก HTML <table frame=“ตัวเลือก” rules=“ตัวเลือก”>
ค่าที่กำหนดให้ใช้ กำหนดให้แสดงหรือไม่แสดงเส้นขอบตาราง
ตัวเลือกของแอตทริบิวต์ frame ประกอบด้วย
คำสั่งรายละเอียด คำสั่งรายละเอียดAboveแสดงเฉพาะด้านบนของช่องเซลล์Insแสดงเฉพาะด้านซ้ายของช่องเซลล์Belowแสดงเฉพาะด้านล่างของช่องเซลล์Rhsแสดงเฉพาะด้านขวาของช่องเซลล์Borderแสดงเส้นทุกด้านVoidไม่มีเส้นกรอบboxแสดงเส้นทุกด้านvsidesแสดงเส้นแนวตั้งทุกเส้นhsidesแสดงเส้นแนวนอนทุกเส้นตัวเลือกของแอตทริบิวต์ rules ประกอบด้วย
คำสั่งรายละเอียดallแสดงเส้นแบ่งช่องเซลล์ทุกเส้นcolsแสดงเส้นแบ่งช่องเซลล์เฉพาะเส้นแนวคอลัมน์ (แนวตั้ง)groupsแสดงเฉพาะเส้นแบ่งกลุ่มเซลล์ที่เกิดจากแท็ก thead, tbody, tfoot หรือ colgroupnoneไม่แสดงเส้นแบ่งช่องเซลล์rowsแสดงเส้นแบ่งช่องเซลล์เฉพาะเส้นแนวแถว (แนวนอน)ตัวอย่างการเปิด/ปิดเส้นตาราง
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table frame=”border” rules=”rows” border=”1″>
<thead><td>หัวเรื่อง1</td><td>หัวเรื่อง2</td></thead>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล2</td></tr>
<tfoot><td>ส่วนล่าง1</td><td>ส่วนล่าง</td></tfoot>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
13. การสร้างตารางซ้อนตาราง
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ bordercolor=”pink”>
<tr align=”center”><td colspan=”2″>การสร้างตารางซ้อนตาราง</td></tr>
<td><table border=”1″ bordercolor=”green” align=”center”>
<tr align=”center”><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล4</td></tr>
</table></td>
<tr align=”center”><td colspan=”2″>ข้อมูล5</td></tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
14. การใส่รูปภาพในตาราง
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<b>การแทรกรูปภาพในตาราง</b><br />
<table border=”1″ bordercolor=”pink”>
<tr><td><img src=”pic/146.gif” /></td>
<td><img src=”pic/178.gif” /></td></tr>
</table>
</body>
</html>
15. การกำหนดความกว้างของคอลัมน์
รูปแบบแท็ก HTML <colgroup span=“จำนวน” width=“ความกว้าง”>…</colgroup>
ค่าที่กำหนดให้ใช้ span จำนวนคอลัมน์ที่ใช้กำหนดความกว้าง
width ความกว้างของคอลัมน์มีหน่วยเป็น % หรือพิกเซล
ตัวอย่างการใช้งาน
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″>
<colgroup span=”2″ width=”150″></colgroup>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td><td>ข้อมูล3</td>
<td>ข้อมูล4</td><td>ข้อมูล5</td><td>ข้อมูล6</td></tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
16. การกำหนดความกว้างแต่ละคอลัมน์
รูปแบบแท็ก <col span=“จำนวน” width=“ความกว้าง” />
ค่าที่กำหนดให้ใช้ span จำนวนคอลัมน์ที่ใช้กำหนดความกว้าง
width ความกว้างของคอลัมน์มีหน่วยเป็น % หรือพิกเซล
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″>
<colgroup>
<col span=”2″ width=”100″ />
<col span=”2″ width=”80″ />
<col span=”2″ width=”50″ />
</colgroup>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td><td>ข้อมูล3</td>
<td>ข้อมูล4</td><td>ข้อมูล5</td><td>ข้อมูล6</td></tr>
<tr><td>ข้อมูล7</td><td>ข้อมูล8</td><td>ข้อมูล9</td>
<td>ข้อมูล10</td><td>ข้อมูล11</td><td>ข้อมูล12</td></tr>
</table>
</body>
</html>
คำอธิบาย
จากตัวอย่างมีการใส่แท็ก col อยู่ด้วย 3 ที ซึ่งแต่ละที่มีความหมาย ดังนี้
- <col span=“2” width=“100” /> หมายถึง คอลัมน์ที่ 1-2 กำหนดขนาด 100 พิกเซล
- <col span=“2” width=“80” /> หมายถึง คอลัมน์ที่ 3-4 กำหนดขนาด 80 พิกเซล
- <col span=“2” width=“50” /> หมายถึง คอลัมน์ที่ 5-6 กำหนดขนาด 50 พิกเซล
17. การแบ่งเส้นตาราง <thead>, <tfoot>, <tbody>
การแบ่งส่วนตาราง เราสามารถทำได้ 3 ส่วนคือ
- แท็ก thead (Table Header) ส่วนของหัวตาราง
- แท็ก tbody (Table Body) ส่วนของข้อมูลในตาราง
- แท็ก tfoot (Table Footer) ส่วนของสรุปรวมข้อมูลในตาราง
โดยทั้งสามส่วนเราไม่ต้องเรียงลำดับกันก็ได้ เช่น อาจวางแท็ก tfoot มาก่อนแท็ก tbody ก็ได้ แต่ตอนแสดงผลบราวเซอร์จะจัดแท็ก tfoot ไว้ข้างล่างสุด
ลักษณะของแท็กทั้ง 3 ประการจะเป็นดังนี้
รูปแบบแท็ก HTML <thead><tr><td>…</td></tr></thead>
<tbody><tr><td>…</td></tr></tbody>
<tfoot><tr><td>…</td></tr></tfoot>
ตัวอย่างการใช้งาน
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border=”1″ width=”30%”>
<thead bgcolor=”#6699FF”>
<tr><td>ส่วนหัว1</td><td>ส่วนหัว2</td></tr></thead>
<thead bgcolor=”#00FFFF”>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล3</td><td>ข้อมูล4</td></tr></tbody>
<tfoot bgcolor=”EEEEEE”>
<tr><td>ส่วนล่าง1</td><td>ส่วนล่าง2</td></tr></tfoot>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
การแบ่งตารางเป็นส่วน ๆ ทำให้สามารถจัดรูปแบบ ตกแต่งตารางได้ง่าย โดยสามารถกำหนดรูปแบบตัวอักษร ขนาดตัวอักษร สีตัวอักษร สีพื้นหลัง ฯลฯ โดยจะทำให้ข้อมูลส่วนนั้นแสดงผลทั้งหมด อีกทั้งยังสามารถกำหนดรูปแบบการแสดงผลข้อมูลได้อย่างเหมาะสมอีกด้วย