วิธีสร้างเฟรมสำหรับตาราง html

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

การสร้างเฟรมโดยใช้แอตทริบิวต์

โดยทั่วไปแล้วไม่ใช่คุณลักษณะที่ขยายได้ ฉันจะบอกว่าไม่มีความหมาย คุณลักษณะ border กำหนดความหนาของเส้นขอบก็แค่นั้นแหละ ด้านล่างนี้เป็นตัวอย่าง:






เซลล์ 1 เซลล์ 2

วิธีง่ายๆ ในการสร้างเส้นขอบรอบๆ องค์ประกอบ

ฉันพูดทันที บันทึกโดยละเอียดฉันจะไม่ให้มันเพราะว่า ทรัพย์สินชายแดนจะมีบทเรียนใหญ่ในอนาคตและอาจจะมากกว่านั้นด้วย เส้นขอบคุณสมบัติสากลสามารถกำหนดความหนา สไตล์ และสีของเส้นขอบ (เฟรม) ได้ในคราวเดียว ความหนาสามารถเป็นได้สีเส้นขอบถูกตั้งค่าในรูปแบบเลขฐานสิบหก รูปแบบ RGBและ คำหลัก(แดง ดำ ฯลฯ) มีสไตล์อะไรบ้างรูปภาพด้านล่าง (ภาพที่ถ่ายจากเว็บไซต์ htmlbook.ru) และตัวอย่างต่อไปนี้:

ทีดี(
เส้นขอบ: 5px ทึบ #CCCCCC;
}

โครงซ้าย ขวา ล่าง และบน

เมื่อใช้ กรอบชายแดนสร้างขึ้นจากทุกด้าน แต่เราสามารถควบคุมได้ว่าจะต้องวาดเฟรมจากด้านใด ขอบซ้าย ขอบซ้าย: 2px สีดำทึบ ; เส้นขอบขวา เส้นขอบขวา: 1px จุด #FF0000 ; ขอบล่าง: 10px solid #000000 ; ขอบบน: 1px สีเขียวทึบ อย่างที่คุณเห็นพวกเขาไม่จำเป็นต้องมี ค่าเดียวกันและคุณยังสามารถรวมเข้าด้วยกันได้นั่นคือเขียนหลายอย่างเช่นเส้นขอบซ้ายและขวา (เฟรม) เป็นต้น ทั้งหมด. ฉันจะไม่ไปต่อ นี่คือหัวข้อของบทเรียนอื่น ตัวอย่าง:

โต๊ะ (
เส้นขอบซ้าย: 5px ทึบ #CCCCCC;
เส้นขอบขวา: 5px ทึบ #CCCCCC;
}
ทีดี(
ขอบบน: 5px ทึบ #CCCCCC;
ขอบล่าง: 5px ทึบ #CCCCCC;
}

มุมโค้งมน

ตอนนี้เรามาพูดถึงหัวข้อ "ความงาม" และการใช้งานกันสักหน่อย เพื่อให้ขอบของเส้นขอบโค้งมน มีคุณสมบัติ border-radius นี่เป็นบทเรียนแยกต่างหาก เราจะไม่ลงรายละเอียดมากเกินไป เขายอมรับ ปริมาณที่แตกต่างกันข้อโต้แย้ง เราจะเขียนหนึ่งอาร์กิวเมนต์ (เฉพาะในบทเรียนนี้) และถ้าเราเขียนค่าเดียว ก็จะมีการปัดเศษเท่ากันทุกด้าน (มุม) ค่าสามารถอยู่ใน "หน่วยวัด" ที่แตกต่างกัน เช่น พิกเซลและเปอร์เซ็นต์ ด้านล่างนี้เป็นตัวอย่าง:

ทีดี(
เส้นขอบ: 5px ทึบ #CCCCCC;
รัศมีเส้นขอบ: 10px;
}

ขอบหรือช่องว่างภายใน

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

