สิ่งที่มาแทนที่ Cellpadding, Cellspacing, Valign และจัดเรียงในตาราง HTML5 คืออะไร


320

ในVisual Studioฉันเห็นคำเตือนเหล่านี้:

  • การตรวจสอบความถูกต้อง (HTML 5): แอตทริบิวต์ 'cellpadding' ไม่ใช่แอตทริบิวต์ที่ถูกต้องขององค์ประกอบ 'table'
  • การตรวจสอบความถูกต้อง (HTML 5): แอตทริบิวต์ 'cellspacing' ไม่ใช่แอตทริบิวต์ที่ถูกต้องขององค์ประกอบ 'ตาราง'
  • การตรวจสอบความถูกต้อง (HTML 5): แอตทริบิวต์ 'valign' ไม่ใช่แอตทริบิวต์ที่ถูกต้องขององค์ประกอบ 'td'
  • การตรวจสอบความถูกต้อง (HTML 5): แอตทริบิวต์ 'จัดตำแหน่ง' ไม่ใช่แอตทริบิวต์ที่ถูกต้องขององค์ประกอบ 'td'

หากพวกเขาไม่ใช่แอตทริบิวต์ที่ถูกต้องในHTML5สิ่งที่แทนที่พวกเขาใน CSS


4
ฉันพบว่าแม้จะมี HTML5 แล้วการกำหนดเซลล์และการกำหนดเซลล์ยังคงเป็นสิ่งจำเป็น กล่าวคือโดยไม่ต้องประกาศคุณลักษณะเหล่านั้นอย่างชัดเจนจะใช้การเว้นวรรคและการเว้นวรรคเริ่มต้น ดังนั้นฉันพบว่าฉันต้องตั้งค่าเป็น "0" เสมอเพื่อลบล้างค่าเริ่มต้น เป็นไปได้ว่าพวกเขาเลิกใช้แล้ว แต่เบราว์เซอร์ยังไม่ได้รับ ค่าเริ่มต้นจะยังคงใช้ใน Chrome รุ่น 37
Aquarelle

คำตอบ:


496
/* cellpadding */
th, td { padding: 5px; }

/* cellspacing */
table { border-collapse: separate; border-spacing: 5px; } /* cellspacing="5" */
table { border-collapse: collapse; border-spacing: 0; }   /* cellspacing="0" */

/* valign */
th, td { vertical-align: top; }

/* align (center) */
table { margin: 0 auto; }

6
มันน่าสังเกตว่าการเว้นช่องว่างระหว่างชายแดนดูเหมือนว่าจะใช้ได้เฉพาะเมื่อใช้คุณสมบัตินี้บนตารางด้วยเช่นกัน "เส้นขอบยุบ: แยกกัน"
Blowsie

3
@ ซามีร์ - ดูเหมือนว่าfloat:right;จะทำเคล็ดลับ jsfiddle.net/HGFH7
กรำ

70

สิ่งนี้จะช่วยแก้ปัญหาของคุณ:

td {
    /* <http://www.w3.org/wiki/CSS/Properties/text-align>
     * left, right, center, justify, inherit
     */
    text-align: center;
    /* <http://www.w3.org/wiki/CSS/Properties/vertical-align>
     * baseline, sub, super, top, text-top, middle,
     * bottom, text-bottom, length, or a value in percentage
     */
    vertical-align: top;
}



3

หรือสามารถใช้สำหรับตารางเฉพาะ

 <table style="width:1000px; height:100px;">
    <tr>
        <td align="center" valign="top">Text</td> //Remove it
        <td class="tableFormatter">Text></td>
    </tr>
</table>

เพิ่ม CSS นี้ในไฟล์ภายนอก

.tableFormatter
{
width:100%;
vertical-align:top;
text-align:center;
}


1
ไม่แนะนำอินไลน์ css
ซามูเอล Ramzan

ใช่คุณถูก. ฉันไม่แนะนำ เราไปหาไฟล์ css ภายนอก .ClassName {width: 100%; จัดเรียงข้อความ: กึ่งกลาง; จัดแนวตั้ง: ด้านบน;} ขอบคุณ
JaiSankarN
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.