Cấm các không gian sôi nổi trong các bảng HTML của bạn

Nếu bạn đang sử dụng các bảng cho bố cục trang - một số không-không có trong XHTML , có thể bạn sẽ trải nghiệm việc bổ sung không gian thêm không đáng kể trong bố cục của mình. Để khắc phục vấn đề này, bạn cần phải kiểm tra cả định nghĩa bảng HTML của bạn và các chi tiết cụ thể của bất kỳ bảng định kiểu điều chỉnh nào.

Định nghĩa bảng HTML

Thẻ HTML cho các bảng theo mặc định không kiểm soát được một số yêu cầu khoảng trắng. Xác minh ba điều về thẻ bảng trong tài liệu HTML của bạn:

  1. Bảng của bạn có thuộc tính cellpadding được đặt thành 0 không?
    1. cellpadding = "0"
  2. Bảng của bạn có thuộc tính cellspacing được đặt thành 0 không?
    1. cellspacing = "0"
  3. Có bất kỳ dấu cách nào trước hoặc sau nội dung của bạn và các thẻ của bảng không?

Số 3 là kicker. Nhiều trình soạn thảo HTML muốn có tất cả các mã được đặt cách nhau, để dễ đọc. Nhưng nhiều trình duyệt giải thích các tab, dấu cách và khoảng cách vận chuyển đó là không gian thừa mong muốn bên trong các bảng của bạn. Loại bỏ khoảng trống xung quanh các thẻ của bạn và bạn sẽ có các bảng sắc nét hơn.

Style Sheets

Tuy nhiên, nó có thể không phải là HTML. Cascading style sheets làm điều khiển một số thuộc tính hiển thị của bảng và tùy thuộc vào trang, bạn có thể hoặc có thể không có cố ý thêm bảng cụ thể CSS ở nơi đầu tiên.

Quét tệp CSS quản lý cho bất kỳ giá trị nào sau đây bên trong thuộc tính bảng, thứ hoặc td và điều chỉnh khi cần:

Giải pháp thay thế

Mặc dù bạn vẫn có thể sử dụng các bảng HTML — tiêu chuẩn được thiết lập tốt và được hỗ trợ phổ biến trong các trình duyệt hiện nay — thiết kế web đáp ứng hiện đại nhất sử dụng các bảng định kiểu xếp tầng để đặt các phần tử trên một trang. Các bảng vẫn có ý nghĩa cho mục đích ban đầu của chúng nhằm hiển thị dữ liệu dạng bảng, nhưng để tổ chức bố cục và nội dung của một trang, bạn nên sử dụng layout CSS tốt hơn nhiều.