Điều gì thay thế cho cellpadding, không gian di động, valign và căn chỉnh trong các bảng HTML5?

320

Trong Visual Studio , tôi thấy những cảnh báo sau:

Xác thực (HTML 5): Thuộc tính 'cellpadding' không phải là thuộc tính hợp lệ của phần tử 'bảng'.

Xác thực (HTML 5): Thuộc tính 'không gian ô' không phải là thuộc tính hợp lệ của phần tử 'bảng'.

Xác thực (HTML 5): Thuộc tính 'valign' không phải là thuộc tính hợp lệ của thành phần 'td'.

Xác thực (HTML 5): Thuộc tính 'align' không phải là thuộc tính hợp lệ của thành phần 'td'.

Nếu chúng không phải là thuộc tính hợp lệ trong HTML5 , cái gì sẽ thay thế chúng trong CSS?

— Mã Maverick
nguồn

4

Tôi đã thấy rằng ngay cả với HTML5, các thuộc tính di động và không gian di động vẫn được yêu cầu. Điều đó có nghĩa là, không cần khai báo rõ ràng các thuộc tính đó, phần đệm và khoảng cách mặc định được áp dụng. Do đó, tôi thấy rằng tôi phải luôn đặt chúng thành giá trị "0" để vô hiệu hóa các giá trị mặc định. Có thể là họ đã bị phản đối nhưng các trình duyệt vẫn chưa chọn họ. Các giá trị mặc định vẫn được áp dụng trong Chrome phiên bản 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; }

— vét
nguồn

6

Cần lưu ý rằng khoảng cách đường viền dường như chỉ hoạt động khi sử dụng thuộc tính này trên bảng quá "sập biên: tách biệt;"

— Blowsie

3

@Samir - Có vẻ như float:right;sẽ làm điều đó. jsfiddle.net/HGFH7

— Drudge

70

Điều này sẽ giải quyết vấn đề của bạn:

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;
}

— Cole Johnson
nguồn

FYI: được chuyển từ stackoverflow.com/questions/10367387/

— Shog9

13

Trên bàn cụ thể

<table style="border-collapse: separate; border-spacing: 10px;" >
    <tr>
      <td>Hi</td>
      <td>Hello</td>
    <tr/>
    <tr>
      <td>Hola</td>
      <td>Oi!</td>
    <tr/>
</table>

Mở rộng đoạn trích

— Xtian11
nguồn

3

Ngoài ra, có thể sử dụng cho bảng cụ thể

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

Thêm css này trong tập tin bên ngoài

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

— JaiSankarN
nguồn

FYI: được chuyển từ stackoverflow.com/questions/10367387/

— Shog9

1

Css nội tuyến không được đề xuất.

— Samuel Ramzan

Có bạn đúng. tôi không khuyến khích. Chúng tôi đi cho tập tin css bên ngoài .ClassName {width: 100%; văn bản-align: trung tâm; dọc-align: top;} Cảm ơn

— JaiSankarN