CSS - เลย์เอาต์

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

รายการต่อไปนี้รวบรวมข้อดีและข้อเสียของเทคโนโลยีทั้งสอง -

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

แต่ข้อโต้แย้งเหล่านี้สามารถย้อนกลับได้ -

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

สุดท้ายนี้เราขอแนะนำให้คุณใช้เทคโนโลยีใดก็ตามที่เหมาะสมกับคุณและใช้สิ่งที่คุณรู้หรือสิ่งที่นำเสนอในเอกสารของคุณอย่างดีที่สุด

CSS ยังมีคุณสมบัติเค้าโครงตารางเพื่อให้ตารางของคุณโหลดเร็วขึ้นมาก ต่อไปนี้เป็นตัวอย่าง -

<table style = "table-layout:fixed;width:600px;">
   <tr height = "30">
      <td width = "150">CSS table layout cell 1</td>
      <td width = "200">CSS table layout cell 2</td>
      <td width = "250">CSS table layout cell 3</td>
   </tr>
</table>

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

ตัวอย่างเค้าโครงคอลัมน์

นี่คือขั้นตอนในการสร้าง Column Layout โดยใช้ CSS -

กำหนดระยะขอบและระยะห่างของเอกสารฉบับสมบูรณ์ดังนี้ -

<style style = "text/css">
   <!--
      body {
         margin:9px 9px 0 9px;
         padding:0;
         background:#FFF;
      }
   -->
</style>

ตอนนี้เราจะกำหนดคอลัมน์ด้วยสีเหลืองและหลังจากนั้นเราจะแนบกฎนี้กับ <div> -

<style style = "text/css">
   <!--
      #level0 {
         background:#FC0;
      }
   -->
</style>

ถึงจุดนี้เราจะมีเอกสารที่มีตัวสีเหลืองดังนั้นให้เรากำหนดส่วนอื่นในระดับ 0 -

<style style = "text/css">
   <!--
      #level1 {
         margin-left:143px;
         padding-left:9px;
         background:#FFF;
      }
   -->
</style>

ตอนนี้เราจะซ้อนอีกหนึ่งแผนกใน level1 และเราจะเปลี่ยนแค่สีพื้นหลัง -

<style style = "text/css">
   <!--
      #level2 {
         background:#FFF3AC;
      }
   -->
</style>

สุดท้ายเราจะใช้เทคนิคเดียวกันซ้อนการแบ่งระดับ 3 ภายใน level2 เพื่อรับเค้าโครงภาพสำหรับคอลัมน์ด้านขวา -

<style style = "text/css">
   <!--
      #level3 {
         margin-right:143px;
         padding-right:9px;
         background:#FFF;
      }
      #main {
         background:#CCC;
      }
   -->
</style>

กรอกซอร์สโค้ดดังนี้ -

<style style = "text/css">
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }
	
   #level0 {background:#FC0;}
	
   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }
	
   #level2 {background:#FFF3AC;}
	
   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }
	
   #main {background:#CCC;}
</style>
<body>
   <div id = "level0">
      <div id = "level1">
         <div id = "level2">
            <div id = "level3">
               <div id = "main">
                  Final Content goes here...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

ในทำนองเดียวกันคุณสามารถเพิ่มแถบนำทางด้านบนหรือแถบโฆษณาที่ด้านบนสุดของหน้า

มันจะให้ผลลัพธ์ดังต่อไปนี้ -