Bảng trung tâm HTML

Trước đó, các bảng HTML được sử dụng để xác định cả cấu trúc và giao diện trực quan của các trang web, trong đó vị trí của bảng có thể được chỉ định trực tiếp trong HTML. Ví dụ: để đặt căn chỉnh của bảng thành trung tâm, người ta có thể chỉ cần viết

…

Tuy nhiên, việc căn chỉnh các bảng của bạn theo cách này không còn chính xác nữa và không được dùng trong HTML5. Đó là bởi vì các tiêu chuẩn Web hiện đại quy định sự tách biệt giữa cấu trúc [HTML] và kiểu dáng [CSS] và phương pháp trên đã vi phạm nguyên tắc đó

HTML không bao giờ được sử dụng để thiết lập cách một phần tử xuất hiện; . Vậy đâu là cách chính xác để căn giữa một bảng trong CSS?

Chúng tôi biết một hoặc hai điều về bảng, vì chúng tôi đã tạo một plugin bảng WordPress tuyệt vời, vì vậy hãy đi sâu vào

Làm cách nào tôi có thể sử dụng CSS để căn giữa bảng?

CSS đặt giao diện của trang, cho phép bạn kiểm soát giao diện và vị trí của mọi thành phần, bao gồm thành phần bảng và tất cả các thành phần phụ của nó như th, tr và td

Trước tiên, hãy tìm hiểu cách căn giữa bảng 'đúng' bằng CSS. Nếu lề phải và trái của bạn có giá trị như nhau, các trình duyệt hiện đại sẽ hiển thị bảng ở giữa. Một cách dễ dàng để đạt được điều này là đặt cả hai lề thành tự động

Dưới đây là một ví dụ về cách viết cái này trong CSS

table

{ 

margin-right: auto;

margin-left: auto;

}

Lưu ý rằng bạn không thể căn giữa bảng giống như với văn bản —. e. g. bằng cách sử dụng “căn chỉnh văn bản. trung tâm". Điều này là do phần tử bảng là phần tử cấp khối, trái ngược với phần tử nội tuyến. “căn chỉnh văn bản. center” sẽ chỉ căn giữa nội dung trong dòng, chẳng hạn như văn bản trong bảng, chứ không phải chính bảng đó

Tuy nhiên, đối với các phiên bản Internet Explorer cũ hơn, có một lỗi trong đó các phần tử cấp khối được coi là phần tử nội tuyến. Vì vậy, cách duy nhất để căn giữa một bảng để làm việc với một số phiên bản IE là đặt rõ ràng “text-align. center” trên phần tử cha của bảng [e. g. phần tử body như hình bên dưới]

body {

    text-align: center;

}

Bạn có thể kiểm tra xem các trình duyệt khác nhau sẽ hoạt động như thế nào với các kiểu khác nhau bằng cách sử dụng “lề-trái. Tự động; . tự động” hoặc “căn chỉnh văn bản. trung tâm"

Chúng ta sẽ xem xét cách căn giữa một bảng trong cả trình duyệt hiện đại và cũ hơn để nó trông phù hợp

Các ví dụ sẽ có định dạng chung sau

Styles get applied to either

.center1

{ 

margin-right: auto;

margin-left: auto;

}

.center2

{ 

text-align: center;

}

.centertbl

{ 

text-align: center;

}
 

.centertbl table

{ 

margin-left: auto;

margin-right: auto;

text-align: left;

}

table {

    margin: 0 auto;

}

table {

    margin-left: auto;

    margin-right: auto;

}

table {

    width: 50%; 

    margin: 0 auto; /* same as margin: 0 25%;  */

}

table

{ 

margin-right: auto;

margin-left: auto;

}