Bảng trong CSS - CSS Tables

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    7 thg 11, 2022

  • Số lượt xem

    573 lượt xem


Để đa dạng hoá Tables trong HTML, CSS cung cấp cho ta các thuộc tính để định dạng Tables.

Table Borders

Để chỉ định đường viền table trong CSS, hãy sử dụng thuộc tính border.

Ví dụ dưới đây chỉ định một border liền cho các element <table>, <th> và <td>:

table, th, td {    border: 1px solid;  }

 

Full-Width Table

Table trên có vẻ nhỏ trong một số trường hợp. Nếu bạn cần một bảng kéo dài toàn bộ màn hình (toàn chiều rộng), hãy thêm width: 100% vào element <table>:

table {    width: 100%;  }

Lưu ý rằng bảng trong các ví dụ trên có đường viền kép. Điều này là do cả bảng và các thành phần có đường viền riêng biệt. Để loại bỏ các đường viền kép, hãy xem ví dụ bên dưới.

Collapse Table Borders

Thuộc tính border-collapse đặt xem có nên thu gọn các đường viền table thành một đường viền duy nhất hay không:

table {    border-collapse: collapse;  }

Nếu bạn chỉ muốn có đường viền xung quanh bảng, chỉ xác định thuộc tính border cho <table>:

table {    border: 1px solid;  }

 

Table Width and Height

Chiều rộng và chiều cao của bảng được xác định bởi các thuộc tính widthheight.

Ví dụ bên dưới đặt chiều rộng của bảng thành 100% và chiều cao của các element <th> thành 70px:

table {    width: 100%;  }    th {    height: 70px;  }

Để tạo một bảng chỉ nên kéo dài một nửa trang, hãy sử dụng width: 50%:

table {    width: 50%;  }

 

CSS Table Alignment

Horizontal Alignment

Thuộc tính text-align đặt căn chỉnh theo chiều ngang (như trái, phải hoặc chính giữa) của nội dung trong <th> hoặc <td>.

Theo mặc định, nội dung của các element <th> được căn giữa và nội dung của các element <td> được căn trái.

Để căn giữa nội dung của các element <td>, hãy sử dụng text-align: center:

td {    text-align: center;  }

Để căn trái nội dung, hãy buộc căn trái của các element <th>, với thuộc tính text-align: left:

th {    text-align: left;  }

 

Vertical Alignment

Thuộc tính vertical-align đặt căn chỉnh theo chiều dọc (như trên cùng, dưới cùng hoặc giữa) của nội dung trong <th> hoặc <td>.

Theo mặc định, căn chỉnh dọc của nội dung trong bảng là giữa (cho cả element <th> và <td>).

Ví dụ sau đặt căn chỉnh văn bản theo chiều dọc xuống dưới cùng cho các element <td>:

td {    height: 50px;    vertical-align: bottom;  }

 

CSS Table Style

Table Padding

Để kiểm soát khoảng cách giữa border và content trong table, hãy sử dụng thuộc tính padding trên các element <td> và <th>:

th, td {    padding: 15px;    text-align: left;  }

 

Horizontal Dividers

Thêm thuộc tính border-bottom vào <th> và <td> cho các dải phân cách ngang:

th, td {    border-bottom: 1px solid #ddd;  }

 

Hoverable Table

Sử dụng bộ chọn :hover trên <tr> để đánh dấu các hàng trong table khi di chuột qua:

tr:hover {background-color: coral;}

 

CSS Responsive Table

Table sẽ hiển thị thanh cuộn ngang nếu màn hình quá nhỏ để hiển thị toàn bộ nội dung:

Thêm một element (như <div>) với overflow-x:auto xung quanh element <table> để responsive:

<div style="overflow-x:auto;">    <table>  ... table content ...  </table>    </div>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.