วิธีแทรกไฟล์ตารางลงใน html มหาวิทยาลัยการสอนแห่งรัฐอูราล

แท็ก colspan - รวมคอลัมน์

การใช้ตารางโครงสร้างที่ซับซ้อนมากที่สุดคือมาร์กอัปหน้าเว็บ ดูภาพ:

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

ตัวอย่างเช่น,

คอลัมน์นี้มีสองคอลัมน์

สำหรับตัวอย่างของเรา:

ชื่อเอกสาร

ส่วนหัวของไซต์
เมนู เนื้อหา
ด้านล่างของไซต์

โปรดสังเกตว่าแถวที่หนึ่งและสามตอนนี้มีหนึ่งคอลัมน์

ลองดูตัวอย่างอื่นของมาร์กอัปหน้าเว็บ:

ส่วนหัวของไซต์
เมนู เมนู เมนู เมนู เมนู เมนู
ข่าว เนื้อหา

นับ - ตารางนี้มีกี่แถวและคอลัมน์? ในการทำเช่นนี้ให้ใช้ตารางกับภาพวาดทางจิตใจ

ซึ่งจะส่งผลให้มีสามแถวและหกคอลัมน์

ส่วนหัวของไซต์

แถวแรกประกอบด้วยหนึ่งคอลัมน์ ซึ่งมีหกคอลัมน์ มาเขียนสิ่งนี้กัน:

เมนู เมนู เมนู เมนู เมนู เมนู

แถวที่สองประกอบด้วยหกคอลัมน์:

ข่าว เนื้อหา

บรรทัดที่สามประกอบด้วยสองคอลัมน์ โดยคอลัมน์แรกรวมสองคอลัมน์และสี่คอลัมน์ที่สอง:

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

แท็ก Rowspan - การต่อแถวเข้าด้วยกัน

ถ้าเราต้องการมาร์กอัปแบบนี้ล่ะ?

โปรดทราบว่าในแถวที่สองเรามีเพียงคอลัมน์เดียวเท่านั้น เพราะ คอลัมน์แรกขยายจากแถวแรก รวมสองคอลัมน์เข้าด้วยกัน

เมื่อดูเผินๆ อาจดูยาก แต่ด้วยการฝึกฝนเพียงเล็กน้อย คุณจะสามารถสร้างตารางที่ซับซ้อนได้

ลองดูตัวอย่างอื่น: เมนู
เนื้อหา
ด้านล่างของไซต์

หมวก

ลองดูตัวอย่างอื่น: เมนู

ดังนั้นในแถวแรก เรามีสองคอลัมน์ โดยคอลัมน์ที่สองเชื่อมสองแถวเข้าด้วยกัน มาเขียนสิ่งนี้กัน:

เนื้อหา

แถวที่สองคือหนึ่งคอลัมน์ (เพียงบางส่วนที่ถูกซ่อนโดยคอลัมน์ที่สองของแถวแรก):

ด้านล่างของไซต์

สุดท้าย แถวที่สามเป็นคอลัมน์เดียวที่มีสามคอลัมน์: ใช้สองตัวเลือกนี้ช่วงแถว โคลสแปนและ

คุณสามารถสร้างตารางที่มีความซับซ้อนได้ ฝึกฝน.

ตารางที่ซ้อนกัน

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

09.11.2015


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

...แต่นี่กลายเป็นเรื่องในอดีตไปแล้ว เนื่องจากวันนี้มีวิธีที่มีประสิทธิภาพมากขึ้นในการสร้าง wireframes สำหรับเว็บไซต์ด้วย . ฉันมักจะใช้ตารางในบล็อกหรือเว็บไซต์ของฉัน เช่น ใน

ฉันคิดว่าคุณเข้าใจแล้วว่าทำไมคุณต้องเรียนรู้วิธีสร้างตาราง

ตารางประกอบด้วยแท็กหลักอะไรบ้าง

○ แท็ก โต๊ะ
เป็นคอนเทนเนอร์หลักสำหรับสร้างตารางซึ่งประกอบด้วยองค์ประกอบตารางอื่นๆ เช่น คอลัมน์และแถว
จำเป็นต้องมีแท็กปิด

○ แท็ก ตร

ภายในภาชนะ

……
มีการวางแถว:

คอลัมน์ถูกสร้างขึ้นโดยใช้แท็ก .
จำเป็นต้องมีแท็กปิด

ความสนใจ:เป็นไปไม่ได้ที่จะสร้างตารางโดยไม่ใช้แท็กเหล่านี้ทั้งหมด

ตอนนี้เรามาลองใช้ทฤษฎีและสร้างตารางในทางปฏิบัติกันดีกว่า

ออกกำลังกาย:สร้างตารางหนึ่งแถวที่มีสามคอลัมน์

แถว -1 / คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3