ทีดี(
เส้นขอบ: 5px ทึบ #CCCCCC;
รัศมีเส้นขอบ: 10px;
ช่องว่างภายใน: 10px;

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

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

การจัดรูปแบบตาราง

1. เส้นขอบตาราง

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

ตาราง ( ยุบขอบ: ยุบ; /*ลบช่องว่างระหว่างเซลล์*/ เส้นขอบ: 1px สีเทาทึบ; /*กำหนดเส้นขอบด้านนอกสำหรับตาราง สีเทาหนา 1px*/ )

เส้นขอบเซลล์ส่วนหัวแต่ละคอลัมน์ระบุไว้สำหรับองค์ประกอบที่ th:

Th (เส้นขอบ: 1px สีเทาทึบ;)

เส้นขอบเซลล์เนื้อความของตารางถูกกำหนดไว้สำหรับองค์ประกอบ td:

Td (เส้นขอบ: 1px สีเทาทึบ;)

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

Th, td (เส้นขอบ: 1px สีเทาทึบ;)

คุณสามารถเน้นขอบด้านนอกของตารางได้โดยเพิ่มความกว้าง:

ตาราง (เส้นขอบ: 3px สีเทาทึบ;)

ขอบเขตสามารถกำหนดได้บางส่วน:

/* ตั้งค่าเส้นขอบสีเทาด้านนอกความหนา 3px สำหรับตาราง */ ตาราง (เส้นขอบด้านบน: สีเทาทึบ 3px; ) /* ตั้งค่าเส้นขอบสีเทาความหนา 1px สำหรับเซลล์เนื้อหาของตาราง */ td (เส้นขอบด้านล่าง: 1px ทึบ สีเทา;)

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับคุณสมบัติชายแดน

2. วิธีกำหนดความกว้างและความสูงของตาราง

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

ความกว้างของตารางและคอลัมน์ถูกตั้งค่าโดยใช้คุณสมบัติความกว้าง หากระบุตาราง (ความกว้าง: 100%;) สำหรับตาราง ความกว้างของตารางจะเท่ากับความกว้างของบล็อกคอนเทนเนอร์ที่ตารางนั้นตั้งอยู่

ความกว้างของตารางและคอลัมน์มักจะระบุเป็น px หรือ % ตัวอย่างเช่น:

ตาราง (กว้าง: 600px;) th (กว้าง: 20%;) td:ลูกคนแรก (กว้าง: 30%;)

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

Th, td (ช่องว่างภายใน: 10px 15px;)

3. วิธีการตั้งค่าพื้นหลังตาราง

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

4. คอลัมน์ตาราง

แบบอย่าง ตาราง CSSเน้นไปที่เส้น (แถว) ที่เกิดขึ้นโดยใช้แท็กเป็นหลัก

- ในทางปฏิบัติมีหลายกรณีที่จำเป็น การจัดรูปแบบพิเศษคอลัมน์ ซึ่งสามารถทำได้ด้วยวิธีต่อไปนี้:

ใช้แท็ก

คุณสามารถตั้งค่าพื้นหลังสำหรับคอลัมน์จำนวนเท่าใดก็ได้

การใช้ตารางตัวเลือก td:first-child , ตาราง td:last-child คุณสามารถตั้งค่าสไตล์สำหรับคอลัมน์แรกหรือคอลัมน์สุดท้ายของตารางได้ (ยกเว้นเซลล์แรกของส่วนหัวของตาราง)

การใช้ตัวเลือกตาราง td:nth-child (กฎการเลือกคอลัมน์) คุณสามารถตั้งค่าสไตล์สำหรับคอลัมน์ตารางใดก็ได้

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับตัวเลือก CSS

5. วิธีการเพิ่มชื่อตาราง

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

...
ตารางที่ 1
บริษัท ไตรมาสที่ 1 ไตรมาสที่ 2 ไตรมาสที่ 3 ไตรมาสที่ 4
คำบรรยายภาพ (ด้านคำบรรยาย: ด้านล่าง; การจัดข้อความ: ขวา; การขยาย: 10px 0; ขนาดตัวอักษร: 14px; ) ข้าว. 2. ตัวอย่างการแสดงส่วนหัวใต้ตาราง

6. วิธีลบช่องว่างระหว่างเฟรมเซลล์

ตามค่าเริ่มต้น เฟรมเซลล์ของตารางจะถูกคั่นด้วยช่องว่างขนาดเล็ก หากคุณตั้งค่า border-collapse:ยุบ สำหรับตาราง ช่องว่างจะถูกลบออก ทรัพย์สินเป็นมรดก

ไวยากรณ์

ตาราง (ยุบขอบ: ยุบ;)
ข้าว. 3. ตัวอย่างตารางที่มีการผสานและแยกเฟรมเซลล์

7. วิธีเพิ่มช่องว่างระหว่างเฟรมเซลล์

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

ไวยากรณ์

ตาราง (ยุบเส้นขอบ: แยก; ระยะห่างชายแดน: 10px 20px;) ตาราง (ยุบเส้นขอบ: แยก; ระยะห่างชายแดน: 10px;) ข้าว. 4. ตัวอย่างตารางที่มีช่องว่างเพิ่มขึ้นระหว่างเฟรมเซลล์

8. วิธีซ่อนเซลล์ตารางว่าง

คุณสมบัติเซลล์ว่างซ่อนหรือแสดงเซลล์ว่าง มีผลกับเซลล์ที่ไม่มีเนื้อหาใดๆ เท่านั้น หากเซลล์ถูกตั้งค่าเป็นพื้นหลังและตารางถูกตั้งค่าเป็นตาราง (border-collapse:ยุบ;) เซลล์จะไม่ถูกซ่อน สืบทอดมา

บริษัท ไตรมาสที่ 1 ไตรมาสที่ 2 ไตรมาสที่ 3
ไมโครซอฟต์ 20.3 30.5
Google 50.2 40.63 45.23
ตาราง ( เส้นขอบ: 1px solid #69c; border-ยุบ: แยก; เซลล์ว่าง: ซ่อน; ) th, td (เส้นขอบ: 2px solid #69c;) ข้าว. 5. ตัวอย่างการซ่อน เซลล์ว่างตาราง

9. เค้าโครงตารางโดยใช้คุณสมบัติ table-layout

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

ไวยากรณ์

ตาราง (เค้าโครงตาราง: แก้ไขแล้ว;)

10. เค้าโครงตารางที่ดีที่สุด

1. ความเรียบง่ายในแนวนอน

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

พนักงานเงินเดือนโบนัสหัวหน้างาน
สตีเฟน ซี. ค็อกซ์$300$50บ๊อบ
โจเซฟิน ตัน$150-แอนนี่
จอยซ์ หมิง$200$35แอนดี้
เจมส์ เอ. เพนเทล$175$25แอนนี่
ตาราง ( ตระกูลแบบอักษร: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; ขนาดตัวอักษร: 14px; พื้นหลัง: สีขาว; ความกว้างสูงสุด: 70%; ความกว้าง: 70%; การยุบขอบ: ยุบ; ข้อความ -จัดตำแหน่ง: ซ้าย; ) th ( น้ำหนักแบบอักษร: ปกติ; สี: #039; ขอบล่าง: 2px ทึบ #6678b1; การขยาย: 10px 8px; ) td ( สี: #669; การขยาย: 9px 8px; การเปลี่ยนแปลง: .3s เชิงเส้น; ) tr:โฮเวอร์ td (สี: #6699ff;)

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

Td ( border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; )/*โค้ดที่เหลือเป็นไปตามตัวอย่างด้านบน*/

การเพิ่มเอฟเฟกต์ :hover ให้กับองค์ประกอบ tr จะทำให้ตารางที่ออกแบบในสไตล์มินิมอลอ่านง่ายขึ้น เมื่อคุณวางเมาส์เหนือเซลล์ เซลล์ที่เหลือในแถวเดียวกันจะถูกไฮไลต์พร้อมกัน ทำให้ง่ายต่อการติดตามข้อมูลหากตารางมีหลายคอลัมน์

Th ( น้ำหนักแบบอักษร: ปกติ; สี: #039; การขยาย: 10px 15px; ) td ( สี: #669; ขอบด้านบน: 1px solid #e8edff; การขยาย: 10px 15px; ) tr:hover td (พื้นหลัง: #e8edff ;)

2. ความเรียบง่ายในแนวตั้ง

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

Th ( น้ำหนักแบบอักษร: ปกติ; ขอบล่าง: 2px solid #6678b1; ขอบขวา: 30px solid #fff; ขอบซ้าย: 30px solid #fff; สี: #039; padding: 8px 2px; ) td ( border- ขวา: 30px ทึบ #fff; ขอบซ้าย: 30px ทึบ #fff; สี: #669; การขยาย: 12px 2px )

3.แบบกล่อง

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

Th ( ขนาดตัวอักษร: 13px; น้ำหนักตัวอักษร: ปกติ; พื้นหลัง: #b9c9fe; ขอบบน: 4px solid #aabcfe; ขอบล่าง: 1px solid #fff; สี: #039; ช่องว่างภายใน: 8px; ) td ( พื้นหลัง : #e8edff; border-bottom: 1px solid #fff; border-top: 1px solid transparent; tr:hover td (พื้นหลัง: #ccddff;)

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

ตาราง ( ตระกูลฟอนต์: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; ขนาดตัวอักษร: 14px; ความกว้างสูงสุด: 70%; ความกว้าง: 70%; การจัดแนวข้อความ: กึ่งกลาง; การยุบขอบ: ยุบ ; ขอบบน: 7px ทึบ #9baff1; เส้นขอบล่าง: 7px ทึบ #9baff1; ทึบ #9baff1; สี: #039; ขยาย: 8px; ) td ( พื้นหลัง: #e8edff; เส้นขอบขวา: 1px ทึบ #aabcfe; เส้นขอบซ้าย: 1px ทึบ #aabcfe; สี: #669; ขยาย: 8px ; )

4. ม้าลายแนวนอน

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

Th ( น้ำหนักแบบอักษร: ปกติ; สี: #039; การขยาย: 10px 15px; ) td ( สี: #669; ขอบด้านบน: 1px solid #e8edff; การขยาย: 10px 15px; ) tr:nth-child(2n) ( พื้นหลัง: #e8edff;)

5. สไตล์หนังสือพิมพ์

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

ตาราง (เส้นขอบ: 1px solid #69c;) th ( น้ำหนักแบบอักษร: ปกติ; สี: #039; ขอบล่าง: 1px ประ #69c; การขยาย: 12px 17px; ) td ( สี: #669; การขยาย: 7px 17px; ) tr:โฮเวอร์ td (พื้นหลัง: #ccddff;)

ตาราง (เส้นขอบ: 1px solid #69c;) th ( น้ำหนักแบบอักษร: ปกติ; สี: #039; การขยาย: 10px; ) td ( สี: #669; เส้นขอบด้านบน: 1px ประ #fff; การขยาย: 10px; พื้นหลัง: #ccddff; ) tr:โฮเวอร์ td (พื้นหลัง: #99bcff;)

ตาราง (เส้นขอบ: 1px solid #6cf;) th ( font-weight: ปกติ; ขนาดตัวอักษร: 13px; สี: #039; การแปลงข้อความ: ตัวพิมพ์ใหญ่; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; ขอบซ้าย: 1px solid #0865c2; ขอบล่าง: 1px solid #fff;

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

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

Jpg") ไม่ทำซ้ำ ตำแหน่งพื้นหลัง: 100% 55px; ) th ( น้ำหนักแบบอักษร: ปกติ; สี: #339; การขยาย: 10px 12px; ) td ( พื้นหลัง: url("https://site/images/ back..png"); พื้นหลัง: โปร่งใส; )

เฟรม (พารามิเตอร์บล็อก)

ค่าของคุณสมบัติเหล่านี้ใช้เพื่อกำหนดลักษณะของพื้นที่รอบ ๆ องค์ประกอบ
สามารถใช้กับสัญลักษณ์ รูปภาพ ฯลฯ

ตัวเลือก ความหมาย คำอธิบาย
ขอบด้านบนสี
เส้นขอบขวาสี
ขอบซ้ายสี
ขอบล่างสี
เส้นขอบสี 		สี
(ไม่มีสี
ค่าเริ่มต้น)		 กำหนดสีของกรอบทั้งสี่ด้าน หากคุณแทนที่สีด้วย URL ของรูปภาพ สีนั้นจะทำซ้ำเพื่อสร้างกรอบ
สไตล์เส้นขอบด้านบน
สไตล์เส้นขอบขวา
สไตล์เส้นขอบซ้าย
สไตล์เส้นขอบด้านล่าง
สไตล์เส้นขอบ 		ไม่มี (ค่าเริ่มต้น)
แข็ง
สองเท่า
ร่อง
สันเขา
สิ่งที่ใส่เข้าไป
เริ่มแรก		 กำหนดลักษณะของกรอบทั้งสี่ด้าน
ขอบด้านบน
เส้นขอบขวา
ขอบซ้าย
ขอบล่าง
ชายแดน 		กรอบ_ความกว้าง,
กรอบ_สไตล์,
สี

(ค่าเริ่มต้น:
ปานกลาง ไม่มี ไม่มีสี)

 กำหนดคุณสมบัติของกรอบทั้งสี่ด้าน ทำงานเหมือนกับคุณสมบัติการเติม (ดูด้านล่าง) ยกเว้นว่ามองเห็นเส้นขอบได้

frame_widthจะปานกลาง บาง หรือหนา หรือระบุเป็นหน่วยก็ได้
frame_styleอาจมี ไม่มีค่าเลยหรือแข็ง

การโต้แย้ง สีใช้เพื่อกำหนดสีเติมสำหรับพื้นหลังขององค์ประกอบในขณะที่กำลังโหลด รวมถึงด้านหลังส่วนที่โปร่งใสขององค์ประกอบ หากคุณส่งที่อยู่รูปภาพแทน รูปแบบจะถูกทำซ้ำโดยเติมเต็มโครงร่างของเฟรม
เส้นขอบด้านบนกว้าง
เส้นขอบขวาความกว้าง
เส้นขอบซ้ายความกว้าง
เส้นขอบด้านล่างกว้าง
ความกว้างของเส้นขอบ 		บาง
ปานกลาง (ค่าเริ่มต้น)
หนา
ความยาว		 กำหนดความกว้างของเส้นขอบรอบๆ องค์ประกอบ แต่ละด้านสามารถระบุด้วยพารามิเตอร์ที่เกี่ยวข้องได้ คุณสามารถแทนที่การตั้งค่าคุณสมบัติแต่ละรายการสี่รายการด้วยการตั้งค่าคุณสมบัติเดียวได้ ความกว้างของเส้นขอบเช่นเดียวกับคุณสมบัติการเยื้อง ระยะขอบ.
ซิไอพี ตรง (/บน/ขวา/ล่าง/ซ้าย/)
อัตโนมัติ (ค่าเริ่มต้น)		 กำหนดจำนวนองค์ประกอบที่มองเห็นได้ สิ่งใดก็ตามที่อยู่นอกพื้นที่ที่ระบุโดยพารามิเตอร์นี้ไม่สามารถมองเห็นได้
แสดง "", ไม่มี
"" (ค่าเริ่มต้น)		 การตั้งค่านี้ระบุว่าจะแสดงองค์ประกอบหรือไม่
ลอย ไม่มี (ค่าเริ่มต้น)
ซ้าย
ขวา		 ระบุว่าองค์ประกอบล้อมรอบองค์ประกอบอื่นๆ ไปทางซ้ายหรือขวา แทนที่จะวางไว้ข้างใต้ สนับสนุนโดยแท็ก
, ...
ความสูง อัตโนมัติ (ค่าเริ่มต้น)
ความยาว		 กำหนดความสูงขององค์ประกอบและวัดหากจำเป็น ค่าจะถูกส่งกลับเป็นสตริงซึ่งรวมถึงหน่วย (px, % ฯลฯ) เพื่อรับ ค่าตัวเลขใช้คุณสมบัติ posHeight
ซ้าย อัตโนมัติ (ค่าเริ่มต้น)
ความยาว
ความสนใจ		 พวกเขาตั้งค่าพิกัดแนวนอนขององค์ประกอบเพื่อให้คุณติดตั้งและย้ายองค์ประกอบได้อย่างถูกต้อง ค่าจะถูกส่งกลับเป็นสตริงซึ่งรวมถึงหน่วย (px, % ฯลฯ) หากต้องการรับค่าเป็นตัวเลข ให้ใช้คุณสมบัติ posLeft


ตัวอย่างที่ 1:
เส้นนี้ขีดเส้นใต้ด้วยเส้นประตัวอย่างที่ 2: เฟรมประเภทต่างๆ

1. ไม่มี -ไม่มีเส้นขอบ (เส้นขอบ:ไม่มี;)

2. แข็ง -มีเส้นขอบ (เส้นขอบ: 1px ทึบ;)




ตัวอย่างที่ 4: กรอบที่มีมุมมน


- วี การคืนภาษี;
- ใบรับรอง 2-NDFL;

เอกสารที่ระบุไว้ทั้งหมดระบุ 11 รหัสหลัก OKTMO แทนรหัส OKATO ที่ใช้ก่อนหน้านี้

#org
{
ความกว้าง: 80%;
ขอบด้านบน:2em;
ขอบซ้าย: อัตโนมัติ;
ขอบขวา: อัตโนมัติ;
รัศมีเส้นขอบ: 10px 10px;
-moz-border-รัศมี: 10px 10px;
-webkit-เส้นขอบ-รัศมี: 10px 10px;
การขยาย: 15px 20px 15px 80px;
ระยะขอบ: 0px 0px 0px 0px;
-webkit-box-shadow: 2px 2px 3px #999;
-moz-box-shadow: 2px 2px 3px #999;
/*IE แฮ็คความสูงขั้นต่ำ*/
ความสูงขั้นต่ำ:40px;
ความสูง:อัตโนมัติ !สำคัญ;
ความสูง:40px;
ล้น: มองเห็นได้;

ตำแหน่ง:ญาติ;
ด้านล่าง:6px;
ขวา: 6px;
เส้นขอบ: 1px ทึบ #7e5a25;
/*กำหนดตำแหน่งของ ภาพพื้นหลัง*/
ตำแหน่งพื้นหลัง: 20px 50%;
พื้นหลังซ้ำ: ไม่ซ้ำ;
การจัดแนวข้อความ: จัดชิดขอบ;
ขนาดตัวอักษร: 0.9em;

สีพื้นหลัง: #e8e3d4;
ภาพพื้นหลัง: url(baba.gif);
}


ตั้งแต่วันที่ 1 มกราคม 2014 รหัส OKTMO ใหม่จะระบุเป็น:
- ในการคืนภาษี
- ใบรับรอง 2-NDFL;
- คำสั่งจ่ายเงิน (ฟิลด์ 105)
- ใบเสร็จรับเงินเพื่อชำระภาษี ค่าธรรมเนียม อากร แบบ ภ.ง.ด.4

เอกสารที่แสดงทั้งหมดระบุรหัส OKTMO 11 หลัก แทนที่จะเป็นรหัส OKATO ที่ใช้ก่อนหน้านี้

ตัวอย่างที่ 5: เฟรมได้รับการออกแบบโดยใช้ตารางที่ซ้อนกัน

ซูโวรอฟ เอ.วี.
ตารางที่ซ้อนกัน


รูปภาพ




ตารางที่ 1
ขอบสีดำแคบ (5px) พารามิเตอร์ตาราง:
  • ตาราง -> bgcolor=#000000 style="border:2px solid #a3852f"
  • td ---> style = "ช่องว่างภายใน: 5px"
ตัวอย่างที่ 6: กรอบแนวตั้ง

ความกว้างและความสูง องค์ประกอบบล็อก

คุณสมบัติซีเอสเอส ความกว้างและ ความสูง- กำหนดความกว้างและความสูงขององค์ประกอบบล็อก
ความกว้างและความสูงขององค์ประกอบสามารถตั้งค่าได้ด้วยวิธีต่อไปนี้:

  • อัตโนมัติ- ขนาดขององค์ประกอบจะถูกกำหนดโดยเนื้อหา (ค่าเริ่มต้น)
  • % - ขนาดขององค์ประกอบถูกกำหนดเป็นเปอร์เซ็นต์ของความสูง/ความกว้างขององค์ประกอบหลัก
  • พิกเซล- ขนาดองค์ประกอบระบุเป็นพิกเซลหรือหน่วยการวัดอื่นๆ ที่ยอมรับใน CSS
ตัวอย่าง:
บล็อก 1

บล็อก 2

บล็อก 3
การจัดการเนื้อหาองค์ประกอบ

จะทำอย่างไรกับเนื้อหาขององค์ประกอบถ้ามันเกินขนาด?

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

คุณสมบัติ ล้นอาจมี ค่าต่อไปนี้:

  • มองเห็นได้- องค์ประกอบถูกยืดออกตามขนาดที่ต้องการ (ค่าเริ่มต้น)
  • ที่ซ่อนอยู่- เนื้อหาขององค์ประกอบจะ "ถูกตัดออก" เท่านั้นที่มองเห็นได้เฉพาะส่วนที่พอดีกับองค์ประกอบเท่านั้น
  • เลื่อน- เพิ่มแถบเลื่อน (เสมอ! แม้ว่าเนื้อหาจะพอดีกับองค์ประกอบก็ตาม)
  • อัตโนมัติ- เพิ่มแถบเลื่อนหากจำเป็น
ตัวอย่าง:

  • ซีเอสเอส


    ซีเอสเอส(อังกฤษ: Cascading Style Sheets - สไตล์ชีทแบบเรียงซ้อน) - ภาษาทางการสำหรับการอธิบายลักษณะที่ปรากฏของเอกสารที่เขียนโดยใช้ภาษามาร์กอัป ฯลฯ -
ผลลัพธ์

ซีเอสเอส

ซีเอสเอส(อังกฤษ: Cascading Style Sheets) เป็นภาษาทางการสำหรับการอธิบายลักษณะที่ปรากฏของเอกสารที่เขียนโดยใช้ภาษามาร์กอัป วิธีการ การเชื่อมต่อ CSSไปยังเอกสาร
กฎ CSS ถูกเขียนไว้ ภาษาทางการ CSS และอยู่ในสไตล์ชีต นั่นคือ สไตล์ชีตมีกฎ CSS สไตล์ชีทเหล่านี้สามารถอยู่ในเอกสารเว็บได้ รูปร่างที่พวกเขาอธิบายและแยกเป็นไฟล์ในรูปแบบ CSS (โดยพื้นฐานแล้ว รูปแบบ CSS จะเป็นไปตามปกติ ไฟล์ข้อความ- ไฟล์ .css ไม่มีอะไรนอกจากรายการ กฎซีเอสเอสและแสดงความคิดเห็น) นั่นคือ สไตล์ชีตเหล่านี้สามารถเชื่อมต่อได้ โดยฝังอยู่ในเอกสารเว็บที่พวกเขาอธิบายในสี่วิธีที่แตกต่างกัน:
  1. เมื่อสไตล์ชีทเข้าแล้ว แยกไฟล์สามารถเชื่อมต่อกับเอกสารเว็บได้โดยใช้แท็ก ซึ่งอยู่ในเอกสารนี้ระหว่างแท็ก และ.
    (แท็ก จะมีแอตทริบิวต์ href ที่มีค่าเป็นที่อยู่ของสไตล์ชีตนี้) กฎทั้งหมดในตารางนี้มีผลใช้กับทั้งเอกสาร


    .....

  2. เมื่อสไตล์ชีตอยู่ในไฟล์แยกต่างหาก จะสามารถเชื่อมต่อกับเอกสารเว็บได้โดยใช้คำสั่ง @import ซึ่งอยู่ในเอกสารนี้ระหว่างแท็ก และ) ทันทีหลังแท็ก

  3. เมื่อมีการอธิบายสไตล์ชีตในเอกสารเอง สไตล์ชีตนั้นสามารถวางไว้ระหว่างแท็กต่างๆ ได้(ซึ่งในทางกลับกันจะอยู่ในเอกสารนี้ระหว่างแท็ก และ- กฎทั้งหมดในตารางนี้มีผลใช้กับทั้งเอกสาร


    .....

  4. เมื่อมีการอธิบายสไตล์ชีตในเอกสารนั้นเอง ก็อาจอยู่ในเอกสารในส่วนเนื้อหาบางส่วนได้ แท็กแยกกัน(ผ่านแอตทริบิวต์ style) ของเอกสารนี้ กฎทั้งหมดในตารางนี้ใช้กับเนื้อหาของแท็กนี้เท่านั้น

    รับซื้อช้าง

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

กรอบ 1

ตัวอย่างนี้ใช้ตารางที่ซ้อนกัน นั่นคือ ตารางหนึ่งอยู่ภายในอีกตารางหนึ่ง ในบรรทัด 1 เราเปิดโต๊ะแรกแล้วเติมให้เต็ม สีเข้มในกรณีนี้คือสีดำ (# 00 00 00) หนึ่งในพารามิเตอร์ของตารางด้านนอกคือ ระยะห่างระหว่างเซลล์หรือ เซลล์แพดดิ้ง -ควรเป็น 0 และอีก 1 อยู่ในบรรทัด 4 เรากำลังเปิดอยู่ ตารางใหม่พื้นหลังสีขาว (#FF FF FF) พารามิเตอร์ที่สำคัญตารางที่ซ้อนกันคือความกว้าง - ความกว้าง = "100%"- ควรปิดตารางในลำดับย้อนกลับ - ซ้อนกันก่อน จากนั้นจึงปิดด้านนอก

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

กรอบ 2

ในตัวอย่างนี้ เราทำกับตารางเดียว ในการสร้างเฟรมจะใช้พารามิเตอร์ที่ออกแบบมาเป็นพิเศษที่นี่ ชายแดน ,ซึ่งกำหนดค่าเป็น 1 ในขณะเดียวกันก็มีพารามิเตอร์ ระยะห่างระหว่างเซลล์เท่ากับ 0 มิฉะนั้นเฟรมจะมีลักษณะดังนี้:

พารามิเตอร์ ระยะห่างระหว่างเซลล์= 1

พารามิเตอร์ ระยะห่างระหว่างเซลล์= 2

พารามิเตอร์ ระยะห่างระหว่างเซลล์= 3

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

กรอบที่ 3
















<เส้นขอบของตาราง = "0" cellspacing = "0" cellpadding = "0">










นี่คือสิ่งที่ดูเหมือน









ถ้าสอง รุ่นก่อนหน้าเฟรมจะแสดงบนหน้าจอในเบราว์เซอร์ที่แตกต่างกัน แม้ว่าจะน้อยที่สุด แต่มีความหนาต่างกัน ตัวอย่างที่สามจะถูกตีความโดยเบราว์เซอร์ทั่วไป Internet Explorer 4.x/5.x/6, Netscape 4.x/6.x และ Opera 6.x ในลักษณะเดียวกัน ซึ่งเกี่ยวข้องกับความหนาของเฟรม ฉันคิดว่าเป็นการเหมาะสมที่จะกล่าวถึงว่า Netscape 4.x ทำให้เกิดปัญหามากที่สุดสำหรับนักออกแบบเว็บไซต์
แต่ลองมาดูตัวเลือกที่สามให้ละเอียดยิ่งขึ้น

1

2

3

4

6

7

8

9

ขึ้นอยู่กับตาราง 9 เซลล์ที่แสดงด้านล่าง: เซลล์ทั้งหมดยกเว้นเซลล์ที่ 5 จะถูกทาสีดำ เซลล์ที่ห้า - สีขาวพื้นหลังของตารางนั้นไม่สำคัญในกรณีนี้ จากนั้นพารามิเตอร์จะถูกเพิ่มลงในเซลล์ 1-3 และ 7-9 ความสูง = "1".ดังนั้น เซลล์ 1, 3, 4, 6, 7, 9 จึงมีความกว้างหนึ่งพิกเซล ( ความกว้าง = "100%"ความกว้าง = "1"

- เซลล์กลาง 2, 5, 8 ถูกสร้างขึ้นให้กว้างที่สุด (

- เคล็ดลับก็คือในเซลล์ซึ่งควรแคบหรือบางหรือทั้งสองอย่างเรียกว่า "จัตุรัส Malevich ที่แก้ไข" จะถูกเพิ่ม - ไฟล์ gif โปร่งใสขนาด 1x1 มิฉะนั้นจะไม่ได้รับเอฟเฟกต์ที่ต้องการ

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

การประชุมเชิงปฏิบัติการครั้งต่อไป

>> การเตรียมการสำหรับการตีพิมพ์ การประชุมเชิงปฏิบัติการครั้งก่อนเว็บมาสเตอร์คนใดในมุมมองของเขา กิจกรรมระดับมืออาชีพคุณต้องสร้างอย่างใดอย่างหนึ่ง
องค์ประกอบที่ซับซ้อน
บนเว็บไซต์ (เช่น การตัดข้อความรอบกราฟิก การสร้างคอลัมน์ด้วยข้อความ การแก้ไของค์ประกอบของไซต์)อย่างไรก็ตาม มาตรฐาน html มีจำนวนน้อย องค์ประกอบมาตรฐานการออกแบบหน้า และองค์ประกอบทั้งหมดไม่ได้แสดงเท่ากัน
เบราว์เซอร์ที่แตกต่างกัน
- แต่ละบริษัทพยายามที่จะพัฒนา HTML ของตัวเอง ซึ่งบางครั้งก็ห่างไกลจากแนวคิดพื้นฐานของ HTML ที่พัฒนาโดยกลุ่ม WWW
ดังนั้นผู้ดูแลเว็บจึงต้องทดลองกับองค์ประกอบที่เหมือนกันกับเบราว์เซอร์ทั้งหมด
ตารางมีความเหมาะสมที่สุดเนื่องจากสะดวกในการวางข้อมูลในเซลล์ตาราง

นอกจากนี้ ตารางใน html ยังมีแอตทริบิวต์ "border="0" - คุณลักษณะนี้ที่มีค่า "0" จะซ่อนเส้นขอบของตาราง กล่าวคือ เนื้อหาของเซลล์ยังคงมองเห็นได้แต่ตัวเฟรมเองไม่สามารถมองเห็นได้
ฉันจะทราบทันทีว่าตามค่าเริ่มต้น html มีแอตทริบิวต์ในตัวที่รับผิดชอบสีของกรอบตาราง (สีขอบ). อย่างไรก็ตามมันจะไม่เหมาะกับเราเพราะว่า คุณลักษณะนี้รองรับเฉพาะ Internet Explorer เท่านั้น องค์ประกอบนี้ใช้ไม่ได้กับเบราว์เซอร์อื่น แต่เราต้องการให้หน้าเว็บแสดงเหมือนกันในเบราว์เซอร์ใดก็ได้ โต๊ะมาช่วยเรา ขั้นแรกเรามาสร้างตารางปกติกันก่อน

แอตทริบิวต์ "border" ต้องตั้งค่าเป็น "0" ระยะห่างของเซลล์เท่ากับ "2" (than จำนวนที่มากขึ้นจะทำให้กรอบโต๊ะกว้างขึ้น)
แอตทริบิวต์ "cellspacing" ใช้เพื่อระบุระยะห่างระหว่างสองเซลล์ ในกรณีนี้จะระบุระยะห่างระหว่างสองโต๊ะ
มาเติมสีดำลงในตารางโดยใช้แอตทริบิวต์ "bgcolor" โดยทั่วไปคุณสามารถเลือกสีอื่นได้ ขึ้นอยู่กับว่ากรอบของคุณจะเป็นสีอะไร

แท็กนี้ระบุว่าข้อมูลควรอยู่ที่ใด ใน ในตัวอย่างนี้เราจะต้องจัดเรียงข้อมูลโดยเริ่มจากด้านบนของตาราง

เราแทรกตารางอื่นลงในเซลล์ของตารางของเรา

ข้อความ

ระบุสีพื้นหลังของตาราง ในกรณีนี้เราจะต้องมีพื้นหลังสีขาว

แค่นั้นแหละ. โต๊ะของเราพร้อมแล้ว ตอนนี้เรามีตารางที่เฟรมจะแสดงเหมือนกันในทุกเบราว์เซอร์

สุดท้ายนี้ ฉันจะให้โค้ดทั้งหมดที่เราสร้างขึ้นแก่คุณ

ข้อความ

ดีไม่ดี

    ในบทความนี้ฉันจะพูดถึง คุณสมบัติ HTMLที่ทุกคนควรรู้ ฉันจะบอกคุณถึงวิธีแก้ไขข้อผิดพลาดที่ฉันเจอ คำถามมักจะเกิดขึ้น...



บทความที่เกี่ยวข้อง