ตาราง HTML ง่ายต่อการสร้างเมื่อคุณเข้าใจพื้นฐานของแถวและคอลัมน์และเมื่อคุณเข้าใจว่าเมื่อใดก็ตามที่สามารถใช้ตารางได้และเมื่อคุณควรหลีกเลี่ยง
ประวัติโดยย่อของตารางและการออกแบบเว็บ
หลายปีมาแล้วก่อนการยอมรับของ CSS และมาตรฐานเว็บนักออกแบบเว็บใช้ HTML
สร้างเค้าโครงหน้าเว็บสำหรับไซต์ การออกแบบเว็บไซต์จะถูกแบ่งเป็นชิ้นเล็ก ๆ เช่นปริศนาและรวมกับตาราง HTML เพื่อแสดงผลในเบราว์เซอร์ตามที่ตั้งใจไว้ เป็นกระบวนการที่ซับซ้อนมากที่สร้างมาร์กอัป HTML จำนวนมากขึ้นซึ่งจะไม่มีวันใช้งานได้ในโลกที่มีหลายหน้าจอในเว็บไซต์ของเราเนื่องจาก CSS กลายเป็นวิธีการที่ได้รับการยอมรับสำหรับภาพหน้าเว็บและเค้าโครงการใช้ตารางนี้จึงกลายเป็น รังเกียจและนักออกแบบเว็บจำนวนมากผิดพลาดเชื่อว่า "ตารางไม่ดี" นั่นคือและไม่จริง ตารางสำหรับรูปแบบไม่ดี แต่ก็ยังมีสถานที่ในการออกแบบเว็บและ HTML นั่นคือเพื่อแสดงข้อมูลแบบตารางเช่นปฏิทินหรือกำหนดการรถไฟ สำหรับเนื้อหานั้นการใช้ตารางยังเป็นวิธีที่ยอมรับได้และดี
ดังนั้นคุณจัดรูปแบบตารางอย่างไร? เริ่มต้นด้วยการสร้างตาราง 2x2 แบบง่ายๆ นี้จะมี 2 คอลัมน์ (เหล่านี้เป็นบล็อกแนวตั้ง) และ 2 แถว (บล็อกแนวนอน) หลังจากสร้างตาราง 2x2 แล้วคุณสามารถสร้างตารางขนาดใด ๆ ก็ได้โดยการเพิ่มแถวหรือคอลัมน์เพิ่มเติม
นี่คือวิธี
-
ก่อนเปิดตาราง
-
เปิดแถวแรกพร้อมกับแท็ก tr
-
เปิดคอลัมน์แรกด้วยแท็ก td
|
-
เขียนเนื้อหาของเซลล์
-
ปิดเซลล์แรกและเปิดช่องที่สอง
|
-
เขียนเนื้อหาของเซลล์ที่สอง
-
ปิดเซลล์ที่สองและปิดแถว
-
เขียนแถวที่สองตรงกับครั้งแรก
| | |
-
จากนั้นให้ปิดตาราง
-
แค่นั้นแหละ!
นอกจากนี้คุณยังสามารถเลือกเพิ่มส่วนหัวของตารางลงในตารางโดยใช้
ธาตุ. ส่วนหัวตารางเหล่านี้จะแทนที่ข้อมูล "ตารางข้อมูล" ในแถวแรกของตารางเช่นนี้
| ชื่อ | บทบาท | | เจเรมี | นักออกแบบ | เจนนิเฟอร์ | ผู้พัฒนา |
เมื่อหน้านี้จะแสดงผลในเบราว์เซอร์แถวแรกที่มีส่วนหัวของตารางจะแสดงเป็นตัวหนาและจะเป็นศูนย์กลางในเซลล์ตารางที่ปรากฏอยู่
ดังนั้นจึงสามารถใช้ตารางใน HTML ได้หรือไม่?
ใช่ตราบเท่าที่คุณไม่ได้ใช้พวกเขาเพื่อวัตถุประสงค์รูปแบบก็ OK เพื่อใช้ตาราง ถ้าคุณต้องการแสดงข้อมูลแบบตารางตารางเป็นวิธีที่จะทำเช่นนั้น ในความเป็นจริงการหลีกเลี่ยงตารางเนื่องจากความบริสุทธิ์ที่เข้าใจผิดบางอย่างเพื่อหลีกเลี่ยงองค์ประกอบ HTML ที่ถูกต้องนี้ให้ย้อนกลับไปเหมือนกับการใช้เหตุผลแบบนี้ในวันและอายุนี้
เขียนโดย Jennifer Kyrin แก้ไขโดย Jeremy Girard
|
