CSS - ตาราง

บทช่วยสอนนี้จะสอนวิธีตั้งค่าคุณสมบัติต่างๆของตาราง HTML โดยใช้ CSS คุณสามารถตั้งค่าคุณสมบัติของตารางต่อไปนี้ -

  • border-collapse ระบุว่าเบราว์เซอร์ควรควบคุมลักษณะของเส้นขอบที่อยู่ติดกันที่สัมผัสกันหรือไม่หรือว่าแต่ละเซลล์ควรคงรูปแบบไว้

  • border-spacing ระบุความกว้างที่ควรปรากฏระหว่างเซลล์ตาราง

  • caption-sideคำบรรยายถูกนำเสนอในองค์ประกอบ <caption> โดยค่าเริ่มต้นสิ่งเหล่านี้จะแสดงอยู่เหนือตารางในเอกสาร คุณใช้คุณสมบัติด้านคำอธิบายภาพเพื่อควบคุมตำแหน่งของคำอธิบายภาพของตาราง

  • empty-cells ระบุว่าควรแสดงเส้นขอบหรือไม่หากเซลล์ว่าง

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

ตอนนี้เราจะดูวิธีใช้คุณสมบัติเหล่านี้พร้อมตัวอย่าง

คุณสมบัติชายแดนยุบ

สถานที่แห่งนี้สามารถมีสองค่ายุบและแยก ตัวอย่างต่อไปนี้ใช้ทั้งสองค่า -

<html>
   <head>
      <style type = "text/css">
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}
         
         td.a {
            border-style:dotted; 
            border-width:3px; 
            border-color:#000000; 
            padding: 10px;
         }
         td.b {
            border-style:solid; 
            border-width:3px; 
            border-color:#333333; 
            padding:10px;
         }
      </style>
   </head>

   <body>
      <table class = "one">
         <caption>Collapse Border Example</caption>
         <tr><td class = "a"> Cell A Collapse Example</td></tr>
         <tr><td class = "b"> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two">
         <caption>Separate Border Example</caption>
         <tr><td class = "a"> Cell A Separate Example</td></tr>
         <tr><td class = "b"> Cell B Separate Example</td></tr>
      </table>
   </body>
</html>

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

คุณสมบัติระยะห่างชายแดน

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

หากคุณระบุค่าเดียวค่านี้จะใช้กับทั้งเส้นขอบแนวตั้งและแนวนอน หรือคุณสามารถระบุสองค่าในกรณีนี้ค่าแรกหมายถึงระยะห่างแนวนอนและค่าที่สองหมายถึงระยะห่างแนวตั้ง -

NOTE - น่าเสียดายที่คุณสมบัตินี้ใช้ไม่ได้ใน Netscape 7 หรือ IE 6

<style type="text/css">
   /* If you provide one value */
   table.example {border-spacing:10px;}
   /* This is how you can provide two values */
   table.example {border-spacing:10px; 15px;}
</style>

ตอนนี้เรามาแก้ไขตัวอย่างก่อนหน้านี้และดูเอฟเฟกต์ -

<html>
   <head>
      <style type = "text/css">
         table.one {
            border-collapse:separate;
            width:400px;
            border-spacing:10px;
         }
         table.two {
            border-collapse:separate;
            width:400px;
            border-spacing:10px 50px;
         }
      </style>
   </head>

   <body>
   
      <table class = "one" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Collapse Example</td></tr>
         <tr><td> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Separate Example</td></tr>
         <tr><td> Cell B Separate Example</td></tr>
      </table>
      
   </body>
</html>

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

คุณสมบัติด้านคำบรรยาย

คุณสมบัติด้านคำบรรยายช่วยให้คุณระบุตำแหน่งที่ควรวางเนื้อหาขององค์ประกอบ <caption> ให้สัมพันธ์กับตาราง ตารางต่อไปนี้แสดงค่าที่เป็นไปได้

สถานที่แห่งนี้สามารถมีหนึ่งในค่าที่สี่ด้านบนด้านล่างด้านซ้ายหรือขวา ตัวอย่างต่อไปนี้ใช้แต่ละค่า

NOTE - คุณสมบัติเหล่านี้อาจใช้ไม่ได้กับเบราว์เซอร์ IE ของคุณ

<html>
   <head>
      <style type = "text/css">
         caption.top {caption-side:top}
         caption.bottom {caption-side:bottom}
         caption.left {caption-side:left}
         caption.right {caption-side:right}
      </style>
   </head>

   <body>
   
      <table style = "width:400px; border:1px solid black;">
         <caption class = "top">
            This caption will appear at the top
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "bottom">
            This caption will appear at the bottom
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "left">
            This caption will appear at the left
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "right">
            This caption will appear at the right
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      
   </body>
</html>

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

คุณสมบัติเซลล์ว่าง

คุณสมบัติเซลล์ว่างระบุว่าเซลล์ที่ไม่มีเนื้อหาใด ๆ ควรมีเส้นขอบปรากฏขึ้น

สถานที่แห่งนี้สามารถมีหนึ่งในสามของค่า - แสดงซ่อนหรือมรดก

นี่คือคุณสมบัติเซลล์ว่างที่ใช้เพื่อซ่อนเส้นขอบของเซลล์ว่างในองค์ประกอบ <table>

<html>
   <head>
      <style type = "text/css">
         table.empty {
            width:350px;
            border-collapse:separate;
            empty-cells:hide;
         }
         td.empty {
            padding:5px;
            border-style:solid;
            border-width:1px;
            border-color:#999999;
         }
      </style>
   </head>

   <body>
   
      <table class = "empty">
         <tr>
            <th></th>
            <th>Title one</th>
            <th>Title two</th>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty">value</td>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty"></td>
         </tr>
      </table>
      
   </body>
</html>

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

คุณสมบัติเค้าโครงตาราง

คุณสมบัติเค้าโครงตารางควรจะช่วยคุณควบคุมวิธีที่เบราว์เซอร์ควรแสดงผลหรือจัดวางตาราง

สถานที่แห่งนี้สามารถมีหนึ่งในสามของค่า: การแก้ไขอัตโนมัติหรือมรดก

ตัวอย่างต่อไปนี้แสดงความแตกต่างระหว่างคุณสมบัติเหล่านี้

NOTE - คุณสมบัตินี้ไม่ได้รับการสนับสนุนโดยเบราว์เซอร์จำนวนมากดังนั้นอย่าพึ่งพาคุณสมบัตินี้

<html>
   <head>
      <style type = "text/css">
         table.auto {
            table-layout: auto
         }
         table.fixed {
            table-layout: fixed
         }
      </style>
   </head>
   
   <body>
   
      <table class = "auto" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
      <br />
      
      <table class = "fixed" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
   
   </body>
</html>

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