search

คำสั่ง เป็นคำสั่งในการกำหนดอะไร

1 ปีs ที่ผ่านมา
ความเห็น: 0
มุมมอง: 61

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

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 หรือ colgroup
none ไม่แสดงเส้นแบ่งช่องเซลล์
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>

ผลลัพธ์ที่ได้

คำสั่ง เป็นคำสั่งในการกำหนดอะไร

การแบ่งตารางเป็นส่วน ๆ ทำให้สามารถจัดรูปแบบ ตกแต่งตารางได้ง่าย โดยสามารถกำหนดรูปแบบตัวอักษร ขนาดตัวอักษร สีตัวอักษร สีพื้นหลัง ฯลฯ โดยจะทำให้ข้อมูลส่วนนั้นแสดงผลทั้งหมด อีกทั้งยังสามารถกำหนดรูปแบบการแสดงผลข้อมูลได้อย่างเหมาะสมอีกด้วย

อ้างอิง

  • รูปภาพจากอิดิเตอร์ Notepad
  • รูปภาพประกอบสืบค้นจากอินเทอร์เน็ต
  • การสร้างเว็บและเพิ่มลูกเล่นด้วย HTML และ XHTML เขียนโดย นายประชา  พฤกษ์ประเสริฐ  สำนักพิมพ์ซิมพลิฟาย

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง cellspacing เป็นคำสั่งในข้อใด แท็กใดต่อไปนี้ ที่ใช้กำหนดคำอธิบายให้กับตาราง แท็กคำสั่งข้อใดใช้ในการสร้างแถวให้กับตาราง ในคำสั่งสร้างตาราง และ หมายถึงอะไร Tr HTML คือ

กระทู้ที่เกี่ยวข้อง

คําสั่งแต่งตั้งเจ้าหน้าที่ดูแลระบบ moe safety center doc
คําสั่งแต่งตั้งเจ้าหน้าที่ดูแลระบบ moe safety center doc

ถ้า ต้องการ เปลี่ยน รูป ที่ Frame จะ ใช้คำสั่ง ใด
ถ้า ต้องการ เปลี่ยน รูป ที่ Frame จะ ใช้คำสั่ง ใด

... คือคำสั่งอะไร
... คือคำสั่งอะไร

ป้ายที่ไม่สามารถ ติด ตั้ง บนพื้นที่สาธารณะได้ มี 7 ประเภท
ป้ายที่ไม่สามารถ ติด ตั้ง บนพื้นที่สาธารณะได้ มี 7 ประเภท

การสร้างเงื่อนไข if-else มีลักษณะอย่างไร
การสร้างเงื่อนไข if-else มีลักษณะอย่างไร

คําสั่งที่ใช้ในภาษาสําหรับการควบคุมข้อมูล
คําสั่งที่ใช้ในภาษาสําหรับการควบคุมข้อมูล

ตัวอย่างประกาศแต่งตั้งคณะกรรมการประเมิน pa
ตัวอย่างประกาศแต่งตั้งคณะกรรมการประเมิน pa

ข้อ ใด คือ ข้อดี ของการพัฒนาโปรแกรม ใช้ เอง
ข้อ ใด คือ ข้อดี ของการพัฒนาโปรแกรม ใช้ เอง

คําสั่งจัดตั้งศูนย์ช่วยเหลือประชาชนขององค์กรปกครองส่วนท้องถิ่น doc
คําสั่งจัดตั้งศูนย์ช่วยเหลือประชาชนขององค์กรปกครองส่วนท้องถิ่น doc

ข้อใดคือ ความ หมาย ของโปรแกรมคอมพิวเตอร์ที่ถูก ต้อง ที่สุด
ข้อใดคือ ความ หมาย ของโปรแกรมคอมพิวเตอร์ที่ถูก ต้อง ที่สุด

2024 ศูนย์ บรรณสาร และ สื่อการศึกษา มหาวิทยาลัย พะเ
2024 ศูนย์ บรรณสาร และ สื่อการศึกษา มหาวิทยาลัย พะเ

2024 ทำไม google map เป ดในเคร องคอมพ วเตอร ช า
2024 ทำไม google map เป ดในเคร องคอมพ วเตอร ช า

2024 การพ นยาหอบห ดเป ด flow 6-8 lpm ทำไม
2024 การพ นยาหอบห ดเป ด flow 6-8 lpm ทำไม

2024 ทำไม facebbok ถ งแจ งว าไม ได ออนไลน
2024 ทำไม facebbok ถ งแจ งว าไม ได ออนไลน

2024 ทำไม asus zenfone zoom อ พแอนดรอยด 6 ไม ได
2024 ทำไม asus zenfone zoom อ พแอนดรอยด 6 ไม ได

2024 Fate stay night unlimited blade works ทำไม archer รอด
2024 Fate stay night unlimited blade works ทำไม archer รอด

2024 ทำไม junho ถ งไม ร องเพลงประกอบละครเอง
2024 ทำไม junho ถ งไม ร องเพลงประกอบละครเอง

2024 Site pantip.com ทำไม พวกน ส ย ได ด บได ด
2024 Site pantip.com ทำไม พวกน ส ย ได ด บได ด

2024 ทำไม csi miami season 10 พากย ไทย ด ไม ได
2024 ทำไม csi miami season 10 พากย ไทย ด ไม ได

2024 คน ท้อง ถ่าย แล้ว ทำไม มี เลือด ด้วย
2024 คน ท้อง ถ่าย แล้ว ทำไม มี เลือด ด้วย

การโฆษณา

ข่าวล่าสุด

Nike renew lucent ดี ไหม
11 เดือนs ที่ผ่านมา . โดย DiscordantElectricity
Net fiber ค่าย ไหน ดี
11 เดือนs ที่ผ่านมา . โดย ErroneousCircus
Amd ryzen 7 2700u ดี ไหม
11 เดือนs ที่ผ่านมา . โดย State-runFunction
บ้าน เลข ที่ ไม่ ดี
11 เดือนs ที่ผ่านมา . โดย SundryCatfish
ติว สอบ ก ทม ที่ไหน ดี
11 เดือนs ที่ผ่านมา . โดย DrowningTempo
ดี แม็ ก เอ็ ก ซี รี่ 2012
11 เดือนs ที่ผ่านมา . โดย DigestivePullman
E85 ใช้ กับ รถ รุ่น ไหน
11 เดือนs ที่ผ่านมา . โดย TameDespotism
ไทร ทัน cng มือ สอง ดี ไหม
11 เดือนs ที่ผ่านมา . โดย CalmWatchdog
เพลง เด็๋ ก ดี 12 ประการ
11 เดือนs ที่ผ่านมา . โดย BruisedAsthma
ดี ดี ทาวเวอร์ ให้ เช่า 2562
11 เดือนs ที่ผ่านมา . โดย UnsettlingSarcasm

การโฆษณา

ผู้มีอำนาจ

การโฆษณา

เกี่ยวกับ

ถูกกฎหมาย

ช่วย

ทางสังคม

homeendefrjpkoptzhhiitthtr
ลิขสิทธิ์ © 2024 th.ketiadaan Inc.