ออกกำลังกาย:สร้างตารางสามแถวและสามคอลัมน์

แถว -1 / คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3
แถว -2 / คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3
แถว -3 / คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3

จนถึงจุดนี้ทุกอย่างชัดเจนแล้วหรือยัง? ใครไม่เข้าใจยกมือขึ้น! ใช่แล้ว เราทุกคนเข้าใจ ดังนั้นเรามาเดินหน้าต่อไปกันดีกว่า

ตอนนี้เรามาดูคุณลักษณะของตารางกัน

*คุณสมบัติ

○ เส้นขอบตารางในรูปแบบ HTML

หากต้องการทำให้ตารางมองเห็นได้ ให้ไปที่แท็ก

ใช้ คุณลักษณะ "ชายแดน» .

หากเป็นค่าแอตทริบิวต์ « ชายแดน» “0” เส้นขอบจะไม่ปรากฏให้เห็นเว้นแต่จะเพิ่มลงในแท็ก

คุณลักษณะ "ชายแดน"เส้นขอบในตารางก็จะมองไม่เห็นเช่นกัน

เส้นขอบตารางในรูปแบบ HTML - เว็บไซต์

แถว -1 / คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3

ผลลัพธ์:

ลองเปลี่ยนค่าในแอตทริบิวต์ "ชายแดน"บน "10" .

○วิธีผสานเซลล์ในตาราง

หากต้องการรวมเซลล์ในตารางให้ใช้แอตทริบิวต์ "โคลสแปน"และ "rowspan" ให้กับแท็ก < ทีดี> .

  • colspan - รวมเซลล์ในแนวนอน
  • rowspan - การรวมเซลล์ในแนวตั้ง

ในค่า ให้ระบุจำนวนเซลล์ที่คุณต้องการผสาน

แถวที่ 1 คอลัมน์ 1
แถวที่ 2 คอลัมน์ 1 แถว 2 คอลัมน์ 2

ผลลัพธ์:

แถวที่ 1 คอลัมน์ 1 แถวที่ 1 คอลัมน์ 2
แถวที่ 2 คอลัมน์ 1

ผลลัพธ์:

ตัวอย่างที่ซับซ้อนมากขึ้น:

ตารางในรูปแบบ HTML - เว็บไซต์

แถว -1 / คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3
แถว -2 / คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3 คอลัมน์ 4

ผลลัพธ์:

○ วิธีเพิ่มช่องว่างระหว่างเซลล์ตาราง

หากต้องการเพิ่มระยะห่างระหว่างข้อความและเส้นขอบเซลล์ ให้เพิ่มแอตทริบิวต์ "การเติมเซลล์"เพื่อแท็ก

ในค่าของแอตทริบิวต์ "cellpadding" ให้ระบุระยะการเยื้อง

แถวที่ 1 คอลัมน์ 1 คอลัมน์ 2

ผลลัพธ์:

หากต้องการเพิ่มระยะห่างระหว่างเซลล์ในตาราง ให้ใช้แอตทริบิวต์ "ระยะห่างระหว่างเซลล์"เพื่อแท็ก

ในค่าแอตทริบิวต์ "ระยะห่างระหว่างเซลล์"ระบุระยะห่างระหว่างเซลล์

แถวที่ 1 คอลัมน์ 1 คอลัมน์ 2

ผลลัพธ์:

○ วิธีสร้างพื้นหลังตาราง HTML

หากต้องการสร้างพื้นหลังตาราง HTML ให้ใช้แท็ก to

และ

คุณลักษณะต่อไปนี้:

  • BGCOLOR – สีพื้นหลังสำหรับทั้งตารางหรือแต่ละเซลล์แยกกัน สีระบุด้วยรหัสหรือคำ
  • พื้นหลัง – พื้นหลังในตารางเต็มไปด้วยรูปภาพ
ตารางในรูปแบบ HTML - เว็บไซต์
แถว -1 / คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3
แถว -2 / คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3 คอลัมน์ 4

ผลลัพธ์:

○ วิธีแทรกรูปภาพลงในตาราง HTML

หากต้องการแทรกรูปภาพลงในตาราง HTML ระหว่างแท็ก

ใส่แท็ก .
แถว 1 เซลล์ 1 เซลล์ 2

ผลลัพธ์:

ค่าระบุเป็นพิกเซล (px) หรือเปอร์เซ็นต์ (%)

○ การจัดแนวเนื้อหาในตาราง HTML

หากต้องการจัดแนวเนื้อหาในตาราง HTML ให้ใช้แท็กเพื่อ คุณลักษณะ "จัดตำแหน่ง"และ "วาไลน์" :

