ฉันต้องการแสดงตารางที่มีความกว้างคงที่ที่กึ่งกลางของหน้าต่างเบราว์เซอร์ ตอนนี้ฉันใช้
<table width="200" align="center">
แต่ Visual Studio 2008 ให้คำเตือนในบรรทัดนี้:
แอตทริบิวต์ "จัดตำแหน่ง" ถือว่าล้าสมัย ขอแนะนำโครงสร้างที่ใหม่กว่า
ฉันควรใช้สไตล์ CSS แบบใดกับตารางเพื่อให้ได้รูปแบบเดียวกัน
คำตอบ:
สตีเวนพูดถูกในทางทฤษฎี :
วิธีที่ "ถูกต้อง" ในการจัดตารางโดยใช้ CSS เบราว์เซอร์ที่สอดคล้องกันควรเป็นตารางกลางหากระยะขอบซ้ายและขวาเท่ากัน วิธีที่ง่ายที่สุดในการดำเนินการนี้คือตั้งค่าระยะขอบซ้ายและขวาเป็น "อัตโนมัติ" ดังนั้นอาจเขียนในสไตล์ชีต:
table
{
margin-left: auto;
margin-right: auto;
}
แต่บทความที่กล่าวถึงในตอนต้นของคำตอบนี้ช่วยให้คุณสามารถจัดโต๊ะตรงกลางได้
โซลูชันข้ามเบราว์เซอร์ css ที่สวยงาม: ใช้งานได้ทั้ง MSIE 6 (Quirks and Standards), Mozilla, Opera และแม้แต่ Netscape 4.x โดยไม่ต้องตั้งค่าความกว้างที่ชัดเจนใด ๆ :
div.centered
{
text-align: center;
}
div.centered table
{
margin: 0 auto;
text-align: left;
}
<div class="centered">
<table>
…
</table>
</div>
ลองสิ่งนี้:
<table width="200" style="margin-left:auto;margin-right:auto">
เรียบง่าย IE6 ขึ้นไปจะทำให้ตารางของคุณอยู่ตรงกลางอย่างมีความสุขด้วย "margin: 0 auto;" หากแสดงเฉพาะเพจในโหมด "มาตรฐาน" ในการทำให้สิ่งนี้เกิดขึ้นคุณต้องมีการประกาศประเภทหลักที่ถูกต้องเช่น
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
หรือ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
จริง IE5.5 และต่ำกว่าจะยังคงปฏิเสธที่จะวางตารางไว้ตรงกลาง แต่บางทีคุณอาจจะอยู่ได้โดยเฉพาะอย่างยิ่งถ้าหน้านั้นยังคงใช้งานได้โดยวางตารางชิดซ้าย ฉันคิดว่าตอนนี้ผู้ใช้ IE5.5 และต่ำกว่านั้นค่อนข้างคุ้นเคยกับเว็บไซต์ที่ดูแปลก ๆ แต่คุณยังต้องตรวจสอบให้แน่ใจว่าภาพบกพร่องเหล่านั้นจะไม่ทำให้ไซต์ของคุณใช้งานไม่ได้
ขอให้สนุกกับการเขียนโค้ด!
แก้ไข: ขออภัยบางทีฉันควรชี้ให้เห็นว่าคุณไม่จำเป็นต้องมีหลักประเภทที่ "เข้มงวด" เพื่อรับ IE6 และเข้าสู่โหมดการแสดงผล "มาตรฐาน" ฉันตระหนักว่ามันอาจดูเหมือนเป็นอย่างนั้นจากตัวอย่างประเภทหลักธรรมที่ฉันโพสต์ไว้ข้างต้น ตัวอย่างเช่นการประกาศประเภทนี้จะใช้ได้ผลเท่าเทียมกัน:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
แม้ว่ามันอาจจะเป็นเรื่องนอกรีตในโลกปัจจุบัน แต่ในอดีตคุณจะใช้รหัสที่ไม่ใช่ css ต่อไปนี้ สิ่งนี้ใช้ได้กับทุกอย่างจนถึงและรวมถึงเบราว์เซอร์ในปัจจุบัน แต่ - อย่างที่ฉันได้พูดไป - มันเป็นเรื่องนอกรีตในโลกปัจจุบัน:
<center>
<table>
...
</table>
</center>
สิ่งที่คุณต้องการคือวิธีที่จะบอกได้ว่าคุณต้องการจัดโต๊ะตรงกลางและบุคคลนั้นกำลังใช้เบราว์เซอร์รุ่นเก่า จากนั้นแทรกคำสั่ง "<center>" รอบ ๆ ตาราง มิฉะนั้น - ใช้ css
น่าแปลกใจ - ถ้าคุณต้องการรวมทุกอย่างไว้ที่ศูนย์กลางของร่างกายคุณก็สามารถใช้มาตรฐานได้
text-align: center;
คำสั่ง css และใน IE8 (อย่างน้อย) มันจะจัดกึ่งกลางทุกอย่างบนหน้ารวมทั้งตาราง
style="text-align:center;"
(ฉันคิด)
หรือคุณสามารถเพิกเฉย แต่ก็ยังใช้งานได้
สิ่งนี้ควรใช้งานได้:
<div style="text-align:center;">
<table style="margin: 0 auto;">
<!-- table markup here. -->
</table>
</div>
ฉันเพิ่งเรียนรู้สิ่งนี้และในที่สุดสิ่งที่ได้ผลสำหรับฉันคือการสร้างตารางที่มีสามแถวก่อน กำหนดระยะขอบสำหรับแถวซ้ายและขวาเป็น 50% จากนั้นใส่แถวเดียวตารางความกว้างคงที่ภายใน "ข้อมูลตาราง" ของ "แถวตาราง" กลาง
<style>
.abc {
text-align: center;
}
</style>
<table class="abc">
<tr>
<td>Item1</td>
<td>Item2</td>
</tr>
</table>
โดยทั่วไปจะใช้งานได้เช่น
<table align="center">
...
แต่คุณสามารถทำได้ด้วยวิธีที่ดีกว่าโดยใช้ CSS และนี่จะเป็นแนวทางที่ดีกว่าในการใช้ CSS เนื่องจากให้พฤติกรรมแบบไดนามิกในหน้าเว็บและตอบสนองได้ดี
<table style="text-align:center;">
นอกจากนี้หากคุณต้องการแสดงเฉพาะตารางบนหน้าเว็บคุณสามารถใช้การจัดตำแหน่งแท็กเนื้อหาตามที่แสดงด้านล่าง
<body style="text-align:center;">
<table>
...
</table>
หากคุณต้องการคำแนะนำอื่น ๆ โปรดแจ้งให้เราทราบ ก็จะช่วยคุณในเรื่องนี้ นอกจากนี้การใช้คุณสมบัติ bootstrap สิ่งนี้จะง่ายและโต้ตอบได้มากขึ้น
เพิ่มสไตล์ Div:
width: fit-content;