Làm việc với bảng

Sau khi đã làm quen với dữ liệu văn bản, chúng ta sẽ bước tiếp đến một cách trình bày dữ liệu mới. Đó là trình bày dữ liệu dưới dạng bảng (table).

Khái niệm

Bảng (table) là một tập hợp dữ liệu có cấu trúc bao gồm các dòng và các cột. Với cấu trúc bảng, người dùng có thể dễ dàng tra cứu hoặc so sánh các dữ liệu.

MSSV Họ Tên Năm Sinh
TH2001 Nguyễn Hoàng Long 2001
TH2002 Trần Ngọc Ánh 2001
TH2003 Phan Anh Vũ 2002

Bạn có thể tìm dược dữ liệu tổ chức dưới dạng bảng ở bất cứ đâu. Đặc biệt, với các bạn làm việc trong lĩnh vực CNTT thì dữ liệu tổ chức dưới dạng bảng không hề xa lạ đúng không nào?

Trên trang tài liệu về tags table của mozilla, người ta còn giới thiệu một văn bản được tổ chức dưới dạng bảng. Văn bản này có nội dung về điều tra dân số ở Mỹ vào những năm 1800.

Cách mà bảng làm việc

Một cách trực quan, chúng ta có thể nhận thấy. Bảng gồm các dòng và cột. Thông thường, các cột sẽ mô tả thuộc tính của đối tượng. Mỗi dòng sẽ tương ứng với một đối tượng cụ thể. Các dòng và cột giao nhau tạo thành các ô dữ liệu (cell). Khi đọc dữ liệu của 1 ô, ta xét đến mối quan hệ của ô đó với dòng và cột mà nó thuộc về.

Styling

Tag table được thiết kế kèm theo nhiều thuộc tính để định dạng style cho nó. Tuy nhiên, chúng ta sẽ được khuyến khích không sử dụng nó, thay vào đó chúng ta sẽ sử dụng CSS để định dạng style cho các bảng của mình.

Để không tốn thời gian của các bạn, chúng ta sẽ không cần học những thứ không cần xài. Nhưng nếu không định dạng style, chúng ta sẽ rất khó theo dõi được cấu trúc của bảng. Vậy mình sẽ cung cấp cho các bạn 1 đoạn mã CSS nhỏ. Việc của các bạn là thêm nó vào cuối phần nội dung (nghĩa là trước tag đóng) của phần tử head.

Khi nào nên sử dụng bảng và khi nào không nên dùng nó.

Tất nhiên, khi dữ liệu của chúng ta có cấu trúc rõ ràng. Chúng ta không thể bỏ qua cách trình bảy dữ liệu dạng bảng được đúng không nào.

Tag table được phát triển khá đầy đủ, tạo nên tính linh hoạt mạnh mẽ. Do đó, trong quá khứ và tận tới hiện tại, vẫn còn một số lập trình viên lợi dụng nó để xây dựng bố cục cho trang web. Ví dụ với một bố cục như thế này.

Bạn sẽ khó cưỡng lại được cám dỗ sử dụng tag table để xây dựng bố cục. Nhưng đừng, làm vậy. Vì rất nhiều lý do ảnh hưởng đến hiệu năng trang web cũng như HTML/CSS cung cấp cho chúng ta rất nhiều phương án khác để làm việc này.

Tạo bảng dữ liệu đầu tiên của bạn

Đầu tiên, chúng ta tổng hợp lại một số khái niệm ở mục 1. Liên quan đến bảng gồm các khái niệm và các tag tương ứng:

  • bảng – table
  • dòng – tr (table row)
  • ô dữ liệu – td  (table data)

Ở mức cơ bản, khi các dòng chứa cùng một số lượng ô dữ liệu (cell) ta sẽ hình thành được các cột. Vậy, với các tags trên, chúng ta sẽ phối hợp chúng thành một bảng dữ liệu. Theo ý định của mình, mình sẽ tạo 1 bảng có 2 dòng, mỗi dòng có 3 cột.

Bước 1: Mình sẽ tạo một phần tử table

Bước 2: Thêm vào phần nội dung của phần tử table 2 phần tử dòng (2 phần tử tr)

Bước 3: Ở mỗi phần tử dòng, mình tiếp tục thêm 3 phần tử ô dữ liệu, với nội dung vị trí của nó

Kết quả của mình được một bảng dữ liệu.

Việc của bạn: tạo một file table.html sau đó copy/paste đoạn code mẫu phía trên (nhớ kèm theo đoạn CSS ở mục 1) và xem thử nó có giống kết quả của mình không.

Thêm tiêu đề cho bảng

Vậy là bạn đã có thể tạo được các bảng dữ liệu, nhưng nếu nhìn kỹ một xíu. Chúng ta có thể nhận thấy bảng vừa tạo của chúng ta vẫn thiếu thiếu thứ gì đó. Đó chính là tiêu đề – một cách tường minh hơn là tên cột.

Ở ví dụ đầu tiên, mình đã sử dụng 1 mánh nhỏ, là in đậm và canh giữa các giá trị của dòng đầu tiên để sử dụng nó như là dòng tiêu đề. Tuy nhiên, xuyên suốt bài trước, mình luôn nói đến vấn đề ngữ nghĩa. Và để phục vụ cho mục đích đó. HTML cung cấp cho chúng ta tag th (table header). Tag th cũng làm việc tương tự như tag td nhưng chúng ta ngầm hiểu, ô dữ liệu này có mục đích là tiêu đề.

