HTML - ตาราง
ตาราง HTML ช่วยให้ผู้เขียนเว็บสามารถจัดเรียงข้อมูลเช่นข้อความรูปภาพลิงก์ตารางอื่น ๆ ลงในแถวและคอลัมน์ของเซลล์
ตาราง HTML ถูกสร้างขึ้นโดยใช้ไฟล์ <table> ซึ่งแท็ก <tr> แท็กใช้ในการสร้างแถวตารางและ <td>แท็กใช้ในการสร้างเซลล์ข้อมูล องค์ประกอบภายใต้ <td> เป็นแบบปกติและจัดชิดซ้ายตามค่าเริ่มต้น
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ที่นี่ borderเป็นแอตทริบิวต์ของแท็ก <table> และใช้เพื่อใส่เส้นขอบให้กับเซลล์ทั้งหมด หากคุณไม่ต้องการเส้นขอบคุณสามารถใช้ border = "0"
ส่วนหัวของตาราง
สามารถกำหนดส่วนหัวของตารางได้โดยใช้ <th>แท็ก แท็กนี้จะถูกนำไปแทนที่แท็ก <td> ซึ่งใช้แทนเซลล์ข้อมูลจริง โดยปกติคุณจะวางแถวบนสุดของคุณเป็นส่วนหัวของตารางดังที่แสดงด้านล่างมิฉะนั้นคุณสามารถใช้องค์ประกอบ <th> ในแถวใดก็ได้ ส่วนหัวซึ่งกำหนดไว้ในแท็ก <th> จะอยู่กึ่งกลางและเป็นตัวหนาตามค่าเริ่มต้น
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
Cellpadding และ Cellspacing แอตทริบิวต์
มีสองแอตทริบิวต์ที่เรียกว่าcellpaddingและcellspacingซึ่งคุณจะใช้เพื่อปรับพื้นที่สีขาวในเซลล์ตารางของคุณ แอตทริบิวต์ cellspacing กำหนดช่องว่างระหว่างเซลล์ตารางในขณะที่ cellpadding แสดงระยะห่างระหว่างขอบเซลล์กับเนื้อหาภายในเซลล์
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
คุณสมบัติ Colspan และ Rowspan
คุณจะใช้ colspanแอตทริบิวต์หากคุณต้องการรวมคอลัมน์ตั้งแต่สองคอลัมน์ขึ้นไปเป็นคอลัมน์เดียว วิธีที่คุณจะใช้rowspan หากคุณต้องการรวมแถวสองแถวขึ้นไป
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
พื้นหลังตาราง
คุณสามารถตั้งค่าพื้นหลังตารางโดยใช้หนึ่งในสองวิธีต่อไปนี้ -
bgcolor แอตทริบิวต์ - คุณสามารถกำหนดสีพื้นหลังสำหรับทั้งตารางหรือเพียงเซลล์เดียว
background แอตทริบิวต์ - คุณสามารถตั้งค่าภาพพื้นหลังสำหรับทั้งตารางหรือเพียงเซลล์เดียว
คุณยังสามารถตั้งค่าสีเส้นขอบได้โดยใช้ bordercolor แอตทริบิวต์
Note- เดอะbgcolor , พื้นหลังและborderColorแอตทริบิวต์เลิกใน HTML5 อย่าใช้แอตทริบิวต์เหล่านี้
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
นี่คือตัวอย่างของการใช้ backgroundแอตทริบิวต์ ในที่นี้เราจะใช้รูปภาพที่มีอยู่ในไดเร็กทอรี / images
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ ภาพพื้นหลังที่นี่ใช้ไม่ได้กับส่วนหัวของตาราง
ความสูงและความกว้างของโต๊ะ
คุณสามารถกำหนดความกว้างและความสูงของตารางโดยใช้ width และ heightคุณลักษณะ. คุณสามารถระบุความกว้างหรือความสูงของตารางเป็นพิกเซลหรือเป็นเปอร์เซ็นต์ของพื้นที่หน้าจอที่มี
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
คำบรรยายตาราง
captionแท็กจะทำหน้าที่เป็นชื่อเรื่องหรือคำอธิบายสำหรับตารางและจะปรากฏที่ด้านบนสุดของตาราง แท็กนี้เลิกใช้แล้วใน HTML / XHTML เวอร์ชันใหม่กว่า
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ส่วนหัวของตารางเนื้อหาและส่วนท้าย
ตารางสามารถแบ่งออกเป็นสามส่วน ได้แก่ ส่วนหัวลำตัวและส่วนเท้า ส่วนหัวและส่วนท้ายค่อนข้างคล้ายกับส่วนหัวและส่วนท้ายในเอกสารที่ประมวลผลด้วยคำซึ่งยังคงเหมือนเดิมสำหรับทุกหน้าในขณะที่เนื้อหาเป็นตัวยึดเนื้อหาหลักของตาราง
องค์ประกอบสามประการในการแยกส่วนหัวลำตัวและส่วนท้ายของโต๊ะ ได้แก่ -
<thead> - เพื่อสร้างส่วนหัวตารางแยกต่างหาก
<tbody> - เพื่อระบุตัวหลักของตาราง
<tfoot> - เพื่อสร้างส่วนท้ายของตารางแยกต่างหาก
ตารางอาจมีองค์ประกอบ <tbody> หลายรายการเพื่อระบุหน้าหรือกลุ่มข้อมูลต่างๆ แต่เป็นที่น่าสังเกตว่าแท็ก <thead> และ <tfoot> ควรปรากฏก่อน <tbody>
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ตารางที่ซ้อนกัน
คุณสามารถใช้ตารางหนึ่งในตารางอื่น ไม่เพียง แต่ตารางเท่านั้นที่คุณสามารถใช้แท็กเกือบทั้งหมดในแท็กข้อมูลตาราง <td> ได้
ตัวอย่าง
ต่อไปนี้เป็นตัวอย่างของการใช้ตารางอื่นและแท็กอื่น ๆ ภายในเซลล์ตาราง
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -