CSS Styling Tables: Định dạng bảng (Bản mở rộng)

Chúng ta có thể định nghĩa style cho bảng bằng CSS. Các thuộc tính sau được dùng để style <table> và các phần tử con:

Các thuộc tính chính

• border — border-width, border-style, border-color
• border-collapse — Border chung (collapse) hay riêng (separate)
• caption-side — Vị trí caption (top/bottom)
• empty-cells — Hiển thị/ẩn ô trống (show/hide)
• table-layout — Thuật toán bố cục: auto (mặc định) hoặc fixed

Ví dụ 1: Border, caption-side, font-family

<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: 'Bookman Old Style', serif; }
th { letter-spacing: 1.9px; }
#one { border-right: thick solid blue; }
td { text-align: center; }
</style>
</head>
<body>
<h2>Employee List</h2>
<div>
<table>
    <tr><th id="one">Employee</th><th>Department</th></tr>
    <tr><td>John</td><td>Marketing</td></tr>
    <tr><td>Brad</td><td>Finance</td></tr>
    <tr><td>Tim</td><td>IT</td></tr>
    <tr><td>Steve</td><td>Operations</td></tr>
</table>
</div>
</body>
</html>

Ví dụ 2: empty-cells: hide, box-shadow, float table

<!DOCTYPE html>
<html>
<head>
<style>
table {
    float: left; empty-cells: hide;
    box-shadow: inset 0 0 4px orange;
    margin: 6px; padding: 6px;
    border: 1px solid black;
}
tr { box-shadow: inset 0 0 10px greenyellow; }
td {
    font-style: italic;
    box-shadow: inset 0 0 8px red;
    border: 1px solid black; padding: 6px;
}
th { border: 1px solid black; padding: 6px; }
</style>
</head>
<body>
<table>
    <caption>Demo Table</caption>
    <tr><th>Head 1</th><th>Head 2</th><th>Head 3</th></tr>
    <tr><td>demo</td><td></td></tr>
    <tr><td></td><td></td><td>demo</td></tr>
    <tr><td></td><td>demo</td><td></td></tr>
</table>
</body>
</html>

Chi tiết thuộc tính

border-collapse

table { border-collapse: collapse; } /* Border gộp, không gap */
table { border-collapse: separate; border-spacing: 10px 5px; } /* Tách, có gap */

table-layout

• auto: Browser tính width dựa trên content — chậm, linh hoạt
• fixed: Width theo <col> hoặc row đầu — nhanh, ổn định

.fixed-table { table-layout: fixed; width: 100%; }
.col-name { width: 30%; }
.col-desc { width: 70%; }

empty-cells

• show (mặc định): Vẽ border/background cho ô trống
• hide: Không vẽ border/background ô trống
• Chỉ có hiệu lực khi border-collapse: separate

caption-side

• top (mặc định), bottom
• Caption là block-level, có thể style như div

Modern Table CSS Pattern

.table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums; /* Số căn phải đẹp */
}
.table th, .table td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color, #dee2e6);
    text-align: left;
}
.table thead th {
    background: var(--surface-color, #f8f9fa);
    font-weight: 600;
    white-space: nowrap;
}
.table tbody tr:nth-child(even) { background: var(--striped-color, rgba(0,0,0,0.02)); }
.table tbody tr:hover { background: var(--hover-color, rgba(0,0,0,0.05)); }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }