วิธีง่ายๆในการกำหนดตารางโดยใช้ CSS

หนึ่งบรรทัดของรหัสคือทั้งหมดที่คุณต้องการให้ตรงกลางตาราง

Cascading Style Sheets (CSS) เป็นภาษาสไตล์ชีทที่ใช้บ่อยที่สุดในการกำหนดรูปแบบภาพของหน้าเว็บที่เขียนด้วย HTML และ XHTML คุณอาจยังใหม่กับการออกแบบเว็บหรือ CSS และมีคำถามเกี่ยวกับวิธีจัดตารางบนหน้าเว็บ นอกจากนี้คุณยังอาจเป็นนักออกแบบที่มีประสบการณ์ซึ่งกำลังสับสนเกี่ยวกับวิธีใช้เทคนิคนี้ในขณะนี้เนื่องจากแท็ก CENTER และแอตทริบิวต์ "center" ถูกเลิกใช้ในแท็ก TABLE ด้วย CSS การวางตารางกลางไว้บนหน้าเว็บไม่ยากเลย

ใช้ CSS เพื่อจัดตำแหน่งตาราง

คุณสามารถเพิ่มบรรทัดเดียวในสไตล์ชีต CSS ของคุณเพื่อจัดวางตารางทั้งหมดในแนวนอน:

ตาราง {margin: auto; }

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

เมื่อคุณวางตารางในหน้าเว็บคุณจะวางไว้ภายใน องค์ประกอบระดับบล็อก เช่น BODY, P, BLOCKQUOTE หรือ DIV คุณสามารถจัดตำแหน่งกึ่งกลางของตารางภายในส่วนดังกล่าวโดยใช้ margin: auto; สไตล์ ซึ่งจะบอกให้เบราว์เซอร์ทำขอบกระดาษทุกด้านของตารางให้เท่ากันวางตำแหน่งตรงกลางของหน้าเว็บ

เว็บเบราเซอร์เก่าบางรุ่นไม่สนับสนุนวิธีนี้

หากไซต์ของคุณต้องสนับสนุนเว็บเบราเซอร์ที่เก่ากว่าเช่น Internet Explorer 6 คุณจำเป็นต้องใช้ align = "center" หรือแท็ก CENTER ต่อไปตรงกลางตารางของคุณ นั่นเป็นเรื่องของภาวะแทรกซ้อนที่คุณจะได้รับเมื่อตั้งศูนย์กลางตารางไว้ในหน้าเว็บ การใช้เทคนิคนี้ทำได้ง่ายและสามารถใช้งานได้ภายในไม่กี่นาที