วิธีการสร้างตาราง 2x2

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

ประวัติโดยย่อของตารางและการออกแบบเว็บ

หลายปีมาแล้วก่อนที่ CSS และมาตรฐานเว็บจะได้รับการยอมรับนักออกแบบเว็บใช้องค์ประกอบ HTML

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

ดังนั้นคุณจัดรูปแบบตารางอย่างไร? เริ่มต้นด้วยการสร้างตาราง 2x2 แบบง่ายๆ นี้จะมี 2 คอลัมน์ (เหล่านี้เป็นบล็อกแนวตั้ง) และ 2 แถว (บล็อกแนวนอน) หลังจากสร้างตาราง 2x2 แล้วคุณสามารถสร้างตารางขนาดใด ๆ ก็ได้โดยการเพิ่มแถวหรือคอลัมน์เพิ่มเติม

นี่คือสิ่งที่คุณต้องการ

เวลาที่ต้องการ: 10 นาที

นี่คือวิธี:

1. ก่อนอื่นให้เปิดตาราง

เปิดแถวแรกด้วยแท็ก tr

เปิดคอลัมน์แรกที่มีแท็ก td

เมื่อหน้านี้จะแสดงผลในเบราว์เซอร์แถวแรกที่มีส่วนหัวของตารางจะแสดงเป็นตัวหนาและจะเป็นศูนย์กลางในเซลล์ตารางที่ปรากฏอยู่

ดังนั้นจึงสามารถใช้ตารางใน HTML ได้หรือไม่?

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

เขียนโดย Jennifer Kyrin แก้ไขโดย Jeremy Girard เมื่อวันที่ 8/11/16

เขียนเนื้อหาของเซลล์ ปิดเซลล์แรกและเปิด	วินาที เขียนเนื้อหาของเซลล์ที่สอง ปิดเซลล์ที่สองแล้วปิดแถว เขียนแถวที่สองตรงทั้งหมดเป็น
	จากนั้นปิดตาราง นอกจากนี้คุณยังสามารถเลือกเพิ่มส่วนหัวของตารางลงในตารางโดยใช้องค์ประกอบ	ส่วนหัวตารางเหล่านี้จะแทนที่หรือ "ข้อมูลตาราง" ในแถวแรกของตารางเช่นนี้:
ชื่อ	บทบาท
Jeremy	Designer td> เจนนิเฟอร์	นักพัฒนาซอฟต์แวร์