ตารางเป็นวิธีที่ง่ายที่สุดในการสร้างแคตตาล็อกออนไลน์ใน HTML ตารางแบบสามคอลัมน์ช่วยให้คุณมีพื้นที่สำหรับรูปภาพสินค้า คำอธิบาย และข้อมูลการจัดส่ง/การสั่งซื้อ การแทรกข้อมูลลงในตารางช่วยลดระยะเวลาที่ใช้ในการจัดข้อความ นอกจากนี้ ตารางยังให้คุณควบคุมพื้นที่สีขาวรอบๆ ข้อมูลบนหน้าเว็บของคุณ เพื่อเพิ่มรูปลักษณ์และความชัดเจนของเว็บไซต์ของคุณ
ขั้นตอนที่ 1
กำหนดตารางที่มีเส้นขอบหนึ่งพิกเซลโดยใช้ช่องเปิด
แท็ก:วิดีโอประจำวันนี้
ขั้นตอนที่ 2
แทรกแถวแรกของเซลล์และเนื้อหาด้วยรหัสนี้:
ขั้นตอนที่ 3
แทรกแถวที่สองของเซลล์และเนื้อหาด้วยรหัสนี้:
ขั้นตอนที่ 4
ปิดตารางด้วยแท็กปิดท้าย:
นี่คือคำอธิบายของรายการแรก | รายการนี้มีอยู่ในขณะนี้ | |
นี่คือคำอธิบายของรายการที่สอง | รายการนี้อยู่ในสถานะสั่งจอง |
เคล็ดลับ
ตัวอย่างง่ายๆ นี้สร้างตารางที่มีสองแถวและสามคอลัมน์ คอลัมน์แรกแสดงรูปภาพผลิตภัณฑ์ขนาด 60 x 60 พิกเซลโดยใช้แท็ก คอลัมน์ที่สองและสามแสดงรายละเอียดสินค้าและข้อมูลสต็อก โปรดทราบว่าแต่ละแถวเริ่มต้นและสิ้นสุดด้วยแท็ก และแต่ละรายการในแถวเริ่มต้นและลงท้ายด้วยแท็ก แทรกคอลัมน์หรือแถวได้มากเท่าที่คุณต้องการเพื่ออธิบายผลิตภัณฑ์ของคุณ
แทรกคำสั่ง cellpadding ต่อจากข้อกำหนดเส้นขอบในคำจำกัดความของตาราง เพื่อเพิ่มจำนวนช่องว่างระหว่างเส้นขอบของตารางและเนื้อหาของคุณ ตัวอย่างเช่น,
สร้างพื้นที่สีขาว 10 พิกเซลรอบเนื้อหาของแต่ละเซลล์ในตารางอ้างอิง
- W3Schools.com: ตาราง HTML