วิธีใช้แอตทริบิวต์องค์ประกอบ 'ตาราง' (HTML)

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

แอตทริบิวต์องค์ประกอบ HTML ตาราง

ใน HTML5 องค์ประกอบจะใช้แอตทริบิวต์ global และแอตทริบิวต์อื่น ๆ :. และมันมีการเปลี่ยนแปลงเพียงมีค่าของ 1 หรือว่างเปล่า (เช่น border = "") ถ้าคุณต้องการเปลี่ยนความกว้างของเส้นขอบคุณควรใช้ ชายแดนที่มีความกว้าง คุณสมบัติ CSS

ดูด้านล่างเพื่อเรียนรู้เกี่ยวกับแอตทริบิวต์ตาราง HTML5 ที่ถูกต้อง

นอกจากนี้ยังมีคุณลักษณะหลายอย่างที่เป็นส่วนหนึ่งของข้อกำหนด HTML 4.01 ที่ล้าสมัยใน HTML5:

• - ใช้ CSS การขยายความ ทรัพย์สินบนโต๊ะ TD และ TH องค์ประกอบ
• ใช้คุณสมบัติ CSS ชายแดนระยะห่าง บนโต๊ะ.
• - ใช้สไตล์ CSS ชายแดนสี: สีดำ; และ ชายแดนสไตล์ บนโต๊ะ.
• - ใช้สไตล์ CSS ชายแดนสี: สีดำ; และ ชายแดนสไตล์ เกี่ยวกับองค์ประกอบที่เหมาะสมของตาราง
• - แทนที่คุณควรอธิบายโครงสร้างของตารางใน a CAPTION หรือใส่ตารางทั้งหมดใน a รูป และอธิบายใน a FIGCAPTION. หรือคุณสามารถลดความซับซ้อนของโครงสร้างของตารางเพื่อไม่ให้มีคำอธิบายได้
• - ใช้ CSS ความกว้าง คุณสมบัติ

แอตทริบิวต์หนึ่งรายการที่เลิกใช้งานใน HTML 4.01 และล้าสมัยใน HTML5

เรียนรู้เพิ่มเติมเกี่ยวกับ HTML 4.01 TABLE Attributes

• เป็นเส้นตรง- ใช้ CSS ขอบ คุณสมบัติแทน

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

• ใช้คุณสมบัติ CSS สีพื้นหลัง แทน.
• borderColorใช้คุณสมบัติ CSS ชายแดนสี แทน.
• bordercolorlightใช้คุณสมบัติ CSS ชายแดนสี แทน.
• bordercolordarkใช้คุณสมบัติ CSS ชายแดนสี แทน.
• คอลัมน์ไม่มีตัวเลือกอื่นสำหรับแอตทริบิวต์นี้
• ความสูงใช้คุณสมบัติ CSS ความสูง แทน.
• ใช้คุณสมบัติ CSS ขอบ แทน.
• ใช้คุณสมบัติ CSS ขอบ แทน.
• ใช้คุณสมบัติ CSS พื้นที่สีขาว แทน.
• ใช้คุณสมบัติ CSS แนวตั้งชิด แทน.

เรียนรู้เพิ่มเติมเกี่ยวกับแอตทริบิวต์ TABLE เฉพาะของเบราเซอร์

HTML5 TABLE แอตทริบิวต์องค์ประกอบ

อย่างที่เรากล่าวมาข้างต้นมีเพียงหนึ่งแอตทริบิวต์นอกเหนือแอตทริบิวต์ส่วนกลางเท่านั้นที่ใช้ได้กับ HTML5 ตาราง ธาตุ: ชายแดน.

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

เมื่อต้องการเพิ่ม ชายแดน คุณตั้งค่าเป็น 1 ถ้ามีเส้นขอบและว่าง (หรือปล่อยให้แอตทริบิวต์) ถ้าไม่มี เบราว์เซอร์ส่วนใหญ่จะสนับสนุน 0 ไม่มีขอบและค่าจำนวนเต็มอื่น ๆ (2, 3, 30, 500, ฯลฯ ) เพื่อประกาศความกว้างของเส้นขอบเป็นพิกเซล แต่นี่เป็นล้าสมัยใน HTML5 แต่คุณควรใช้คุณสมบัติสไตล์เส้นขอบ CSS เพื่อกำหนดความกว้างเส้นขอบและรูปแบบอื่น ๆ

เมื่อต้องการสร้างตารางที่มีเส้นขอบให้เขียน:

border = "1" > นี่คือตารางที่มีเส้นขอบ

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

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

แอตทริบิวต์ HTML 4.01 ที่ถูกต้อง

