search

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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

We’ve updated our privacy policy so that we are compliant with changing global privacy regulations and to provide you with insight into the limited ways in which we use your data.

You can read the details below. By accepting, you agree to the updated privacy policy.

Thank you!

View updated privacy policy

We've encountered a problem, please try again.

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

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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

รูปแบบแท็ก 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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

รูปแบบแท็ก 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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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>

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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>

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

คำอธิบาย
จากตัวอย่างมีการใส่แท็ก 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>

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

คำสั่ง bordercolor เป็นแท็กคำสั่งเสริมที่กำหนดให้แสดงอะไรเกี่ยวกับตาราง

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

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

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

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

การโฆษณา

ผู้มีอำนาจ

การโฆษณา

เกี่ยวกับ

ถูกกฎหมาย

ช่วย

ทางสังคม

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