รูปแบบ HTML

เค้าโครงหน้าเพื่อปรับปรุงลักษณะของเว็บไซต์ที่มีความสำคัญมาก

โปรดออกแบบรูปแบบหน้าเว็บของคุณ

ตัวอย่างออนไลน์

เค้าโครงหน้าโดยใช้ <div>
วิธีการใช้ <div> เค้าโครง

รูปแบบการใช้งานหน้า <table> องค์ประกอบ
วิธีการใช้ <table> องค์ประกอบรูปแบบ

รูปแบบเว็บไซต์

เว็บไซต์ส่วนใหญ่จะเนื้อหาลงในส่วนใหญ่ของคอลัมน์ (เช่นนิตยสารหรือหนังสือพิมพ์ที่)

เว็บไซต์ส่วนใหญ่สามารถใช้ <div> หรือ <table> องค์ประกอบในการสร้างหลายคอลัมน์ CSS จะใช้ในการวางตำแหน่งขององค์ประกอบหรือสร้างพื้นหลังที่มีสีสันและลักษณะของหน้า

	แม้ว่าเราจะสามารถใช้แท็ก HTML ตารางในการออกแบบรูปแบบที่สวยงาม แต่แท็กตารางจะไม่แนะนำให้ใช้เป็นเครื่องมือในการจัดวาง - ไม่ได้เป็นเครื่องมือรูปแบบตาราง

เค้าโครง HTML - การใช้ <div>

ส่วน div เป็นองค์ประกอบระดับบล็อกที่ใช้สำหรับการจัดกลุ่มองค์ประกอบ HTML

ตัวอย่างต่อไปนี้ใช้ห้า div องค์ประกอบในการสร้างรูปแบบหลายคอลัมน์:

รหัส HTML ข้างต้นก่อให้เกิดผลลัพธ์ต่อไปนี้:

รูปแบบ HTML - การใช้ตาราง

ใช้ภาษา HTML <table> แท็กคือการสร้างรูปแบบในลักษณะที่ง่าย

เว็บไซต์ส่วนใหญ่สามารถใช้ <div> หรือ <table> องค์ประกอบในการสร้างหลายคอลัมน์ CSS จะใช้ในการวางตำแหน่งขององค์ประกอบหรือสร้างพื้นหลังที่มีสีสันและลักษณะของหน้า

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

ตัวอย่างต่อไปนี้ใช้สามแถวของตารางที่สอง - เป็นครั้งแรกและบรรทัดสุดท้ายใช้แอตทริบิวต์ colspan จะครอบคลุมที่สอง:

รหัส HTML ข้างต้นก่อให้เกิดผลลัพธ์ต่อไปนี้:

HTML Layout - เคล็ดลับที่เป็นประโยชน์

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

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

แท็กรูปแบบ HTML