Bảng là một phần quan trọng trong thiết kế website. Nó có thể được sử dụng để hiển thị thông tin, dữ liệu hoặc bố cục trên trang web. Với sự phát triển của các công nghệ web, hiển thị bảng đã trở thành một vấn đề dễ dàng hơn bao giờ hết. Và một trong những cách đơn giản nhất để tạo bảng trên trang web của bạn là sử dụng display table trong CSS. Trong bài viết này, chúng ta sẽ tìm hiểu về display table và cách nó có thể đơn giản hóa việc hiển thị bảng trên website của bạn.
1. Giới thiệu về Display Table trong CSS
1.1 Các thuộc tính của Display Table
Thuộc tính display trong CSS có một số giá trị mà bạn có thể sử dụng để tạo ra các kiểu hiển thị khác nhau. Một trong những giá trị đó là table và các thuộc tính liên quan đến nó như table-row, table-cell,…
- display: table: Biến một phần tử thành một block-level box chứa một bảng. Các phần tử con sẽ được hiển thị như các cell trong bảng.
- display: table-row: Tạo ra một hàng trong bảng. Các phần tử con sẽ được hiển thị như các ô trong hàng.
- display: table-cell: Biến một phần tử thành một ô trong bảng. Đây là giá trị mà bạn có thể sử dụng cho các phần tử con của table-row.
Ví dụ:
HTML:
<div class="table"> <div class="table-row"> <div class="table-cell">Cell 1</div> <div class="table-cell">Cell 2</div> </div> <div class="table-row"> <div class="table-cell">Cell 3</div> <div class="table-cell">Cell 4</div> </div> </div>
CSS
.table {
display: table;
width: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid #000;
padding: 5px;
}
Trong ví dụ trên, các phần tử với lớp .table, .table-row, và .table-cell được sử dụng để tạo ra một bảng giả lập, trong đó .table là bảng, .table-row là hàng, và .table-cell là ô của bảng.
Tuy nhiên, việc sử dụng các thuộc tính của bảng CSS như display: table, display: table-row, display: table-cell thường không được khuyến khích trong việc thiết kế giao diện do có sự hạn chế trong việc tùy chỉnh và không linh hoạt so với các phương pháp khác như Flexbox hay Grid Layout.
1.2 Cách sử dụng Display Table
Để sử dụng display: table, bạn có thể tạo cấu trúc bảng tương tự như trong HTML, nhưng với các phần tử <div> thay vì sử dụng các thẻ <table>, <tr>, <td>.
Ví dụ, hãy tạo một bảng đơn giản sử dụng display: table:
HTML
<div class="table"> <div class="table-row"> <div class="table-cell">Row 1 Cell 1</div> <div class="table-cell">Row 1 Cell 2</div> <div class="table-cell">Row 1 Cell 3</div> </div> <div class="table-row"> <div class="table-cell">Row 2 Cell 1</div> <div class="table-cell">Row 2 Cell 2</div> <div class="table-cell">Row 2 Cell 3</div> </div> </div>
CSS
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid #000;
padding: 5px;
}
Trong ví dụ này:
- .table được sử dụng để biểu diễn một bảng.
- .table-row là các hàng của bảng.
- .table-cell là các ô trong bảng.
CSS cho .table cũng bao gồm border-collapse: collapse; để loại bỏ khoảng cách giữa các ô trong bảng, giúp tạo ra hiệu ứng của một bảng truyền thống.
Lưu ý rằng việc sử dụng display: table để tạo bảng có thể hữu ích trong một số trường hợp, nhưng không linh hoạt như Flexbox hoặc Grid Layout trong việc tạo giao diện.
2. Tạo bảng đơn giản với Display Table
2.1 Tạo các hàng và cột trong bảng
Để tạo các hàng và cột trong một bảng sử dụng CSS display: table, bạn có thể sử dụng các phần tử <div> với các lớp tương ứng để biểu diễn các hàng và ô trong bảng.
Dưới đây là một ví dụ với ba hàng và ba cột:
HTML:
<div class="table"> <div class="table-row"> <div class="table-cell">1-1</div> <div class="table-cell">1-2</div> <div class="table-cell">1-3</div> </div> <div class="table-row"> <div class="table-cell">2-1</div> <div class="table-cell">2-2</div> <div class="table-cell">2-3</div> </div> <div class="table-row"> <div class="table-cell">3-1</div> <div class="table-cell">3-2</div> <div class="table-cell">3-3</div> </div> </div>
CSS
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid #000;
padding: 5px;
}
Trong ví dụ trên:
- .table là container bao bọc cho bảng.
- .table-row biểu diễn các hàng trong bảng.
- .table-cell là ô trong bảng.
CSS định dạng bảng bằng cách sử dụng border-collapse: collapse; để loại bỏ khoảng cách giữa các ô.
Bạn có thể thay đổi số lượng hàng và cột bằng cách thêm hoặc loại bỏ các phần tử .table-row và .table-cell trong mã HTML.
2.2 Thêm định dạng cho bảng
Một trong những lợi ích của sử dụng display table là khả năng thêm định dạng cho bảng một cách linh hoạt. Chúng ta có thể thêm các thuộc tính CSS như
HTML
<div class="table"> <div class="table-row header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> </div> <div class="table-row"> <div class="table-cell">1-1</div> <div class="table-cell">1-2</div> <div class="table-cell">1-3</div> </div> <div class="table-row"> <div class="table-cell">2-1</div> <div class="table-cell">2-2</div> <div class="table-cell">2-
CSS
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid #000;
padding: 8px;
text-align: center;
}
.header {
font-weight: bold;
background-color: #f2f2f2;
}
Trong ví dụ này:
- .header được áp dụng cho hàng đầu tiên để biểu diễn phần tiêu đề của bảng.
- background-color được sử dụng để tô màu nền của hàng tiêu đề.
- font-weight: bold; làm đậm cho văn bản trong hàng tiêu đề.
- text-align: center; canh chỉnh nội dung trong ô vào giữa.
Bạn có thể điều chỉnh và thêm các thuộc tính CSS khác để tạo giao diện bảng phù hợp với ý tưởng thiết kế của mình.
3. Định dạng tiêu đề bảng với Display Table
3.1 Sử dụng tiêu đề tự động
Để sử dụng tiêu đề tự động trong CSS, bạn có thể sử dụng thuộc tính display: table-caption; để tạo tiêu đề cho một phần tử dạng bảng. Dưới đây là một ví dụ:
HTML
<div class="table"> <div class="table-caption">Tiêu đề bảng</div> <div class="table-content"> <div class="table-row header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> </div> <div class="table-row"> <div class="table-cell">1-1</div> <div class="table-cell">1-2</div> <div class="table-cell">1-3</div> </div> <div class="table-row"> <div class="table-cell">2-1</div> <div class="table-cell">2-2</div> <div class="table-cell">2-3</div> </div> <div class="table-row"> <div class="table-cell">3-1</div> <div class="table-cell">3-2</div> <div class="table-cell">3-3</div> </div> </div> </div>
CSS
.table {
display: table;
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.table-caption {
display: table-caption;
caption-side: top;
font-weight: bold;
text-align: center;
font-size: 1.2em;
margin-bottom: 10px;
}
.table-content {
display: table;
width: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid #000;
padding: 8px;
text-align: center;
}
.header {
background-color: #f2f2f2;
}
Trong ví dụ trên:
- .table-caption được sử dụng để tạo tiêu đề tự động cho bảng.
- caption-side: top; đặt vị trí của tiêu đề là ở trên cùng của bảng.
- .table-content bao gồm nội dung chính của bảng.
- Các lớp .table-row và .table-cell giống như trong các ví dụ trước để tạo cấu trúc của bảng.
Điều chỉnh các thuộc tính CSS tùy thuộc vào ý tưởng thiết kế của bạn để tạo ra giao diện bảng mong muốn.
3.2 Tùy chỉnh tiêu đề bảng
Nếu muốn tùy biến hơn về giao diện và nội dung của tiêu đề bảng, chúng ta có thể thêm một phần tử vào bên trong phần tử cha của bảng và tùy chỉnh nó bằng CSS.
4. Các tính năng nâng cao của Display Table
4.1 Sắp xếp lại thứ tự các hàng và cột
Để sắp xếp lại thứ tự của các hàng và cột trong bảng được tạo bằng CSS display: table, bạn có thể sử dụng thuộc tính CSS order. Đây là cách bạn có thể sử dụng order để thay đổi thứ tự hiển thị của các hàng và cột:
Ví dụ, chúng ta có một bảng với các hàng và cột:
HTML
<div class="table"> <div class="table-row header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> </div> <div class="table-row"> <div class="table-cell">1-1</div> <div class="table-cell">1-2</div> <div class="table-cell">1-3</div> </div> <div class="table-row"> <div class="table-cell">2-1</div> <div class="table-cell">2-2</div> <div class="table-cell">2-3</div> </div> </div>
CSS
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid #000;
padding: 8px;
text-align: center;
}
.header {
font-weight: bold;
background-color: #f2f2f2;
}
/* Đổi thứ tự các hàng */
.table-row:nth-child(2) {
order: 3;
}
.table-row:nth-child(3) {
order: 2;
}
Trong ví dụ trên:
- Sử dụng order để đổi thứ tự hiển thị của các hàng. Bằng cách thiết lập order cho mỗi .table-row, bạn có thể thay đổi thứ tự hiển thị của chúng. Trong ví dụ này, hàng thứ hai được di chuyển xuống dưới hàng thứ ba vì nó có order: 3; và hàng thứ ba có order: 2;.
Bạn có thể áp dụng cùng nguyên tắc cho các .table-cell để sắp xếp lại thứ tự hiển thị của các ô trong hàng tương ứng. Điều này cho phép bạn điều chỉnh thứ tự hiển thị của các hàng và cột trong bảng một cách linh hoạt.
4.2 Các thuộc tính linh hoạt cho các hàng và cột
Trong CSS, có một số thuộc tính linh hoạt mà bạn có thể sử dụng để tùy chỉnh các hàng và cột trong bảng, đặc biệt khi sử dụng CSS display: table. Dưới đây là một số thuộc tính phổ biến:
Cho các hàng (.table-row):
- order: Điều chỉnh thứ tự hiển thị của các hàng.
- flex-grow: Xác định tỷ lệ phần trăm mà các hàng sẽ mở rộng trên trục chính.
- flex-shrink: Điều chỉnh tỷ lệ phần trăm mà các hàng sẽ co lại khi không đủ chỗ trên trục chính.
- flex-basis: Xác định kích thước ban đầu của các hàng trên trục chính.
Cho các ô (.table-cell):
- order: Điều chỉnh thứ tự hiển thị của các ô trong hàng.
- flex-grow: Xác định tỷ lệ phần trăm mà các ô sẽ mở rộng trên trục chính.
- flex-shrink: Điều chỉnh tỷ lệ phần trăm mà các ô sẽ co lại khi không đủ chỗ trên trục chính.
- flex-basis: Xác định kích thước ban đầu của các ô trên trục chính.
Ví dụ, để sử dụng flex-grow cho các hàng:
.table-row {
flex-grow: 1; /* Tất cả các hàng sẽ có cùng tỷ lệ mở rộng */
}
Hoặc để sử dụng order cho các ô trong hàng:
.table-cell {
order: 2; /* Điều chỉnh thứ tự hiển thị của các ô */
}
Bằng cách sử dụng các thuộc tính này, bạn có thể linh hoạt tùy chỉnh cách hàng và cột được hiển thị trong bảng của mình.
Kết luận
Trên đây là những thông tin cơ bản về display table trong CSS và cách sử dụng nó để tạo bảng trên website của bạn. Điều này giúp cho việc hiển thị bảng trở nên đơn giản và linh hoạt hơn bao giờ hết. Hy vọng bài viết này sẽ giúp bạn hiểu rõ hơn về công nghệ hiển thị bảng và áp dụng nó vào thiết kế website của mình.
