ตาราง HTML:คำแนะนำทีละขั้นตอน

HTML Tables คือชุดของข้อมูลที่แสดงในแถวและคอลัมน์ ในการสร้างตาราง HTML ให้ใช้ <table> องค์ประกอบ คุณสามารถใช้ <tr> เพื่อสร้างแถว <td> เพื่อสร้างคอลัมน์ และ <th> เพื่อสร้างส่วนหัวของตาราง

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

ใน HTML ตารางถูกใช้เป็นวิธีการนำเสนอข้อมูล บทช่วยสอนนี้จะอธิบายพร้อมตัวอย่าง พื้นฐานของตาราง HTML เซลล์ที่ครอบคลุมหลายคอลัมน์และหลายแถว และวิธีจัดรูปแบบตาราง เมื่อสิ้นสุดบทช่วยสอนนี้ คุณจะเป็นผู้เชี่ยวชาญในการสร้างและทำงานกับตารางใน HTML

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

ตารางคือชุดข้อมูลที่แสดงในแถวและคอลัมน์ การใช้ตารางจะทำให้เห็นการเชื่อมต่อระหว่างชุดของค่าในชุดข้อมูลได้ง่าย

ใน HTML ตารางถูกกำหนดโดยใช้ <table> องค์ประกอบ. ภายใน <table> องค์ประกอบ คุณสามารถใช้:

• เพื่อสร้างแถว
• เพื่อสร้างคอลัมน์
• เพื่อสร้างส่วนหัวของตาราง

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

<table>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
</table>

นี่คือผลลัพธ์ของตารางของเรา:

ในตัวอย่างนี้ เราได้สร้างตารางที่มีหนึ่งแถวของส่วนหัว สองคอลัมน์ และข้อมูลตารางสามแถว มาทำลายโค้ดของเรากัน

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

อันดับแรก เราใช้ <table> แท็ก HTML เพื่อสั่งให้หน้าเว็บของเราสร้างตาราง จากนั้นเราก็ใช้ <tr> เพื่อสร้างแถวและ <th> แท็กเพื่อกำหนดส่วนหัวของคอลัมน์สำหรับตารางของเรา ในกรณีนี้ ส่วนหัวคอลัมน์ของเราคือ Coffee และ Price .

ต่อไป เราใช้อีกสาม <tr> เพื่อสร้างแถวตารางทั้งสามแถวที่แสดงชื่อและราคากาแฟของเราในเซลล์ข้อมูลของตาราง แต่ละ <tr> . เหล่านี้ แท็กมี <td> แท็ก ซึ่งใช้เพื่อแสดงเซลล์คอลัมน์ในตาราง ตัวอย่างเช่น ใช้องค์ประกอบ td เพื่อเป็นตัวแทนของ Espresso และ $2.00 ในการชงกาแฟครั้งแรกของเรา

การจัดรูปแบบโต๊ะ

มีหลายวิธีในการจัดรูปแบบตารางใน HTML

เส้นขอบ

ใน HTML ตารางไม่มีเส้นขอบตามค่าเริ่มต้น ซึ่งหมายความว่าถ้าเราต้องการให้มีเส้นขอบปรากฏบนตารางของเรา เราจำเป็นต้องใช้ CSS แอตทริบิวต์ CSS border ใช้สำหรับเพิ่มเส้นขอบให้กับตาราง HTML

สมมติว่าเราต้องการเพิ่มเส้นขอบสีดำทึบรอบโต๊ะของเราจากก่อนหน้านี้ เราสามารถทำได้โดยใช้รหัสนี้:

table, th, td {
	border: 1px solid black;
}

เมื่อเราใช้สไตล์นี้ในโค้ดของตาราง ตารางของเราจะเปลี่ยนเพื่อรวมเส้นขอบรอบเซลล์แต่ละเซลล์และตัวตารางเอง นี่คือตารางที่เราแก้ไข:

ตอนนี้ตารางของเรามีเส้นขอบ ซึ่งทำให้อ่านข้อมูลในตารางของเราได้ง่ายขึ้น อย่างไรก็ตาม สไตล์ที่เราสร้างไว้ด้านบนจะวางเส้นขอบไว้รอบๆ ทุกเซลล์และแยกแต่ละเส้นขอบออก หากเราต้องการยุบแต่ละเส้นขอบให้เป็นหนึ่ง เราสามารถใช้คุณสมบัติ border-collapse นี่คือรหัสที่เราจะใช้ทำงานนี้ให้สำเร็จ:

table {
	border-collapse: collapse
}

ตารางใหม่ของเรามีลักษณะดังนี้:

อย่างที่คุณเห็น ตารางของเราตอนนี้มีเส้นขอบเดียว แทนที่จะเป็นหนึ่งเส้นขอบรอบ ๆ แต่ละเซลล์และตัวตารางเอง

จัดแนวหัวเรื่อง

ตามค่าเริ่มต้น หัวเรื่องจะจัดตำแหน่งให้อยู่ตรงกลางเซลล์ ถ้าคุณต้องการจัดแนวส่วนหัวไปทางซ้ายหรือขวาของเซลล์ คุณสามารถระบุคุณสมบัติ text-align ให้กับ <th> แท็กในตารางของคุณ (จำไว้ว่า <th> แท็กใช้เพื่อระบุหัวเรื่อง)

นี่คือรหัสที่คุณจะใช้:

th {
	text-align: left;
}

หากเราใช้สไตล์นี้กับตารางของเราจากด้านบน ตารางต่อไปนี้จะถูกสร้างขึ้น:

ตารางด้านบนของเราได้จัดแนวส่วนหัวของคอลัมน์ทางด้านซ้ายของตารางของเรา

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

ขยายหลายแถวและหลายคอลัมน์

เมื่อคุณทำงานกับตาราง คุณอาจต้องการให้เซลล์ขยายหลายแถวหรือหลายคอลัมน์

ตัวอย่างเช่น สมมติว่าเราต้องการให้คอลัมน์ราคาของเราจากช่วงก่อนหน้าครอบคลุมมากกว่าสองคอลัมน์ นั่นคือที่มาของแอตทริบิวต์ colspan และ rowspan Rowspan ใช้เพื่อขยายหลายแถวในตาราง และ colspan ใช้เพื่อขยายหลายคอลัมน์ในตาราง

นี่คือตัวอย่างตารางที่ใช้ colspan เพื่อขยาย Price สองคอลัมน์:

<table>
    <tr>
        <th>Coffee</th>
        <th colspan="2">Price</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>$2.00 (new)</td>
        <td>$2.00 (old)</td>
    </tr>
</table>

ตารางของเรามีลักษณะดังนี้:

อย่างที่คุณเห็น ตอนนี้คอลัมน์ราคาครอบคลุมสองแถว นอกจากนี้ คุณสามารถใช้ rowspan ในลักษณะเดียวกันเพื่อสร้างเซลล์ที่ครอบคลุมมากกว่าหนึ่งแถว

สมมติว่าคุณมีโต๊ะที่เก็บรายละเอียดเกี่ยวกับกาแฟเฉพาะในเมนู

คุณต้องการข้อมูลเกี่ยวกับราคากาแฟที่ลดราคา ซึ่งใช้ในวันสุดท้ายของทุกเดือนเพื่อจูงใจลูกค้าให้ซื้อกาแฟ และราคาปกติจะปรากฏภายใต้หัวข้อ Price เดียวกัน พร้อมป้ายบอกราคา คุณสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:

<table>
        <tr>
            <th>Coffee</th>
            <td>Espresso</td>
        </tr>
        <tr>
            <th rowspan="2">Price</th>
            <td>$2.00 (regular)</td>
        </tr>
        <tr>
            <td>$1.80 (discounted)</td>
        </tr>
</table>

นี่คือผลลัพธ์ของตารางของเรา:

ในตัวอย่างนี้ คุณจะเห็นว่า Price ป้ายกำกับครอบคลุมสองแถว

การกำหนดส่วนหัว เนื้อหา และส่วนท้ายของตาราง

เมื่อคุณทำงานกับตาราง มีแท็กสามแท็กที่ใช้เพื่อช่วยให้คุณจัดโครงสร้างข้อมูลได้ดียิ่งขึ้น

<thead> แท็กใช้เพื่อกำหนดส่วนหัวของตารางของคุณ <tbody> แท็กใช้เพื่อกำหนดเนื้อหาของตารางของคุณ และ <tfoot> แท็กใช้เพื่อกำหนดส่วนท้ายของตารางของคุณ

ลองใช้ตารางของเราจากตัวอย่างแรกเพื่ออธิบายวิธีการทำงาน สมมติว่าเรากำลังสร้างตารางที่แสดงรายการกาแฟทั้งหมดที่ขายในร้านกาแฟ เพื่อให้โค้ดของเราอ่านง่ายขึ้น เราต้องการแยกส่วนหัว เนื้อหา และส่วนท้ายของตารางออก เราสามารถทำได้โดยใช้รหัสนี้:

<table>
	<thead>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Last Updated</th>
			<td>January 9th, 2020</td>
		</tr>
	</tfoot>
</table>

ในตารางนี้ เราได้ใช้ <thead> , <tbody> และ <tfoot> เพื่อกำหนดส่วนหัว เนื้อหา และส่วนท้ายของตารางตามลำดับ

<thead> ใช้เพื่อแยกแยะแถวส่วนหัวของเราซึ่งมี Coffee และ Price หัวตาราง <tbody> tag ใช้สำหรับเก็บแถวที่มีข้อมูลหลักสำหรับตารางของเรา (ราคากาแฟ)

<tfoot> แท็กใช้เพื่อจัดเก็บแถวซึ่งระบุว่าเมื่อใดที่ตารางได้รับการอัปเดตครั้งล่าสุด เราได้วางข้อมูลนี้ไว้ในแท็กส่วนท้ายเนื่องจากไม่ใช่รายการสำหรับรายการกาแฟและราคาของเรา

แม้ว่าแท็กเหล่านี้จะเป็นตัวเลือก แต่ก็ช่วยให้คุณจัดโครงสร้างตารางใน HTML ได้ดีขึ้น

คำอธิบายตารางในรูปแบบ HTML

<caption> แท็กใช้เพื่อเพิ่มชื่อหรือที่เรียกว่า caption ไปที่โต๊ะของคุณ

<caption> ต้องวางแท็กทันทีหลังจากเปิด <table> แท็กในตารางของคุณ นี่คือตัวอย่าง <caption> แท็กที่ใช้เพื่อเพิ่มส่วนหัว Coffee Menu ไปที่รายการกาแฟของเรา:

<table>
	<caption>Coffee Menu</caption>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
</table>

ตารางของเราปรากฏดังนี้:

ในโค้ดของเรา เราใช้ <caption> แท็กเพื่อเพิ่มส่วนหัว Coffee Menu ไปที่โต๊ะ

บทสรุป

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

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

ตอนนี้คุณมีความรู้ที่จำเป็นในการเริ่มทำงานกับตารางในรูปแบบ HTML อย่างมืออาชีพแล้ว!