บทที่ 2 การสร้างตาราง

ชั้นมัธยมศึกษาปีที่ 1

โรงเรียนชุมชนบ้านแวง

การสร้างตาราง

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

1. โครงสร้างของตาราง

<table>

<caption>………</caption>

<tr>

<th>………</th>

</tr>

<tr>

<td>………</td>

</tr>

<tr>

<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>

…

<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>