จัดตำแหน่ง– การจัดตำแหน่งเนื้อหาในตารางตามแนวนอน
ค่า:

  • ซ้าย - ดันเนื้อหาไปทางด้านซ้าย (ค่าเริ่มต้น);
  • ศูนย์ – ติดตั้งตรงกลาง
  • ขวา - ดันเนื้อหาไปทางด้านขวา

วาลิก– การจัดตำแหน่งเนื้อหาในตารางในแนวตั้ง
ค่า:

  • สูงสุด – กดเนื้อหาไปด้านบน
  • ด้านล่าง – กดเนื้อหาลงไปด้านล่าง
  • กลาง – วางเนื้อหาไว้ตรงกลาง
ข้อความ

เซลล์เริ่มต้น จัดเนื้อหาในแนวนอนตามขอบขวา ในแนวตั้ง - กดไปที่ด้านล่าง
จัดเนื้อหาในแนวนอนตามขอบซ้าย ในแนวตั้ง - กดไปด้านบน จัดเนื้อหาในแนวนอนตรงกลางแนวตั้ง - กดตรงกลาง

ผลลัพธ์:

○ วิธีจัดกึ่งกลางตาราง HTML

หากต้องการจัดโต๊ะให้อยู่กึ่งกลาง คุณจะต้องติดแท็กไว้รอบโต๊ะ

:

รหัสตาราง

แถว -1 / คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3

แท็กเพิ่มเติมและแท็กหลักสำหรับตาราง

ตารางสำหรับเว็บไซต์
ชื่อเรื่อง 1 ชื่อเรื่อง 2
1 2

ผลลัพธ์:

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

โพสต์ก่อนหน้า
รายการถัดไป

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

หากต้องการสร้างตารางในเอกสาร HTML ให้ใช้แท็ก

แสดงถึงคอนเทนเนอร์ที่มีเนื้อหาทั้งหมดของตาราง

การสร้างตารางจะเริ่มต้นด้วยแถวซึ่งถูกกำหนดโดยใช้แท็กเสมอ

แต่ละแถวจะประกอบด้วยเซลล์ตามลำดับ แท็ก สามารถมีได้เฉพาะแท็กสำหรับการสร้างเซลล์

ใน HTML มีแท็กที่แตกต่างกันสองแท็กสำหรับการสร้างเซลล์ แท็กแรกคือ

