CSS: ออกแบบตาราง ตัวอย่างของการลงทะเบียน

ทำตารางด้วย CSS - บทเรียนที่น่าสนใจและมีความรับผิดชอบ วิธีการที่ธุรกิจนี้ต้อง competently, มีความรู้ในทุกรูปแบบที่เป็นไปได้ นอกจากนี้ยังมีความจำเป็นที่จะมีความรู้สึกของความงามเพื่อไม่ให้ผู้เข้าชมขู่ปิดความคิดสร้างสรรค์ของพวกเขา

ตารางสามารถเปลี่ยนเกือบทุกอย่าง การออกแบบที่สวยงามเกี่ยวข้องกับการใช้ขอบเขตตาราง CSS ออกแบบพื้นหลังโต๊ะพื้นหลังมือถือช่องว่างระหว่างพวกเขาและอื่น ๆ อีกมากมายที่ พิจารณาพื้นฐานที่สุด

ชายแดนตาราง

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

คุณสามารถระบุกรอบด้านนอกสำหรับทั้งตาราง:

ตาราง {ชายแดน: 3PX ของแข็งสีดำ; }

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

TH, td {ชายแดน: สีดำ 3PX;}

ความหนาและสีที่คุณสามารถระบุใด ๆ โปรดทราบว่าขอบเขตจะไม่เป็นสองเท่าเมื่อประกบเซลล์

คำว่าหมายถึงการลงทะเบียนอย่างต่อเนื่องที่เป็นของแข็ง คุณสามารถระบุค่าอื่น ๆ

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

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

ตาราง {border-ด้านบน: 1px ของแข็งสีแดง; }

ดังนั้นคุณสามารถกำหนดกรอบสำหรับด้านบนของตารางเท่านั้น ในทำนองเดียวกันกับบุคคลอื่น ๆ แทนการเขียนเพียงด้านบนขวา, ซ้ายหรือด้านล่าง

ส่วนหัวของตาราง

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

ชื่อนี้จะปรากฏขึ้นในลักษณะเดียวกับที่เป็นมาตรฐานในหนังสือ (เช่น "ตารางที่ 1")

คุณสามารถระบุตำแหน่งของชื่อและสถานที่ให้บริการคำอธิบายภาพด้านข้าง (ด้านบนหรือด้านล่าง) การจัดแนวซ้ายหรือขวาจะถูกกำหนดโดยคุณสมบัติ text-align

ตารางพื้นหลัง

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

สีที่สามารถระบุเป็นชื่อและการเข้ารหัสที่แตกต่างกัน นอกจากนี้คุณสามารถระบุต่อไปนี้:

• ใส - ใส
• สืบทอด - สีเช่นเดียวกับที่ขององค์ประกอบหลัก
• เริ่มต้น - เริ่มต้น

ตัวเลือกที่มีความโปร่งใสสามารถนำมาใช้ในกรณีที่ตารางทั้งหมดในข้อความในไฟล์ CSS ที่จะทำในสีหนึ่ง แต่ในกรณีนี้ไม่มีความจำเป็น

นอกจากนี้พื้นหลังอาจจะเป็นภาพ การทำเช่นนี้ในรูปแบบที่กำหนดคุณสมบัติ background-image เส้นทางที่เป็นเช่นนี้

URL (URL)

เส้นทางไปยังแฟ้มที่อาจเป็นได้ทั้งญาติหรือแน่นอน

เติมความซับซ้อนมากขึ้นสามารถทำได้ด้วยการไล่ระดับสี:

• เชิงเส้นลาด ();
• รัศมีการไล่ระดับสี ();
• การทำซ้ำเชิงเส้นลาด () และการทำซ้ำรัศมีลาด () - ลาดซ้ำแล้วซ้ำอีก

เซลล์พื้นหลัง

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

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

• TR: ชับเด็ก (แม้) { ... } - ระบุ interlaced;
• TR: ชับเด็ก (1) { ... } - บ่งชี้ของคุณสมบัติของแถวโดยเฉพาะอย่างยิ่ง;
• td: ชับเด็ก (แม้) { ... } - ข้อบ่งชี้ของการสลับคอลัมน์;
• td: ชับเด็ก (1) { ... } - ข้อบ่งชี้ของคุณสมบัติของคอลัมน์โดยเฉพาะอย่างยิ่ง

นอกจากลำดับและตัวเลขสามารถระบุได้ - ครั้งแรก (TD: ครั้งแรกที่เด็ก) หรือที่ผ่านมา (td: สุดท้ายเด็ก)

ช่องว่างระหว่างเซลล์

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

เห็นด้วยมันก็ดูไม่ดีมากและไม่สะดวกในการอ่าน ผู้ใช้จะมีระลอกในสายตาเนื่องจากการนี้ ลบช่องว่างเหล่านี้จะสามารถโดยการเขียนเพียงเช่นเส้นในรูปแบบตาราง:

ชายแดนยุบ: การล่มสลาย

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

ชายแดนยุบ: แยกต่างหาก

แต่การกระทำดังกล่าวจะแสดงให้เห็นว่ามีความจำเป็นที่จะแยกเซลล์ ในฐานะที่มันเป็นหุ้นของพวกเขาแสดงให้เห็นคุณสมบัติเพิ่มเติม:

ชายแดนระยะห่าง: 20px

หากคุณต้องการที่จะระบุระยะทางที่แตกต่างกันระหว่างแถวและคอลัมน์ก็แสดงสิ่งที่สอง:

ชายแดนระยะห่าง: 10px20px

ความแตกต่างในเบราว์เซอร์

เก็บไว้ในใจว่าใน CSS ตารางการออกแบบอาจดูแตกต่างกันขึ้นอยู่กับเบราว์เซอร์ ที่ไม่ดีโดยเฉพาะอย่างยิ่งกรณีที่มีรุ่นเก่าที่นวัตกรรมใน CSS ไม่สนับสนุน

ดังกล่าวข้างต้นเป็นตัวอย่างของความหนากรอบไปเป็นค่าดิจิตอล

ตัวอย่างนี้ความหนาของเฟรมสำหรับค่าคงที่

รูปแบบที่ชายแดนยังแตกต่างกันอย่างมาก

ดังนั้นการพัฒนามักจะเห็นผลในเบราว์เซอร์ที่แตกต่างกัน

ใน CSS ตารางการออกแบบแนะนำให้ตรวจสอบชนิดของเบราว์เซอร์ โดยเฉพาะอย่างยิ่งปัญหาใหญ่ที่ใช้จะเป็นผู้ใช้ที่มีรุ่นเก่าของ Internet Explorer

มากนักพัฒนาขั้นสูงสามารถขึ้นอยู่กับเบราว์เซอร์ในการเชื่อมต่อไฟล์ CSS ที่แตกต่างกันอย่างสิ้นเชิง และคนที่จะทำให้การตรวจสอบในแต่ละหรือบางลักษณะเฉพาะ (ชั้น)

ปัญหาส่วนใหญ่เกิดขึ้นจากเงามืด

CSS: ตัวอย่างรูปแบบตาราง

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

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

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

ขอบที่สามารถทำโค้งมน มันดูดีสวย

ข้อสรุป

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

สิ่งที่สำคัญในการออกแบบ - ไม่หักโหมมันมีผลกระทบ ทุกอย่างที่ควรจะทำในปริมาณที่พอเหมาะ ตอนแรกเค้าโครงชอบที่จะทดลองและใช้ความรู้ของพวกเขาทั้งหมดในทันที อันเป็นผลมาจากตารางที่มีคุณสมบัติ oversaturated พยายามหลีกเลี่ยงข้อผิดพลาดเหล่านี้

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