ใช้ประโยชน์สูงสุดจากตาราง HTML โดยเรียนรู้คุณลักษณะตาราง
แอตทริบิวต์ตาราง HTML ช่วยให้คุณสามารถควบคุมตาราง HTML ได้มากขึ้น มีแอตทริบิวต์มากมายที่มีให้สำหรับตารางเพื่อให้น่าสนใจยิ่งขึ้นและเปลี่ยนรูปลักษณ์ของหน้าเว็บของคุณ
แอตทริบิวต์องค์ประกอบ HTML ตาราง
ใน HTML5 องค์ประกอบจะใช้แอตทริบิวต์ global และแอตทริบิวต์อื่น ๆ :. และมีการเปลี่ยนแปลงเฉพาะมีค่าเป็น 1 หรือว่างเปล่า (เช่น border = "") ถ้าคุณต้องการเปลี่ยนความกว้างของเส้นขอบคุณควรใช้คุณสมบัติ CSS กว้างขอบ
ดูด้านล่างเพื่อเรียนรู้เกี่ยวกับแอตทริบิวต์ตาราง HTML5 ที่ถูกต้อง
นอกจากนี้ยังมีคุณลักษณะหลายอย่างที่เป็นส่วนหนึ่งของข้อกำหนด HTML 4.01 ที่ล้าสมัยใน HTML5:
- ใช้ CSS padding property บนองค์ประกอบ TD และ TH ของตาราง
- ใช้พื้นที่ CSS border-spacing บนตาราง
- ใช้ CSS styles เส้นขอบสี: ดำ; และเส้นขอบบนโต๊ะ
- ใช้ CSS styles เส้นขอบสี: ดำ; และเส้นขอบตามองค์ประกอบที่เหมาะสมของตาราง
- - แทนที่คุณควรอธิบายโครงสร้างของตารางใน CAPTION หรือวางตารางทั้งหมดไว้ใน FIGURE และอธิบายไว้ใน FIGCAPTION หรือคุณสามารถลดความซับซ้อนของโครงสร้างของตารางเพื่อไม่ให้มีคำอธิบายได้
- ใช้คุณสมบัติ CSS width
แอตทริบิวต์หนึ่งรายการที่เลิกใช้งานใน HTML 4.01 และล้าสมัยใน HTML5
เรียนรู้เพิ่มเติมเกี่ยวกับ HTML 4.01 TABLE Attributes
- align - ใช้คุณสมบัติ CSS margin แทน
นอกจากนี้ยังมีคุณลักษณะหลายอย่างที่ไม่ใช่ส่วนหนึ่งของข้อกำหนด HTML ใด ๆ
ใช้แอตทริบิวต์เหล่านี้หากคุณรู้ว่าเบราว์เซอร์ที่คุณสนับสนุนสามารถจัดการได้และคุณไม่สนใจเกี่ยวกับ HTML ที่ถูกต้อง
- ใช้สีพื้นหลังของพร็อพเพอร์ตี้ CSS แทน
- bordercolor ใช้ CSS border-color แทน
- bordercolorlight ใช้ CSS border-color แทน
- bordercolordark - ใช้สีขอบของคุณสมบัติ CSS แทน
- cols - ไม่มีตัวเลือกสำหรับแอตทริบิวต์นี้
- height ใช้ความสูงพร็อพเพอร์ตี้ CSS แทน
- - ใช้ขอบคุณสมบัติ CSS แทน
- - ใช้ขอบคุณสมบัติ CSS แทน
- ใช้พื้นที่ CSS สีขาวแทน
- ใช้คุณสมบัติ CSS ในแนวตั้งแทน
เรียนรู้เพิ่มเติมเกี่ยวกับแอตทริบิวต์ TABLE เฉพาะของเบราเซอร์
HTML5 TABLE แอตทริบิวต์องค์ประกอบ
ตามที่เรากล่าวมาข้างต้นมีแอตทริบิวต์เพียงแอตทริบิวต์หนึ่งแอตทริบิวต์มากกว่าแอตทริบิวต์ global ที่ใช้ได้กับส่วน HTML5 TABLE: border
แอตทริบิวต์ border ใช้เพื่อกำหนดเส้นขอบรอบทั้งตารางและเซลล์ทั้งหมดที่อยู่ภายใน มีคำถามบางอย่างเกี่ยวกับว่าจะรวมอยู่ในข้อกำหนด HTML5 หรือไม่ แต่ก็ยังคงอยู่เนื่องจากมีข้อมูลเกี่ยวกับโครงสร้างตารางนอกเหนือจากความหมายเพียงอย่างเดียว
หากต้องการเพิ่มแอตทริบิวต์ border คุณจะกำหนดค่าเป็น 1 หากมีเส้นขอบและว่างเปล่า (หรือปล่อยให้แอตทริบิวต์นั้นอยู่) ถ้าไม่มี เบราว์เซอร์ส่วนใหญ่จะสนับสนุน 0 สำหรับไม่มีเส้นขอบและมีค่าจำนวนเต็มอื่น ๆ (2, 3, 30, 500, ฯลฯ ) เพื่อประกาศความกว้างของเส้นขอบเป็นพิกเซล แต่นี่เป็นล้าสมัยใน HTML5 แต่คุณควรใช้คุณสมบัติสไตล์เส้นขอบ CSS เพื่อกำหนด ความกว้าง เส้นขอบและรูปแบบอื่น ๆ
เมื่อต้องการสร้างตารางที่มีเส้นขอบให้เขียน:
border = "1" >
นี่คือตารางที่มีเส้นขอบ
มีแอตทริบิวต์ HTML 4.01 ที่ล้าสมัยใน HTML5 ถ้าคุณวางแผนที่จะเขียนเอกสาร HTML 4.01 คุณสามารถเรียนรู้เอกสารเหล่านี้มิเช่นนั้นคุณสามารถละเว้นเอกสารเหล่านี้ได้ คุณลักษณะส่วนใหญ่เหล่านี้มีทางเลือกที่อธิบายข้างต้น
เราอธิบายแอตทริบิวต์ขององค์ประกอบที่ถูกต้องใน HTML5 (และ HTML 4.01) อธิบายแอตทริบิวต์ TABLE ที่ถูกต้องใน 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" >
ตารางนี้มี cellpadding เท่ากับ 20 ราย
เส้นขอบของเซลล์จะถูกคั่นด้วย 20 พิกเซล
ดูตัวอย่างของตารางที่มี cellpadding
แอตทริบิวต์กำหนดจำนวนช่องว่างระหว่างเซลล์ในตารางและเนื้อหาเซลล์ เช่นเดียวกับ cellpadding ค่าดีฟอลต์จะถูกตั้งค่าเป็น 2 พิกเซลดังนั้นคุณต้องตั้งค่าเป็น 0 หากคุณต้องการไม่มีระยะห่างของเซลล์
เมื่อต้องการเพิ่มระยะห่างของเซลล์ลงในตารางให้เขียน:
cellspacing = "20" >
ตารางนี้มี cellspacing 20 รายการ
เซลล์จะถูกคั่นด้วย 20 พิกเซล
ดูตารางที่มี cellspacing
แอตทริบิวต์ระบุว่าส่วนใดของเส้นขอบที่ล้อมรอบด้านนอกของตารางจะมองเห็นได้ คุณสามารถจัดวางตารางทั้งสี่ด้านด้านใดด้านหนึ่งด้านบนและด้านล่างซ้ายและขวาหรือไม่ได้
นี่คือ HTML สำหรับตารางที่มีขอบด้านซ้ายเท่านั้น:
frame = "lhs" >
ตารางนี้
จะมี
เฉพาะ
กรอบด้านซ้าย
และอีกตัวอย่างหนึ่งที่มีกรอบด้านล่าง:
frame = "below" >
ตารางนี้มีกรอบด้านล่าง
ตรวจสอบตารางบางส่วนที่มีเฟรม
แอตทริบิวต์มีลักษณะคล้ายกับแอ็ตทริบิวต์ frame แต่จะมีผลกับเส้นขอบรอบเซลล์ของตาราง คุณสามารถตั้งกฎเกี่ยวกับเซลล์ทั้งหมดระหว่างคอลัมน์ระหว่างกลุ่มต่างๆเช่น TBODY และ TFOOT หรือไม่มีก็ได้
เมื่อต้องการสร้าง ตารางที่มีเส้น เฉพาะระหว่างแถวให้เขียน:
rules = "rows" >
ตาราง 4x4 นี้มี
แถวที่ไม่ใช่คอลัมน์
ระบุไว้ด้วย
แอตทริบิวต์กฎ
และอีกเส้นหนึ่งมีเส้นระหว่างคอลัมน์:
rules = "cols" >
นี่คือ
ตาราง
โดยที่
คอลัมน์
เป็น
ไฮไลต์
นี่คือตัวอย่างของตาราง aa ที่มีกฎ
แอตทริบิวต์ให้ข้อมูลเกี่ยวกับตารางสำหรับโปรแกรมอ่านหน้าจอและเอเจนต์ผู้ใช้อื่น ๆ ที่อาจมีปัญหาในการอ่านตาราง เมื่อต้องการใช้แอตทริบิวต์ summary คุณจะเขียนคำอธิบายสั้น ๆ ของตารางและระบุว่าเป็นค่าของแอตทริบิวต์ สรุปจะไม่แสดงบนเว็บเพจในเว็บเบราเซอร์มาตรฐานส่วนใหญ่
นี่คือวิธีการเขียนตารางแบบง่ายๆพร้อมสรุป:
summary = "นี่คือตารางตัวอย่างที่ประกอบด้วยข้อมูลตัวเติมวัตถุประสงค์ของตารางนี้คือเพื่อแสดงบทสรุป" >
คอลัมน์ 1 แถว 1
คอลัมน์ 2 แถว 1
คอลัมน์ 1 แถว 2
คอลัมน์ 2 แถว 2
ดูตารางที่มีข้อมูลสรุป
แอตทริบิวต์กำหนดความกว้างของตารางในพิกเซลหรือเป็นเปอร์เซ็นต์ขององค์ประกอบคอนเทนเนอร์ หากไม่ได้กำหนดความกว้างไว้ตารางจะใช้พื้นที่เท่าที่ต้องการเพื่อแสดงเนื้อหาโดยมีความกว้างสูงสุดเท่ากับความกว้างขององค์ประกอบหลัก
ในการสร้างตารางที่มีความกว้างเฉพาะพิกเซลให้เขียน:
width = "300" >
ตารางนี้มีความกว้าง 80% ของคอนเทนเนอร์ที่มีอยู่
และเพื่อสร้างตารางที่มีความกว้างซึ่งเป็นเปอร์เซ็นต์ขององค์ประกอบหลักให้เขียน:
width = "80%" >
ตารางนี้มีความกว้าง 80% ของคอนเทนเนอร์ที่มีอยู่
ดูตัวอย่างของตารางที่มีความกว้าง
แอตทริบิวต์ของตาราง HTML 4.01 ที่ไม่สนับสนุน
มีแอตทริบิวต์ขององค์ประกอบ TABLE ที่เลิกใช้งานใน HTML 4.01 และล้าสมัยใน HTML5: จัดแนว แอ็ตทริบิวต์นี้ช่วยให้คุณสามารถกำหนดตำแหน่งของตารางในหน้าที่เกี่ยวข้องกับข้อความที่อยู่ด้านข้าง แอตทริบิวต์นี้เลิกใช้แล้วใน HTML 4.01 และคุณควรหลีกเลี่ยงการใช้ แต่คุณควรใช้คุณสมบัติ CSS หรือ margin-left: auto; และขอบขวา: อัตโนมัติ; รูปแบบ คุณสมบัติ float ให้ผลที่ใกล้เคียงกับที่แอตทริบิวต์ align ให้ไว้ แต่อาจส่งผลกระทบต่อวิธีแสดงส่วนเนื้อหาที่เหลืออยู่ ขอบด้านขวา: อัตโนมัติ; และ margin-left: auto; เป็นสิ่งที่ W3C แนะนำให้เป็นทางเลือก
นี่เป็นตัวอย่างที่เลิกใช้โดยใช้แอตทริบิวต์ align:
align = "right" >
ตารางนี้จัดชิดขวา
ข้อความไหลไปรอบ ๆ ไปทางซ้าย
ดูตัวอย่างที่เลิกใช้โดยใช้แอตทริบิวต์ align
และเพื่อให้ได้ผลเช่นเดียวกันกับ HTML ที่ถูกต้อง (ไม่คัดค้าน) ให้เขียน:
style = "float: right;" >
ตารางนี้จัดชิดขวา
ข้อความไหลไปรอบ ๆ ไปทางซ้าย
แอตทริบิวต์ TABLE ต่อไปนี้อธิบายไม่ได้เป็นส่วนหนึ่งของข้อกำหนด HTML ใด ๆ
ข้อมูลก่อนหน้านี้อธิบายแอตทริบิวต์ขององค์ประกอบ HTML ที่ถูกต้องใน HTML 4.01 แต่ล้าสมัยใน HTML5
ต่อไปนี้อธิบายแอตทริบิวต์ TABLE ที่ไม่ถูกต้องในข้อกำหนดปัจจุบันใด ๆ หากคุณไม่สนใจว่าหน้าเว็บของคุณจะตรวจสอบและผู้ใช้ของคุณใช้เบราว์เซอร์ที่สนับสนุนองค์ประกอบเหล่านี้หรือไม่คุณสามารถใช้องค์ประกอบเหล่านี้ได้ แต่ส่วนมากของพวกเขาไม่ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยหรือมีทางเลือกที่สอดคล้องตามมาตรฐานมากขึ้น
เราไม่แนะนำให้ใช้แอตทริบิวต์เหล่านี้ ในตาราง 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 ระบุว่าคุณสมบัติเหล่านี้ไม่ได้รับการสนับสนุนอีกต่อไป
ในช่วงเวลาสั้น ๆ แอตทริบิวต์ cols ในองค์ประกอบ TABLE ได้รับการเสนอเพื่อช่วยให้เบราว์เซอร์รู้จำนวนคอลัมน์ในตาราง สมมติฐานที่ว่านี้จะช่วยเร่งการแสดงผลของตารางขนาดใหญ่ อย่างไรก็ตามมีการใช้งานโดย Internet Explorer เท่านั้นและในช่วง IE8 ขึ้นไปนี้สนับสนุนเฉพาะใน IE7 Standards Mode และ Quirks Mode เท่านั้น
เนื่องจากมีแอตทริบิวต์ width (ล้าสมัยใน HTML5) หลายคนคิดว่ามีแอตทริบิวต์ height สำหรับตารางด้วย แต่เนื่องจากตารางสอดคล้องกับความกว้างของเนื้อหาหรือความกว้างที่กำหนดไว้ในแอตทริบิวต์ CSS หรือ width ความสูงจึงไม่สามารถ จำกัด ได้ ดังนั้นเบราว์เซอร์จึงอนุญาตแอตทริบิวต์ height เพื่อกำหนดความสูงขั้นต่ำของตาราง ถ้าโต๊ะสูงกว่าความสูงนั้นก็จะสูงขึ้น แต่คุณควรใช้ทรัพย์สิน
ด้วยคุณสมบัติความสูงของ 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;" > เนื้อหาที่ด้านล่าง
เนื้อหาที่อยู่ตรงกลาง