,
  • ตารางประกอบด้วยแถว - แท็ก
    • ,
  • แต่ละแถวประกอบด้วยคอลัมน์ - แท็ก
    • ,
  • คอลัมน์มีชื่ออยู่ในแถวแรก - แท็ก
    • . มาสร้างตารางที่เราระบุจุดตัดของหมายเลขแถวและคอลัมน์เป็นเนื้อหา:

    ผลลัพธ์:

    อย่างที่คุณเห็น มันไม่ได้สวยงามนัก เราจะตกแต่งมันเอง

    พารามิเตอร์ตาราง HTML: การเยื้อง ความกว้าง สีพื้นหลัง กรอบ

    เพื่อจุดประสงค์นี้แท็ก

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

    ชื่อแรกชื่อที่สอง
    แถว 1 เซลล์ 1แถว 1 เซลล์ 2
    แถว 2 เซลล์ 1แถว 2 เซลล์ 2
    พยายาม "

    ตารางภายในตาราง

    HTML มีความสามารถในการสร้างตารางที่ซ้อนกัน ซึ่งก็คือ ตารางที่อยู่ภายในตารางอื่น หากต้องการสร้างตารางที่ซ้อนกัน คุณต้องวางโค้ดของตารางที่คุณต้องการให้ซ้อนกันภายในแท็กใดๆ

    		.

    ตัวอย่างเช่น ลองใช้ตารางที่เราสร้างไว้ก่อนหน้านี้และวางโค้ดนี้ในเซลล์ที่สองของแถวที่สอง:

    ชื่อแรกชื่อที่สอง
    แถว 1 เซลล์ 1แถว 1 เซลล์ 2
    แถว 2 เซลล์ 1 แถว 2 เซลล์ 2
    ชื่อแรกชื่อที่สอง
    แถว 1 เซลล์ 1แถว 1 เซลล์ 2
    แถว 2 เซลล์ 1แถว 2 เซลล์ 2

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

    องค์ประกอบ TABLE สร้างตาราง

    ในการสร้างตารางในรูปแบบ HTML องค์ประกอบ โต๊ะและโค้ดทั้งหมด (เนื้อหา)ตารางจะอยู่ระหว่างแท็ก - คุณลักษณะขององค์ประกอบนี้ตั้งค่าสำหรับทั้งตาราง:

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

    เรากำลังเขียนโค้ดตัวอย่างสำหรับตารางที่มีพื้นหลังสีน้ำเงิน ความหนาของเส้นสีขาว 1px ช่องว่างด้านในและด้านนอกเซลล์ 2px ความกว้าง 100% ของหน้า:

    bgcolor="สีน้ำเงิน" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%">

    เพิ่มบรรทัด

    แต่ละตารางต้องมีอย่างน้อยหนึ่งแถว โดยจะระบุด้วยแท็ก - ในตัวอย่างต่อไปนี้ เราจะดูตัวอย่างการเพิ่มบรรทัด:

    bgcolor="สีน้ำเงิน" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%">

    การเพิ่มเซลล์

    เซลล์ต่างๆ จะสร้างคอลัมน์แนวตั้งของตาราง โดยจะกำหนดโดยแท็ก - เพิ่มเซลล์ลงในตารางของเรา:

    bgcolor="สีน้ำเงิน" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%">

    เซลล์หมายเลข 1
    ห้องขังหมายเลข 2
    ห้องขังหมายเลข 3

    เราจะเห็นตารางผลลัพธ์:

    การต่อสายอักขระ

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

    bgcolor="สีน้ำเงิน" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%">

    rowspan="2" >แถวหมายเลข 1 และหมายเลข 2 ถูกรวมเข้าด้วยกัน
    ห้องขังหมายเลข 1
    ห้องขังหมายเลข 2

    ห้องขังหมายเลข 3
    ห้องขังหมายเลข 4

    บรรทัดที่ 3
    ห้องขังหมายเลข 5
    ห้องขังหมายเลข 6

    เบราว์เซอร์จะแสดง:

    เส้น #1 และ #2 ถูกรวมเข้าด้วยกัน เซลล์หมายเลข 1 ห้องขังหมายเลข 2
    ห้องขังหมายเลข 3 ห้องขังหมายเลข 4
    บรรทัดที่ 3 ห้องขังหมายเลข 5 ห้องขังหมายเลข 6

    การรวมคอลัมน์

    คอลัมน์จะถูกรวมเข้าด้วยกันโดยใช้หลักการเดียวกัน โดยใช้เฉพาะแอตทริบิวต์เท่านั้น โคลสแปน- ลองดูตัวอย่าง:

    bgcolor="สีน้ำเงิน" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%">

    colspan="2" >คอลัมน์ #1 และ #2 ถูกรวมเข้าด้วยกัน
    คอลัมน์ #3

    เซลล์หมายเลข 1
    ห้องขังหมายเลข 2
    ห้องขังหมายเลข 3

    ห้องขังหมายเลข 4
    ห้องขังหมายเลข 5
    ห้องขังหมายเลข 6

    เบราว์เซอร์จะแสดง:

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

    หรือเช่นนี้:

    ลองเขียนโค้ดด้วยตัวเอง!

    ขนาดตารางและการจัดตำแหน่ง

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

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

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

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

    สรุปแล้ว

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


    / สิ่งที่คุณไม่สามารถสร้างเว็บไซต์ได้หากไม่มี: ∼ ∼

    ตารางเป็นหนึ่งในเครื่องมือหลักในการสร้างเว็บเพจ

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

    ตารางใด ๆ คือชุดของแถวและคอลัมน์ซึ่งมีเซลล์อยู่ตรงจุดตัดกัน ตัวอย่างเช่น:

    ลองดูที่ตารางของเราจากมุมมองของ HTML:

    • ตารางนั้นถูกระบุโดยใช้แท็ก
      ,
    • ตารางมีชื่อ - แท็ก
    มีหลายพารามิเตอร์:

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

    ผลลัพธ์:

    วิธีนี้ดีกว่า แต่ตารางของเราถูกกดไปที่ขอบด้านซ้ายของหน้าต่าง เช่นเดียวกับข้อความในนั้น มาแก้ไขปัญหานี้ด้วยการเพิ่มพารามิเตอร์อีกสามตัว:

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

    ผลลัพธ์:

    โปรดทราบว่าตารางมีเส้นขอบสองชั้น หากคุณระบุ ระยะห่างระหว่างเซลล์ = "0"จากนั้นขอบเขตจะอยู่ในรูปแบบปกติ:

    ผลลัพธ์:


    โดยทั่วไป พารามิเตอร์สองตัวจะรับผิดชอบต่อขอบเขต:

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

    ผลลัพธ์:


    ควรสังเกตว่าเส้นขอบจะแสดงแตกต่างกันเล็กน้อยในเบราว์เซอร์ที่แตกต่างกัน

    แท็ก HTML tr และ td

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

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

    ผลลัพธ์:


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

    บทเรียนนี้จบแล้ว ฝึกฝนการสร้างและออกแบบตาราง คุณจะต้องมีทักษะเหล่านี้ในบทเรียนถัดไป ซึ่งเราจะสร้างตารางที่มีโครงสร้างที่ซับซ้อน

    พารามิเตอร์เหล่านี้
    1 2 3