วิธีสร้างตารางข้อมูลออนไลน์

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

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

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

bgcolor=border="CHOSEN_BORDER_WIDTH"

สีของเส้นขอบสามารถเปลี่ยนแปลงได้ด้วยแท็ก

bordercolor="CHOSEN_COLOR"

ซึ่งใช้เงื่อนไขสีพื้นฐาน เช่น สีแดงหรือสีดำ หรือรหัสสีฐานสิบหกหกหลัก เลขฐานสิบหกมีสีมากกว่า ตัวอย่างของเราใช้ border="2" และ bordercolor="black"

กำหนดความกว้างของทั้งตาราง วัดเป็นพิกเซลหรือเปอร์เซ็นต์ของขนาดหน้าจอ พิกเซลมีความชัดเจนและเปอร์เซ็นต์ช่วยให้ตารางสามารถปรับให้เข้ากับขนาดหน้าจอต่างๆ พยายามตัดสินความกว้างตามความกว้างของข้อมูลในแถวต่างๆ หากภายหลังพบว่าโต๊ะบางหรือกว้างเกินไป สามารถเปลี่ยนได้ ตัวอย่างของเราใช้ width="175"

กำหนดสีพื้นหลังของเซลล์ข้อมูล ซึ่งแตกต่างจากสีพื้นหลังของหน้า ซึ่งสามารถให้คอนทราสต์ที่ดี แท็กคือ

bgcolor="CHOSEN_COLOR"

เช่นเดียวกับสีขอบ ตัวอย่างของเราใช้ bgcolor="white"

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

font="CHOSEN_COLOR"

ตัวอย่างของเราคือ font="black" ซึ่งตัดกันได้ดีกับพื้นหลังสีขาว

เขียนแท็กตารางที่สมบูรณ์ระหว่างลูกศรซ้ายและขวาโดยเว้นวรรคระหว่างแอตทริบิวต์ของแท็กและเริ่มต้นด้วยแท็กตารางด้านหน้า ลำดับของแท็กไม่สำคัญ ตราบใดที่ "ตาราง" อยู่ข้างหน้า

กำหนดความกว้างของคอลัมน์ ความกว้างของแต่ละคอลัมน์ขึ้นอยู่กับความกว้างของทั้งตาราง ใช้ความกว้างของตารางแล้วหารด้วยจำนวนเซลล์เพื่อให้ได้คอลัมน์ที่มีขนาดเท่ากัน หากจำเป็น ให้ปรับความกว้างของคอลัมน์ แต่ยอดรวมต้องไม่เกินความกว้างของตาราง เมื่อความกว้างของเซลล์หนึ่งเปลี่ยนแปลง เซลล์อื่นๆ จะต้องได้รับการปรับให้เท่ากับความกว้างของตารางทั้งหมด (ตัวอย่างของเรามีความกว้าง 175 และสามคอลัมน์ต่อแถว ดังนั้นจึงแบ่งเท่าๆ กันประมาณ 59 แบ่งตามจริงคือ 70, 60, 40.)

เริ่มเพิ่มข้อมูลของคุณ ขั้นแรก ให้ขึ้นบรรทัดใหม่และเพิ่มแถวของตารางด้วยรหัส

ป้อนข้อมูลของคุณสำหรับเซลล์ ใช้รหัสนี้เพื่อแสดงเซลล์ว่าง:

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

ทำซ้ำการสร้างเซลล์ข้อมูลตาราง โดยแต่ละเซลล์ขึ้นบรรทัดใหม่ จนกว่าเซลล์ทั้งหมดในแถวจะเสร็จสมบูรณ์ จากนั้นปิดท้ายแถวด้วยแท็ก. เริ่มต้นแถวถัดไปด้วยกระบวนการเดียวกัน โดยเริ่มจาก

ปิดรหัสตารางด้วย with แท็ก รหัสตารางสุดท้ายของเรา หากสิ้นสุดหลังจากข้อมูลสองแถว อยู่ด้านล่าง

• โปรแกรมแก้ไข HTML หรือ Notepad
• ข้อมูล