ทุกสิ่งที่คุณต้องการรู้เกี่ยวกับตาราง HTML



บทความนี้จะให้ความรู้เกี่ยวกับตาราง HTML โดยละเอียดและครอบคลุม แท็กและการจัดรูปแบบต่างๆที่สามารถทำได้

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

ตาราง HTML คืออะไร?

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





HTML5
ในการกำหนดตาราง HTML เราใช้

แท็ก ข้างใน
ก่อนอื่นคุณกำหนดแถวของตารางด้วย แท็ก จากนั้นคุณกำหนดส่วนหัวของตารางใน แท็กมีเนื้อหาของตาราง

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

แท็กตาราง HTML

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



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

     
    : ใช้เพื่อกำหนดเซลล์ส่วนหัวในตาราง
  • : ใช้เพื่อกำหนดเซลล์ในตาราง
  • : ใช้เพื่อกำหนดคำอธิบายภาพของตาราง
  • : ใช้เพื่อระบุกลุ่มของคอลัมน์อย่างน้อยหนึ่งคอลัมน์ในตารางสำหรับการจัดรูปแบบ
  • : ใช้เพื่อระบุคุณสมบัติของคอลัมน์สำหรับแต่ละคอลัมน์ภายในองค์ประกอบ
  • : ใช้เพื่อจัดกลุ่มเนื้อหาส่วนหัวในตาราง
  • ชื่อ อายุ
    Abhishek 18
    บ๊อบ 2. 3

    เอาท์พุต:



    รูปแบบของตาราง HTML

    • Cellpadding และ Cellspacing Attributes

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

    Cellspacing & Cellpadding
    ชื่อ อายุ
    Abhishek สิบห้า
    บ๊อบ 2. 3

    • คุณสมบัติ Colspan และ Rowspan

    แอตทริบิวต์ Colspan ใช้เพื่อรวมคอลัมน์ตั้งแต่สองคอลัมน์ขึ้นไปในขณะที่ rowspans ใช้เพื่อผสานสองแถวขึ้นไป

    Colspan และ Rowspan
    แบทช์ ชื่อ อายุ
    วิทยาศาสตร์คอมพิวเตอร์ Abhishek สิบห้า
    บ๊อบ 2. 3
    หยุดพัก

    แปลงไบนารีเป็น int java
    • ความสูงและความกว้างของโต๊ะ

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

    ความกว้างและความสูงของตาราง HTML
    Abhishek สิบห้า
    บ๊อบ 2. 3

    • ส่วนหัวของตารางเนื้อหาและส่วนท้าย

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

    แท็กสร้างส่วนหัวตารางแยกกันโดยที่แท็กจะสร้างส่วนท้ายของตารางแยกต่างหาก

ส่วนหัวของตาราง
ส่วนท้ายของตาราง
ชื่อ อายุ เครื่องหมาย

  • พื้นหลังตารางและคำอธิบายภาพ

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

แท็กคำอธิบายภาพทำหน้าที่เป็นหัวเรื่องหรือคำอธิบายสำหรับตารางซึ่งแสดงอยู่ที่ด้านบนสุดของตาราง

พื้นหลังตาราง HTMLคำบรรยายตาราง
คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3
แถวที่ 1 เซลล์ 1 แถวที่ 1 เซลล์ 2 แถวที่ 1 เซลล์ 3
แถวที่ 2 เซลล์ 2 แถวที่ 2 เซลล์ 3
แถวที่ 3 เซลล์ 1

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

ตรวจสอบไฟล์ โดย Edureka บริษัท การเรียนรู้ออนไลน์ที่เชื่อถือได้ซึ่งมีเครือข่ายผู้เรียนที่พึงพอใจมากกว่า 250,000 คนกระจายอยู่ทั่วโลก การฝึกอบรมการรับรองการพัฒนาเว็บจะช่วยให้คุณเรียนรู้วิธีสร้างเว็บไซต์ที่น่าประทับใจโดยใช้ HTML5, CSS3, Twitter Bootstrap 3, jQuery และ Google API และปรับใช้กับ Amazon Simple Storage Service (S3)

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบทความนี้แล้วเราจะติดต่อกลับไป