Hướng dẫn thiết kế bố cục trang web bằng thẻ TABLE

Trong giai đoạn đầu của phát triển web, thẻ <table> thường được sử dụng làm công cụ chính để định hình bố cục (layout) cho trang web. Mặc dù ngày nay chúng ta đã có các kỹ thuật hiện đại như Flexbox hay CSS Grid, việc hiểu cách hoạt động của bảng vẫn rất hữu ích để nắm vững kiến thức nền tảng về cấu trúc dữ liệu và bảng biểu.

1. Nguyên lý cơ bản của bố cục bằng TABLE

Bố cục bảng hoạt động bằng cách chia trang web thành các hàng (<tr>) và các cột (<td>). Bạn có thể kết hợp các ô bằng thuộc tính colspan (gộp cột) và rowspan (gộp hàng) để tạo ra các vùng nội dung khác nhau như Header, Sidebar, Content và Footer.

2. Cấu trúc một trang web mẫu

Dưới đây là ví dụ về một cấu trúc bố cục cơ bản sử dụng bảng:


<table width="100%" border="1" cellpadding="10" cellspacing="0">
    <!-- Phần Header -->
    <tr>
        <td colspan="2" align="center"><h1>Header Trang Web</h1></td>
    </tr>
    
    <!-- Phần Nội dung chính và Sidebar -->
    <tr>
        <td width="30%" valign="top">
            <h3>Menu</h3>
            <ul>
                <li>Trang chủ</li>
                <li>Giới thiệu</li>
            </ul>
        </td>
        <td width="70%" valign="top">
            <h2>Nội dung chính</h2>
            <p>Đây là khu vực hiển thị nội dung bài viết.</p>
        </td>
    </tr>
    
    <!-- Phần Footer -->
    <tr>
        <td colspan="2" align="center">Footer - Bản quyền thuộc về website của bạn</td>
    </tr>
</table>

3. Các thuộc tính quan trọng cần lưu ý

Thuộc tính Mô tả colspan Gộp nhiều cột thành một ô duy nhất. rowspan Gộp nhiều hàng thành một ô duy nhất. cellpadding Khoảng cách giữa nội dung bên trong và viền của ô. cellspacing Khoảng cách giữa các đường viền của các ô.

4. Tại sao không nên dùng TABLE cho bố cục hiện đại?

"Việc sử dụng bảng để dàn trang được coi là một kỹ thuật lỗi thời (deprecated). Các công cụ hiện đại như CSS Flexbox và Grid giúp tách biệt nội dung (HTML) và trình bày (CSS) tốt hơn, giúp trang web dễ bảo trì và tối ưu cho thiết bị di động (Responsive)."

  • Khó bảo trì: Mã nguồn trở nên phức tạp và lồng ghép quá sâu.

  • Tốc độ tải trang: Trình duyệt mất nhiều thời gian hơn để hiển thị bảng so với các thẻ <div>.

  • Khả năng truy cập: Các thiết bị hỗ trợ người khiếm thị gặp khó khăn khi đọc cấu trúc bảng dàn trang.

Lời khuyên: Hãy chỉ sử dụng thẻ <table> cho mục đích hiển thị dữ liệu dạng bảng (như danh sách sản phẩm, bảng giá, lịch trình) thay vì sử dụng chúng để dàn trang tổng thể.