Bây giờ chúng ta sẽ thực hiện lại ví dụ bảng thông tinh sinh viên ở đầu bài. Không sử dụng mánh nữa mà làm một cách chính thống. Các bước thực hiên:

  1. Tạo phần tử table
  2. Trong phần tử table, thêm 4 phần tử tr
  3. Ở phần tử tr đầu tiên, chúng ta thêm 3 phần tử th có nội dung lần lượt là MSSV, Họ tên, Năm sinh.
  4. Ở 3 phần tử tr kế kiếp, mỗi phần tử chúng ta thêm 3 phần tử td với nội dung tương ứng.

Sau khi các bạn làm xong, hãy so sánh với kết quả của mình.

Cho phép các ô trải rộng trên nhiều dòng và cột

Giới thiệu

Nãy giờ chúng ta đang xét đến các bảng trong điều kiện đơn giản. Số lượng các dòng, các ô trên từng dòng là bằng nhau. Nhưng trong thực tế, các bạn sẽ gặp các trường hợp phức tạp hơn nhiều. Ví dụ:

Họ Tên Thông Tin Lớp
Năm Sinh Giới Tính

Nếu các bạn đã làm việc với các phần mềm bảng tính như excel, thì chúng ta khá quen thuộc với chức năng MERGE CELL đúng không nào. Lúc này, 1 ô dữ liệu của chúng ta sẽ trải rộng trên nhiều dòng hoặc nhiều cột.

Và khi làm việc với HTML, chúng không đơn giản như với excel. Chúng ta không còn được hỗ trợ bởi giao diện đồ họa nữa mà phải tự dựa vào trí tưởng tượng và khả năng tính toán của mình.

Để làm được việc này, đầu tiên các bạn cần biết. Các tags tdth được hỗ trợ 2 thuộc tính quan trọng, cho phép chúng trả dài trên các dòng và cột:

  • colspan: mô tả số cột mà chúng trải dài. Giá trị được gán phải là số tự nhiên lớn hơn 0.
  • rowspan: mô tả số dòng mà chúng trải dài. Giá trị được gán phải là số tự nhiên lớn hơn 0.

Kế đến là cách hoạt động của trình duyệt web khi hiển thị một bảng dữ liệu. Rất đơn giản, nó sẽ xử lý theo hướng chúng ta đọc một cuốn sách. Nghĩa là từ trên xuống và từ trái qua phải.

Tính toán thông số

Phân tích lại ví dụ phía trên ta có:

  • Ở dòng đầu tiên
    • Ô “Họ Tên” chiếm 1 cột và 2 dòng
    • Ô “Thông Tin” chiếm 2 cột và 1 dòng
    • Ô thứ 3 đã bị ô “Thông Tin” chiếm chỗ
    • Ô “Lớp” chiếm 1 cột và 2 dòng
  • Ở dòng thứ 2
    • Ô đầu tiên đã bị ô “Họ Tên” ở dòng 1 chiếm chỗ
    • Ô thứ 2 là “Năm Sinh” chiếm 1 cột và 1 dòng
    • Ô thứ 3 là “Giới Tính” chiếm 1 cột và 1 dòng
    • Ô thứ 4 cũng bị ô “Lớp” ở dòng 1 chiếm chỗ
  • Ở dòng thứ 3 mọi ô dữ liệu đều bình thường, không cần xét đến

Hiện thực

Khi đã làm quen, các bạn có thể điền được giá trị colspan và rowspan một cách dễ dàng, nhưng khi mới bắt đầu, hãy cùng mình làm một cách thủ công.

Bước 1: Tạo một bảng có 3 dòng, mỗi dòng có 4 cột.

Bước 2: Dựa vào phân tích ở phía trên, những ô đã bị chiếm chỗ chúng ta xóa đi. Những ô chiếm nhiều hơn một cột hay nhiều hơn 1 dòng sẽ điền các thuộc tính colspan và rowspan tương ứng

Bước 3: Điền các nội dung tương ứng vào đúng vị trí.

Bước 4: Kiểm tra xem, kết quả của bạn có giống của mình không

Các tính năng nâng cao

Các tính năng này tập trung vào vấn đề ngữ nghĩa cho HTML, bạn có thể áp dụng nếu muốn file HTML của mình tốt hơn.

caption

HTML cung cấp tag caption giúp chúng ta có thể dễ dàng tạo tiêu đề cho bảng dữ liệu. Các bạn chỉ cần thêm phần tử caption vào phần đầu của phần tử table.

thead, tfoot và tbody

HTML cung cấp cho chúng ta 3 tags thead, tfoot và tbody với mục đích làm rõ ngữ nghĩa của một bảng dữ liệu.

  • thead sẽ chứa các dòng tiêu đề
  • tbody sẽ chứa các dòng dữ liệu
  • tfoot sẽ chứa các dòng tổng kết

Thứ tự hiển thị các tags này sẽ là thead -> tbody -> tfoot. Tuy nhiên, khi khai báo ta cần khai báo thead và tfoot trước sau đó mới tới tbody. Dưới đây là một ví dụ

Bạn hãy thử copy/paste ví dụ của mình về file html của bạn, so sánh kết quả. Sau đó thử tự mình xây dựng một bảng như bên dưới với đầy đủ 3 tags thead, tbody và tfoot.

Mục đích Ngày Số tiền
Cắt tóc 20/2 100,000
Mua đồ siêu thị 21/2 1,200,000
Đóng tiền điện 22/2 450,000
Tiền đám cưới bạn 22/2 500,000
Tổng cộng 2,250,000

Các bảng lồng nhau

Tương tự như việc các danh sách có thể lồng nhau. Đây là một tính chất cơ bản của HTML. Tuy nhiên, nếu các bạn thuần thục trong việc sử dụng các thuộc tính colspanrowspan. Có lẽ chúng ta sẽ không cần lồng quá nhiều bảng vào nhau.

Các bạn có thể tham khảo thêm về tag table tại đây.