แอตทริบิวต์ที่เราอธิบายไว้ข้างต้น ความแตกต่างใน HTML 4.01 จาก HTML5 คือคุณสามารถระบุจำนวนเต็มทั้งหมด (0, 1, 2, 15, 20, 200, ฯลฯ ) เพื่อกำหนดความกว้างของเส้นขอบเป็นพิกเซล

เมื่อต้องการสร้างตารางที่มีเส้นขอบ 5px ให้เขียน:

<> border = "5" > ตารางนี้มีเส้นขอบ 5px

ดูตัวอย่างสองตารางที่มีเส้นขอบ

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

เมื่อต้องการกำหนดช่วงช่องเซลล์ถึง 20 ให้เขียน:

<> cellpadding = "20" > ตารางนี้มี acellpadding จาก 20 เส้นขอบของเซลล์จะถูกคั่นด้วย 20 พิกเซล

ดูตัวอย่างของตารางที่มี cellpadding

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

เมื่อต้องการเพิ่มระยะห่างของเซลล์ลงในตารางให้เขียน:

<> cellspacing = "20" > ตารางนี้มี acellspacing จาก 20 เซลล์จะถูกคั่นด้วย 20 พิกเซล

ดูตารางที่มี cellspacing

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

นี่คือ HTML สำหรับตารางที่มีขอบด้านซ้ายเท่านั้น:

กรอบ = "LHS" > ตารางนี้ จะมี เพียง กรอบด้านซ้าย

และอีกตัวอย่างหนึ่งที่มีกรอบด้านล่าง:

กรอบ = "ด้านล่าง" > ตารางนี้มีกรอบด้านล่าง

ตรวจสอบตารางบางส่วนที่มีเฟรม

แอตทริบิวต์จะคล้ายกับกรอบ attribute เท่านั้นจะมีผลต่อเส้นขอบรอบเซลล์ของตาราง คุณสามารถตั้งกฎเกี่ยวกับเซลล์ทั้งหมดระหว่างคอลัมน์ระหว่างกลุ่มต่างๆเช่นTBODY และTFOOT หรือไม่มีเลย

เมื่อต้องการสร้างตารางที่มีเส้นเฉพาะระหว่างแถวให้เขียน:

กฎ = "แถว" > ตาราง 4x4 นี้มี แถวไม่ใช่คอลัมน์ ระบุด้วย แอตทริบิวต์กฎ

และอีกเส้นหนึ่งมีเส้นระหว่างคอลัมน์:

กฎ = "คอลัมน์" > นี่คือ ตาราง ที่ไหน คอลัมน์ เป็น ไฮไลต์

นี่คือตัวอย่างของตารางที่มีกฎ

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

นี่คือวิธีการเขียนตารางแบบง่ายๆพร้อมสรุป:

<> สรุป = "นี่คือตารางตัวอย่างที่ประกอบด้วยข้อมูลของผู้บรรจุข้อมูลวัตถุประสงค์ของตารางนี้คือเพื่อแสดงสรุป" > แถวที่ 1 แถว 1 คอลัมน์ 2 แถวที่ 1 แถวที่ 1 แถว 2 คอลัมน์ 2 แถว 2

ดูตารางที่มีข้อมูลสรุป

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

ในการสร้างตารางที่มีความกว้างเฉพาะพิกเซลให้เขียน:

<> width = "300" > ตารางนี้มีความกว้าง 80% ของคอนเทนเนอร์ที่มีอยู่

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

<> width = "80%" > ตารางนี้มีความกว้าง 80% ของคอนเทนเนอร์ที่มีอยู่

ดูตัวอย่างของตารางที่มีความกว้าง

แอตทริบิวต์ของตาราง HTML 4.01 ที่ไม่สนับสนุน

มีแอตทริบิวต์ของตาราง ที่เลิกใช้งานใน HTML 4.01 และล้าสมัยใน HTML5:เป็นเส้นตรง. แอ็ตทริบิวต์นี้ช่วยให้คุณสามารถกำหนดตำแหน่งของตารางในหน้าที่เกี่ยวข้องกับข้อความที่อยู่ด้านข้าง แอตทริบิวต์นี้เลิกใช้แล้วใน HTML 4.01 และคุณควรหลีกเลี่ยงการใช้ คุณควรใช้คุณสมบัติ CSS หรือmargin-left: auto; และขอบขวา: อัตโนมัติ; รูปแบบลอย คุณสมบัติช่วยให้คุณได้ผลลัพธ์ที่ใกล้เคียงกับสิ่งที่เป็นเส้นตรง แอตทริบิวต์ที่ให้มา แต่อาจส่งผลกระทบต่อวิธีแสดงส่วนเนื้อหาที่เหลืออยู่ขอบขวา: อัตโนมัติ; และmargin-left: auto; เป็นสิ่งที่ W3C แนะนำให้เป็นทางเลือก

นี่คือตัวอย่างเลิกใช้เป็นเส้นตรง แอตทริบิวต์:

<> align = "สิทธิ" > ตารางนี้ชิดขวา ข้อความไหลไปรอบ ๆ ไปทางซ้าย

ดูตัวอย่างเลิกใช้เป็นเส้นตรง คุณลักษณะ

และเพื่อให้ได้ผลเช่นเดียวกันกับ HTML ที่ถูกต้อง (ไม่คัดค้าน) ให้เขียน:

<> style = "ลอย: ขวา;" > ตารางนี้ชิดขวา ข้อความไหลไปรอบ ๆ ไปทางซ้าย

อธิบายต่อไปนี้ตาราง แอตทริบิวต์ที่ไม่ได้เป็นส่วนหนึ่งของข้อกำหนด HTML ใด ๆ

ข้อมูลก่อนหน้านี้อธิบายแอตทริบิวต์ขององค์ประกอบ HTML ที่ถูกต้องใน HTML 4.01 แต่ล้าสมัยใน HTML5

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

เราไม่แนะนำให้ใช้แอตทริบิวต์เหล่านี้ บนตาราง HTML ของคุณ

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

ทางเลือกที่ดีกว่าสำหรับแอตทริบิวต์นี้คือคุณสมบัติสไตล์

หากต้องการเปลี่ยนสีพื้นหลังของตารางให้เขียน:

<> style = "background-color: #ccc;" > ตารางนี้มีพื้นหลังสีเทา

คล้ายกับbgcolor แอตทริบิวต์borderColor ช่วยให้คุณสามารถเปลี่ยนสีของแอ็ตทริบิวต์ได้ แอตทริบิวต์นี้ได้รับการสนับสนุนโดย Internet Explorer เท่านั้น แต่คุณควรใช้คุณสมบัติสไตล์ border-color

หากต้องการเปลี่ยนสีของเส้นขอบของตารางให้เขียน:

style = "border-color: red;" > ตารางนี้มีเส้นขอบสีแดง

bordercolorlight และbordercolordark แอตทริบิวต์ถูกรวมอยู่ใน Internet Explorer เพื่อให้คุณสามารถสร้างเส้นขอบ 3 มิติรอบ ๆ ตารางของคุณได้ อย่างไรก็ตามในช่วง IE8 ขึ้นไปจะได้รับการสนับสนุนเฉพาะใน IE7 Standards Mode และ Quirks Mode เท่านั้น Microsoft ระบุว่าคุณสมบัติเหล่านี้ไม่ได้รับการสนับสนุนอีกต่อไป

เป็นเวลาสั้น ๆคอลัมน์ แอตทริบิวต์บนตาราง ถูกเสนอเพื่อช่วยให้เบราว์เซอร์ทราบจำนวนคอลัมน์ที่มีอยู่ในตาราง สมมติฐานที่ว่านี้จะช่วยเร่งการแสดงผลของตารางขนาดใหญ่ อย่างไรก็ตามมีการใช้งานโดย Internet Explorer เท่านั้นและในช่วง IE8 ขึ้นไปนี้สนับสนุนเฉพาะใน IE7 Standards Mode และ Quirks Mode เท่านั้น

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

ด้วย CSSความสูง คุณสามารถจำกัดความสูงได้หากใช้คุณสมบัติ CSS เพื่อกำหนดสิ่งที่เกิดขึ้นกับเนื้อหาส่วนเกิน

เมื่อต้องการตั้งค่าความสูงต่ำสุดในตารางให้เขียน:

<> style = "height: 30em;" > ตารางนี้มีความสูงอย่างน้อย 30 ems

สองแอตทริบิวต์และเพิ่มช่องว่างบริเวณด้านซ้าย / ด้านขวา (hspace) และด้านบน / ล่าง (vSpace) ของตาราง คุณควรใช้คุณสมบัติแบบนี้แทน

หากต้องการตั้งพื้นที่แนวตั้งเป็น 20 พิกเซลและพื้นที่แนวนอน 40 พิกเซลให้เขียน:

<> style = "margin: 20px 40px;" ตารางนี้มีพิกเซล 20 พิกเซลและ hspace 40 พิกเซล

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

หากต้องการสร้างคอลัมน์ที่มีข้อความจำนวนมากไม่ตัดให้เขียน:

<> style = "white-space: nowrap;" > นี่เป็นคอลัมน์ที่มีเนื้อหามากมาย แต่แม้ว่าจะกว้างกว่าคอนเทนเนอร์ข้อความไม่ควรห่อบรรทัดถัดไป แต่บังคับให้หน้าต่างเบราว์เซอร์เลื่อนไปตามแนวนอนเพื่อดูเนื้อหาทั้งหมด

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

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

<> style = "vertical-align: bottom;" > เนื้อหาที่ด้านล่าง

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

เนื้อหาตรงกลาง