โต๊ะคืออะไร? มันประกอบด้วยเซลล์เซลล์ ในตารางจำนวน <td> ขึ้นอยู่กับจำนวนเซลล์เซลล์ที่ห่อหุ้มในแต่ละแถว <tr>! นอกจากนี้ตารางตารางเริ่มต้นไม่มีสายตารางที่แสดงในเบราว์เซอร์ก่อนที่จะเพิ่มสไตล์ CSS
วิธีการเขียนตารางทั่วไปใน HTML: A. <tr> … </tr>: แถวของตารางมีหลายคู่ของ TR และมีหลายแถว; B. <td> … </td>: เซลล์ของตารางซึ่งมีหลายคู่ของ <td> … </td> ซึ่งหมายความว่ามีหลายคอลัมน์ในแถว; C. <th> … </th>: เซลล์ที่หัวของโต๊ะส่วนหัวของตารางและข้อความเป็นตัวหนาและแสดงอยู่ตรงกลาง D. <ตารางสรุป = ตารางแนะนำข้อความ>/*เนื้อหาของบทสรุปจะไม่แสดงในเบราว์เซอร์ ฟังก์ชั่นของมันคือการเพิ่มความสามารถในการอ่าน (semanticization) ของตารางช่วยให้เครื่องมือค้นหาเข้าใจเนื้อหาตารางได้ดีขึ้นและยังช่วยให้ผู้อ่านหน้าจอช่วยผู้ใช้พิเศษในการอ่านเนื้อหาตารางได้ดีขึ้น แท็ก */ e.caption เพิ่มชื่อเรื่องและสรุปไปยังตารางชื่อเรื่องใช้เพื่ออธิบายเนื้อหาของตารางตำแหน่งการแสดงผลของชื่อเรื่อง: ด้านบนตาราง
<table border = cellpacing = cellpadding => <tr> <th> ส่วนหัว </th> </tr> <tr> <td> data </td> </tr> </table>
<table border = cellpacing = cellpadding = summary => <ption> </section> <tr> <th> วันนี้คือวันศุกร์ </td> </tr> </table>
กลับไปที่หัวข้อขอให้กลับไปที่จุดที่ความแตกต่างระหว่าง CellPadding และ Cellpacing เป็นการเปรียบเทียบระหว่างชุดรูปภาพตารางต่อไปนี้และรหัสการเปลี่ยนเซลล์:
<! doctype html> <html> <head> <meta charset = utf-8> <title> ความแตกต่างในการเดินไปยังเซลล์ในตาราง </title> <style type = text/css> ตาราง {margin-bottom: 50px; } .CESHI {ระยะห่างของชายแดน: 20PX; /*ระบุระยะห่างระหว่างเส้นขอบของเซลล์ที่อยู่ติดกันในตาราง */} </style> </head> <width ตาราง = 600 cellpacing = 0 bordercolor =#333 border = 1> <คำอธิบาย> เซลล์แรก </caption> <tr> <td> ทดสอบ 1 </td> <td> ทดสอบ 2 </td> <td> <คำอธิบาย> เซลล์ที่สอง </section> <tr> <td> ทดสอบ 1 </td> <td> ทดสอบ 2 </td> <td> ทดสอบ 3 </td> </tr> </table> <ความกว้างของตาราง = 600 BorderColor =#333 Border = 1 class = Ceshi> <td> ทดสอบ 3 </td> </tr> </table> </html>การเปรียบเทียบรหัสสองตารางบนมีการตั้งค่าที่แตกต่างกันหนึ่งคือ 0 และอีกอันคือ 20 ผลลัพธ์ที่แสดงคือระยะห่างระหว่างแต่ละเซลล์ในตารางแรกคือ 0 และระยะห่างระหว่างแต่ละเซลล์ในตารางที่สองคือ 20 ขยาย: ตารางที่สองสอดคล้องกับตารางที่สาม แต่ตารางที่สามไม่มีระยะห่างของเซลล์ เราพบว่าระยะห่างชายแดนนี้: 20px; เป็นผลมาจากการเว้นวรรคของเซลล์ = 20 สรุปเช่น: แอตทริบิวต์ระยะห่างของเซลล์ใช้เพื่อระบุช่องว่างระหว่างเซลล์ของตาราง ค่าพารามิเตอร์ของคุณสมบัตินี้คือตัวเลขซึ่งระบุจำนวนจุดพิกเซลที่ครอบครองโดยช่องว่างของเซลล์
<! doctype html> <html> <head> <meta charset = utf-8> <title> ความแตกต่างใน cellpadding ในตาราง </title> <style type = text/css> ตาราง {margin-bottom: 50px; } </style> </head> <body> <width ตาราง = 600px border = 1 bordercolor =#ccc cellpadding = 0> <tr> <th> ฉันเป็นตารางเซลล์ที่มีความสุข </th> <th> ฉันเป็นตารางเซลล์ที่มีความสุข </th> <th> <tr> <th> ฉันเป็นรูปแบบเซลล์ที่มีความสุข </th> <th> ฉันเป็นรูปแบบเซลล์ที่มีความสุข </th> <th> ฉันเป็นรูปแบบเซลล์ที่มีความสุข </th> <th> ฉันเป็นรูปแบบเซลล์ที่มีความสุข </th> </tr> </table> </body> </html>การตัดสินจากผลลัพธ์การทำงานของรหัสข้างต้น: สองตารางมีค่าที่แตกต่างกันของรหัส CellPadding ในตารางแรกคำว่า "ฉันมีความสุขเซลล์" เป็น 0 จากเซลล์ที่อยู่นั่นเป็นเพราะ cellpadding = 0 ถูกตั้งค่า; ในตารางที่สองคำว่า "ฉันมีความสุขเซลล์" อยู่ไกลจากเซลล์ที่อยู่นั่นคือระยะห่างระหว่างเซลล์ที่ฉันมีความสุขเซลล์คือ 20 พิกเซล พูดง่ายๆคือค่าของ cellpadding เท่าไหร่เท่ากับจำนวนช่องว่างที่เหลืออยู่ภายในจากขอบเขตของเซลล์ในตารางและองค์ประกอบในเซลล์จะไม่เข้าช่องว่างเหล่านั้น || โปรดทราบว่าคุณสมบัติ CellPadding ใช้เพื่อระบุขนาดของระยะห่างระหว่างเนื้อหาของเซลล์และขอบเขตของเซลล์ ค่าพารามิเตอร์ของคุณสมบัตินี้ยังเป็นตัวเลขซึ่งระบุจำนวนพิกเซลที่อยู่ในความสูงของระยะห่างระหว่างเนื้อหาของเซลล์และขอบเขตบนและล่างและจำนวนพิกเซลที่อยู่ในความกว้างของระยะห่างระหว่างเนื้อหาของเซลล์และขอบเขตด้านซ้ายและขวา
สรุปเช่น: การเว้นวรรคเซลล์แสดงถึงระยะห่างระหว่างเซลล์การขยายเซลล์แสดงถึงระยะห่างระหว่างปริมาณเซลล์และเส้นขอบ; อดีตเป็นเหมือนมาร์จิ้นหลังเป็นเหมือนการขยาย Nest (เซลล์)-เนื้อหาของตาราง; การเติมรัง (การเติมตาราง) (cellpadding)-หมายถึงระยะทางนอกรังที่ใช้ในการแยกรังและพื้นที่รัง พื้นที่รัง (ระยะห่างของตาราง)-แสดงระยะห่างระหว่างขอบโต๊ะและการเติมรังและยังเป็นระยะห่างระหว่างไส้รังนก
การขยายตัว 1: วิธีการรวมแถวและคอลัมน์ของตาราง? Colspan Cross-Column Merge, Rowspan Cross-Row ผสาน
การแสดงรหัส:
<! doctype html> <html> <head> <meta charset = utf-8> <title> ความแตกต่างระหว่าง colspan และ rowspan </title> <style type = text/css> ตาราง {margin: 0 auto; มาร์จิ้น-ก้น: 50px; TEXT-ALIGN: CENTER; } </style> </head> <body> <width table = 600 cellpadding = 10 cellpacing = 2 border = 1 bordercolor =#ccc> <คำอธิบาย> จอแสดงผลปกติ: หนึ่งแถวและสามคอลัมน์ </caption> <td> <td> พูดอะไรไม่ทราบ </td> <td> Width = 600 CellPadding = 10 cellpacing = 2 border = 1 borderColor =#cc> <Ction> ตอนนี้ฉันควรทำอย่างไรเพื่อแสดงหนึ่งแถวและสองคอลัมน์? Colspan Cross-Column Merge </section> <tr> <td> พูดอะไรบางอย่างไม่ทราบ </td> <td colspan = 2> พูดอะไรบางอย่างไม่รู้ </td> <!-<td> พูดอะไรบางอย่างไม่รู้ </td>-> </tr> - - - - <td> พูดอะไรบางอย่างไม่ทราบ </td> </tr> <tr> <td> พูดอะไรบางอย่างไม่ทราบ </td> <td> พูดอะไรบางอย่างไม่ทราบ </td> <td> พูดอะไรบางอย่างไม่ทราบ </td> </tr> คอลัมน์? Rowspan Cross-Row Merge </section> <tr> <td rowspan = 2> พูดอะไรบางอย่างไม่ทราบ </td> <td> พูดอะไรบางอย่างไม่รู้ </td> </tr> <tr> <!-<td> พูดอะไรบางอย่างไม่ทราบ </td>-> <td>การขยายตัว 2: จะรวมเส้นขอบตารางอย่างไร? การล่มสลายของชายแดน: การล่มสลาย;
<!-รวมเซลล์ตาราง-> <style type = text/css> ตาราง {การล่มสลายของชายแดน: การล่มสลาย; /* การล่มสลายของชายแดน: แยก; * / /*ระบุว่าเส้นขอบแถวและเซลล์ของตารางเข้าร่วมในเส้นขอบเดียวหรือแยกออกจากใน HTML มาตรฐาน */} </style> <width table = 600 cellpadding = 10 cellpacing = 2 border = 1 bordercolor =#ccc> <tbody> <tr> <td> เซลล์ 1 </td> <td> เซลล์ 2 </td> <td> เซลล์ 3 </td> </tbody>ในที่สุดในเบราว์เซอร์โครเมี่ย
/* agent stylesheet* / /* ตาราง {display: table; การล่มสลายของชายแดน: แยก; ระยะห่างระหว่างชายแดน: 2px; สีชายแดน: สีเทา; } * / / * border = 1 ค่าเริ่มต้นเท่ากับเส้นขอบ = 1px border-top-width: 1px; ความกว้างของชายแดนขวา: 1px; ความกว้างของชายแดนด้านล่าง: 1px; ความกว้างของชายแดนซ้าย: 1px; * / /* BorderColor ส่งคืนหรือตั้งค่าสีขอบของวัตถุ BorderColor: W3C - สตริงระบุสีของเส้นขอบขององค์ประกอบ ระบุชื่อสีหรือรหัสสี RGB -นี่คือบทความเกี่ยวกับรายละเอียดของความแตกต่างระหว่าง cesllpacing และ cellpadding ในตาราง สำหรับเนื้อหาที่เกี่ยวข้องมากขึ้นของ cesllpacing และ cellpadding ในตารางโปรดค้นหาบทความก่อนหน้าจาก wulin.com หรือดำเนินการเรียกดูบทความที่เกี่ยวข้องด้านล่าง ฉันหวังว่าทุกคนจะสนับสนุน Wulin.com ในอนาคต!