วิธีสร้างตารางใน HTML แผนภูมิสี

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

เริ่มต้นใช้งานบนโต๊ะ

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

ดังนั้นเมื่อเริ่มสร้างตารางใน HTML เราขอแนะนำให้คุณมีสมาธิให้มากที่สุดและไม่ฟุ้งซ่าน

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

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

บรรณาธิการ

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

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

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

แท็ก

ไม่ว่าคุณจะเป็นบรรณาธิการคนไหนจะใช้ก่อนที่คุณจะเริ่มสร้างตารางใน html คุณควรจำแท็กหลัก มีสามตัวคือ <table>, <tr> และ <td> โปรดทราบว่าแท็กทั้งหมดถูกจับคู่ แท็กแรกหมายถึงตารางโดยรวมแท็กที่สองระบุแถวและแท็กที่สามระบุเซลล์ภายในแถว

รายละเอียดเพิ่มเติมเล็กน้อยเกี่ยวกับแต่ละแท็กตารางจะเริ่มต้นด้วยแท็ก <table> และลงท้ายด้วย </table> เสมอ สำหรับเบราว์เซอร์ใด ๆ นี่เป็นรูปแบบที่ตารางอยู่ด้านหน้าของมัน จากนั้นจะเขียนบรรทัดซึ่งเปิดด้วย <tr> และลงท้ายด้วยแท็ก </tr> แต่ละบรรทัดประกอบด้วยจำนวนเซลล์โดยใช้แท็ก <td> และ </td>

ดังนั้นโค้ดสำหรับตาราง 2x2 จะมีลักษณะดังนี้:

<table>

<tr> <td>

</td> <td> </td> </tr>

<tr> <td> </td> <td> </td> </tr>

</table>

คุณสามารถแทรกตารางลงในโค้ด HTML ของเพจได้โดยคัดลอกจากตัวแก้ไขที่เลือก

พารามิเตอร์สำหรับตารางแถวและเซลล์

ดังนั้นเราจึงได้วิเคราะห์โค้ดพื้นฐานตอนนี้เรามาพูดถึงวิธีการปรับปรุงโต๊ะให้สว่างและน่าสนใจยิ่งขึ้น ในการดำเนินการนี้คุณต้องทราบพารามิเตอร์พื้นฐานของแท็ก พวกเขาเขียนไว้ในแท็กเปิดโดยมีเครื่องหมายเท่ากับหลังแต่ละพารามิเตอร์จากนั้นจึงเขียนค่าที่อยู่ในเครื่องหมายคำพูด ตัวอย่างเช่นพื้นหลังในตาราง HTML ถูกกำหนดไว้เช่นนี้ <table bgcolor = "#FFFFFF">

นี่คือพารามิเตอร์พื้นฐานบางส่วนที่จะเป็นประโยชน์กับคุณมากที่สุด เริ่มต้นด้วยตารางตัวเอง

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

หากคุณต้องการทำให้พื้นหลังของตารางเป็นรูปภาพให้ใช้พื้นหลังในขณะที่คุณควรลงทะเบียน URL ของรูปภาพ

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

แท็กคู่ <คำบรรยาย> ซึ่งเขียนต่อจากแท็กเปิด <table> จะช่วยในการตั้งชื่อเรื่อง

เล็กน้อยเกี่ยวกับพารามิเตอร์สตริงสีของเซลล์ในแถวถูกกำหนดโดยใช้ bgcolor การจัดแนวข้อความในแนวนอนสามารถทำได้โดยใช้พารามิเตอร์ align (ซ้ายกลางหรือขวา) แนวตั้ง - valign (ใช้ค่าบนกลางหรือล่าง)

เกี่ยวกับเซลล์คุณสามารถสังเกตได้ว่ามีการตั้งค่าสีพื้นหลังและภาพพื้นหลังโดยใช้พารามิเตอร์เดียวกันกับทั้งตาราง คุณสามารถจัดแนวข้อความโดยใช้พารามิเตอร์ align และ valign

นอกจากนี้ยังมีพารามิเตอร์พิเศษ - colspan และ rowspanใช้ขั้นตอนแรกคุณสามารถกำหนดจำนวนคอลัมน์ที่เซลล์จะขยายได้ ส่วนที่สองระบุจำนวนแถวที่เซลล์หนึ่ง ๆ สามารถขยายได้

ทั้งหมดนี้เป็นพารามิเตอร์ที่มีประโยชน์ที่สุด

แผนภูมิสี

ลองพูดคำสองสามคำเกี่ยวกับสิ่งที่มีประโยชน์เช่นตารางสี สามารถใช้เพื่อตั้งค่าพื้นหลังของหน้าสีของข้อความลิงก์และองค์ประกอบอื่น ๆ ตารางสีมีประมาณ 216 สีและเฉดสี แต่ละคนมีรหัสฐานสิบหกของตัวเอง

รหัสเริ่มต้นด้วยเครื่องหมายแฮและมีตัวเลขหรือตัวอักษรสามคู่ ตัวอย่างเช่นสีเขียวในตารางคือ # 007F0 แต่ละคู่แสดงถึงความเข้มของสีหลักหนึ่งในสามสี ได้แก่ แดงเขียวและน้ำเงิน เมื่อใช้ตารางคุณสามารถเลือกสีที่คุณต้องการและตั้งค่าโดยใช้รหัส

หากคุณไม่มีโอกาสใช้โต๊ะคุณสามารถกำหนดสีโดยใช้ชื่อเป็นภาษาอังกฤษได้

เนื้อหา

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

ในการใส่ข้อความหรือข้อมูลอื่น ๆ ในเซลล์ (บรรทัด) คุณควรเขียนระหว่างสองแท็ก ตัวอย่างเช่น <td> ชื่อ </td> เซลล์จะแสดง "ชื่อ"

คุณสามารถวางข้อมูลกราฟิกและไฟล์สื่อโดยใช้แท็กพิเศษ - <img>, <audio> และ <video>

เคล็ดลับ

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

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

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