[WPtips] Chia cột và tạo bảng trên WordPress

Xin chào Mình là Sera đây Hôm nay mình sẽ hướng dẫn các bạn cách chia cột và tạo bảng trên WordPress. Đây là bài hướng dẫn mở đầu năm mới 2020, các bạn hãy chuẩn bị tinh thần đi vì nó rất là dài đấy

Trước khi đi vào nội dung chi tiết của bài này, các bạn cần lưu ý những điều sau:

Video 1. Thay đổi Ngôn ngữ blog và Ngôn ngữ giao diện

Bây giờ chúng ta sẽ đi vào nội dung chi tiết nhé

1. Chia cột trên WordPress

Trong phần này, mình sẽ hướng dẫn các bạn cách chia cột trên trình soạn thảo văn bản Cổ điển (Phiên bản 1) và trình soạn thảo văn bản Block-Editor. Nếu các bạn đọc hướng dẫn bằng lời (hoặc kèm theo hình ảnh) mà vẫn chưa hiểu thì cuối mỗi phần sẽ có video minh hoạ để các bạn dễ hình dung hơn

1.1. Chia cột trên trình soạn thảo văn bản Cổ điển (Phiên bản 1)

Mình nhớ từng đọc ở đâu đó (hình như là trang hỗ trợ của WordPress) viết rằng không nên chia cột bằng cách dùng code tạo bảng thì phải Tuy nhiên, cá nhân mình lại thích chia cột bằng code tạo bảng hơn vì mình cảm thấy nó dễ điều chỉnh và tiện hơn khi dùng code chia cột. Nhưng mà để theo đúng quy trình, mình vẫn sẽ hướng dẫn các bạn cách chia cột bằng cách sử dụng thuộc tính float theo hướng dẫn trong bài Advanced HTML trên trang hỗ trợ của WordPress nhé Nhắc lại cho bạn nào đã quên, khi sử dụng code HTML để định dạng, các bạn phải chuyển trình soạn thảo sang giao diện HTML nhé

• Để chia nội dung bài viết thành 2 cột, các bạn hãy dán code sau đây vào vị trí muốn chia cột:

• Để chia nội dung bài viết thành 3 cột, các bạn hãy dán code sau đây vào vị trí muốn chia cột:

Trên đây là 2 code chia cột mình lấy từ bài Advanced HTML trên trang hỗ trợ của WordPress. Trong các code này, độ rộng của các cột được tính theo đơn vị phần trăm (%). Nếu muốn thay đổi độ rộng của các cột trong code mẫu, các bạn hãy sửa lại giá trị của thuộc tính width trong code. Ví dụ, ở code chia 2 cột, nếu mình sửa độ rộng của cột thứ nhất thành 30% thì code của mình sẽ như sau:

🍇 Kết quả:

Như mình đã nói ở trên, mình thích chia cột bằng cách dùng code tạo bảng hơn là dùng code chia cột như WordPress hướng dẫn. Lí do là nếu chia cột bằng cách dùng code tạo bảng thì ít xảy ra lỗi hơn, còn nếu dùng code chia cột thì có thể phải điều chỉnh lại độ rộng giữa các cột khá nhiều. Chi tiết về cách tạo bảng mình sẽ viết rõ hơn ở phần sau, phần này mình chỉ đưa code để các bạn chia cột thôi nhé

Lưu ý: Các code chia cột dưới đây được mình mặc định với phông chữ Arial, cỡ chữ 16px, màu chữ đen và căn lề hai bên. Nếu các bạn muốn thay đổi các thuộc tính này, hãy đọc bài HTML và một số code HTML cơ bản cho blog WordPress để biết nhé Sau khi chèn code xong (cả code dùng thuộc tính float và code tạo bảng để chia cột), các bạn có thể thực hiện soạn thảo vào các cột như bình thường. Nhưng để thuận tiện và ít xảy ra lỗi hơn, các bạn không nên soạn thảo trực tiếp trên các cột mà hãy soạn thảo riêng nội dung từng cột sang một bài viết mới ở dạng bản nháp (Draft), sau đó mới sao chép code HTML của những phần soạn thảo riêng đó và dán vào phần nội dung của các cột.

🍇 Code chia 2 cột 🍇

🍇 Code chia 3 cột 🍇

🍇 Code chia 4 cột 🍇

Nếu muốn chia bài viết thành nhiều hơn 4 cột, các bạn có thể đọc phần cách tạo bảng ở phía dưới để hiểu và thêm code nhé. Trong các code trên, độ rộng của các cột sẽ được tự động điều chỉnh, nếu các bạn muốn thay đổi độ rộng mặc định này, hãy thêm thuộc tính width vào các thẻ td. Ở đây, mình mặc định khoảng cách giữa các cột là 15px (đây là khoảng cách bên trái và bên phải giữa các cột, nghĩa là các cột cách nhau tổng cộng 30px), nếu muốn tăng hoặc giảm thì các bạn hãy sửa lại giá trị này ở thuộc tính padding nhé. Ví dụ:

🍇 Kết quả:

1.2. Chia cột trên trình soạn thảo văn bản Block-Editor

Cách chia cột trên trình soạn thảo này khá đơn giản và gặp ít lỗi hơn so với việc dùng code chia cột trên trình soạn thảo Cổ điển. Để chia cột trên trình soạn thảo Block-Editor, các bạn sử dụng khối Columns. Nếu các bạn chưa biết về trình soạn thảo Block-Editor hoặc cách thêm khối trên trình soạn thảo này thì hãy bấm vào ĐÂY để đọc nhé

Sau khi thực hiện thao tác thêm khối, khối Columns sẽ có dạng như sau:

Hình 1. Khối Columns (trước khi chia cột)

Thanh công cụ tuỳ chọn chính:

•   – Nút chuyển đổi.

• – Nút căn chỉnh: Thông thường, mặc định của nút này sẽ là chế độ Wide width, ngoài ra tuỳ thuộc vào cấu trúc theme mà nút này có thể có thể chế độ Full width hoặc các chế độ khác. Lưu ý: Không phải theme nào cũng có nút căn chỉnh này.

• – Nút tuỳ chọn bổ sung (More options).

Tab tuỳ chọn bổ sung: Ở bước này mình mới thêm khối chứ chưa chia cột nên không có gì đáng nói về tab này cả.

Nội dung của khối: Lúc này, phần nội dung của khối sẽ hiện ra một số kiểu bố cục chia cột để các bạn chọn. Các bạn thích kiểu bố cục nào thì hãy bấm vào kiểu đó để chọn nhé. Đừng lo lắng nếu số cột bạn muốn chia lớn hơn 3, vì chúng ta có thể chỉnh sửa và thêm vào sau Ở đây mình sẽ chọn kiểu bố cục 2 cột bằng nhau.

Sau khi bấm chọn kiểu bố cục chia cột, cấu trúc của khối Columns sẽ có dạng như sau:

Hình 2. Khối Columns (sau khi chia cột)

Thanh công cụ tuỳ chọn chính:

•   – Nút chuyển đổi.

• – Nhóm nút căn chỉnh: Thông thường, mặc định của nhóm nút này sẽ là chế độ Wide width, ngoài ra tuỳ thuộc vào cấu trúc theme mà nút này có thể có thể chế độ Full width hoặc các chế độ khác. Lưu ý: Không phải theme nào cũng có nút căn chỉnh này.

• – Nhóm nút căn chỉnh nội dung trong các cột: Nội dung trong các cột sẽ được căn chỉnh theo phương thẳng đứng, có thể là căn từ trên xuống dưới (Vertically Align Top), căn từ dưới lên (Vertically Align Bottom) hoặc căn chính giữa (Vertically Align Middle). Theo mặc định, nội dung trong các cột sẽ được căn chỉnh theo phương thẳng đứng, chiều từ trên xuống dưới (Vertically Align Top).

• – Nút tuỳ chọn bổ sung (More options).

Tab tuỳ chọn bổ sung: Tab này chỉ có một tuỳ chọn duy nhất là chia cột. Ban đầu mình chọn kiểu bố cục 2 cột, nếu mình muốn tăng số cột lên thành 3 thì mình sẽ nhập số 3 vào khung ở dưới chữ Columns, hoặc di chuyển hình tròn trên thanh trượt cho đến khi số 3 xuất hiện trong khung. Các bạn được chia tối đa 6 cột.

Hình 3. Chia cột

Nội dung của khối: Do mình chọn kiểu bố cục 2 cột bằng nhau nên lúc này phần nội dung của khối sẽ được chia thành 2 cột, mỗi cột sẽ có nút thêm khối () để các bạn thêm nội dung vào cột. Lúc này, mỗi cột sẽ có một thanh công cụ tuỳ chọn riêng, bao gồm nhóm nút căn chỉnh nội dung trong các cột () và nút tuỳ chọn bổ sung (). Đồng thời, các bạn có thể điều chỉnh lại độ rộng cho từng cột tại tab tuỳ chọn bổ sung riêng của từng cột với đơn vị tính là phần trăm (%). Các bạn có thể điều chỉnh độ rộng cho từng cột bằng cách nhập giá trị vào khung ở dưới chữ Percentage width của tuỳ chọn Column Settings hoặc di chuyển thanh trượt cho đến khi vừa ý. Nếu muốn quay về cài đặt độ rộng mặc định, các bạn hãy bấm vào nút Reset nhé

Hình 4. Điều chỉnh độ rộng của cột

Thao tác chia cột trên trình soạn thảo Cổ điển và trình soạn thảo Block-Editor sẽ được minh hoạ bằng video sau:

Video 2. Chia cột trên WordPress

Để tạo bảng trên trình soạn thảo Block-Editor, chúng ta sẽ sử dụng khối Table. Sau khi thêm khối, cấu trúc của khối Table sẽ có dạng như sau:

Hình 5. Khối Table (khi chưa xác định số lượng hàng và cột)

Thanh công cụ tuỳ chọn chính:

• – Nút chuyển đổi.

• – Nhóm nút căn chỉnh: Theo mặc định, bảng sẽ được căn chính giữa (Align center). Ngoài ra, tuỳ thuộc vào cấu trúc theme mà nút căn chỉnh này có thể sẽ có thêm chế độ Full width và Wide width. Tương tự như khối Hình ảnh (Image), nếu sau khối Table là các khối liên quan đến văn bản như khối Tiêu đề (Heading), khối Đoạn văn (Paragraph),… thì khi các bạn lựa chọn căn lề trái (Align left) hoặc lề phải (Align right) cho khối Table, các khối liên quan đến văn bản ở phía sau sẽ hiển thị theo kiểu Square Text Wrapping (Văn bản nằm xung quanh hình ảnh, hay còn gọi là kiểu side-by-side).

• – Nút tuỳ chọn bổ sung (More options).

Tab tuỳ chọn bổ sung: Hiện tại các bạn chưa cần quan tâm đến tab này

Nội dung của khối: Lúc này, phần nội dung của khối sẽ hiện ra 2 ô để các bạn nhập số lượng hàng và cột cho bảng cần tạo. Các bạn nhập số cột cần có trong bảng vào ô phía bên dưới chữ Column Count và nhập số hàng cần có vào ô phía bên dưới chữ Row Count. Sau đó, các bạn bấm vào nút Create Table để tạo bảng.

Hình 6. Nhập số cột và hàng để tạo bảng

Sau khi các bạn bấm vào nút Create Table, cấu trúc của khối Table sẽ có dạng như sau:

Hình 7. Cấu trúc của khối Table (sau khi đã xác định số hàng và số cột)

Thanh công cụ tuỳ chọn chính:

• – Nút chuyển đổi.

• – Nhóm nút căn chỉnh: Theo mặc định, bảng sẽ được căn chính giữa (Align center). Ngoài ra, tuỳ thuộc vào cấu trúc theme mà nút căn chỉnh này có thể sẽ có thêm chế độ Full width và Wide width. Tương tự như khối Hình ảnh (Image), nếu sau khối Table là các khối liên quan đến văn bản như khối Tiêu đề (Heading), khối Đoạn văn (Paragraph),… thì khi các bạn lựa chọn căn lề trái (Align left) hoặc lề phải (Align right) cho khối Table, các khối liên quan đến văn bản ở phía sau sẽ hiển thị theo kiểu Square Text Wrapping (Văn bản nằm xung quanh hình ảnh, hay còn gọi là kiểu side-by-side).

• – Nhóm nút chỉnh sửa bảng: Nhóm nút này bao gồm các nút sau: (Add Row Before – Thêm một hàng ngay trước hàng hiện tại), (Add Row After – Thêm một hàng ngay sau hàng hiện tại), (Delete Row – Xoá hàng hiện tại), (Add Column Before – Thêm một cột ở phía bên trái cột hiện tại), (Add Column After – Thêm một cột ở phía bên phải cột hiện tại), (Delete Column – Xoá cột hiện tại).

• – Nhóm nút căn chỉnh nội dung trong bảng: Nhóm nút này bao gồm các nút (Căn lề trái), (Căn lề phải), (Căn giữa). Nội dung trong bảng được căn chỉnh theo từng cột, nghĩa là các bạn không thể dùng nút căn lề một lần để căn lề cho cả bảng mà phải căn theo từng cột. Theo mặc định, nội dung của các cột trong bảng sẽ được căn lề trái.

• Nhóm nút định dạng văn bản: Nhóm nút này sẽ xuất hiện khi các bạn click vào từng ô trong bảng, bao gồm các nút định dạng văn bản như (In đậm), (In nghiêng), (Gắn liên kết vào chữ) và (Các chức năng định dạng bổ sung).

• – Nút tuỳ chọn bổ sung (More options).

Tab tuỳ chọn bổ sung: Tab này bao gồm 4 mục:

• Styles: Tuỳ chọn về kiểu dáng của bảng. Thông thường sẽ có 2 tuỳ chọn là Default (theo kiểu mặc định của theme) và Stripes (kiểu sọc).

Hình 8. Chọn kiểu bảng

• Table Settings: Mục này gồm 3 tuỳ chọn là Fixed width table cells (Cố định chiều rộng của các ô trong bảng), Header section (Thêm một hàng tiêu đề cho bảng), Footer section (Thêm một hàng vào cuối bảng). Từ “section” này hơi khó giải thích một chút, khi các bạn đọc một cuốn sách hoặc xem các đề án hoặc luận văn thì thường thấy bố cục trang giấy sẽ được chia làm 3 phần. Phần chính giữa là nội dung cuốn sách hoặc luận văn, phần phía trên phần nội dung có thể là tên cuốn sách kèm theo tên tác giả, phần phía dưới nội dung (cuối trang) có thể là tên nhà xuất bản và số trang. Phần phía trên và phía dưới nội dung đó được gọi là “section”. Nói chung là phần “section” này không quá quan trọng và các bạn cũng không nhất thiết phải chèn vào làm gì cả. Theo mặc định, chiều rộng của cột sẽ tuỳ chỉnh theo nội dung của các ô trong bảng. Nếu các bạn muốn cố định chiều rộng của các ô, các bạn hãy bật tuỳ chọn Fixed width table cells. Lúc này, các ô trong bảng sẽ có chiều rộng bằng nhau.

Hình 9. Table Settings

• Color Settings: Đổi màu nền cho bảng. Tuỳ chọn này chỉ có một số màu nhất định, các bạn sẽ không thể tự chọn màu nền theo ý thích. Để xoá màu nền, các bạn bấm vào nút Clear.

Hình 10. Color Settings

• Advanced: Mục này liên quan đến CSS, đối với phiên bản miễn phí thì mục này không có tác dụng gì cả.

Nội dung của khối: Lúc này, phần nội dung của khối sẽ gồm 2 phần là phần bảng và phần chú thích cho bảng (Write caption…), phần chú thích các bạn có thể bỏ qua không viết cũng được. Đối với phần bảng, tuỳ vào cấu trúc theme mà kiểu dáng của bảng sẽ hiển thị khác nhau. Thông thường, các theme sẽ hiển thị theo kiểu mặc định (Default) với đường viền bảng là đường nét liền có màu đen, nhưng cũng có một số theme với mặc định hiển thị bảng là kiểu sọc (Stripes). Để thêm nội dung vào bảng, các bạn click chuột vào ô cần nhập nội dung trong bảng và tiến hành nhập văn bản như bình thường. Để chèn ảnh trong bảng, các bạn bấm vào nút (More rich text controls) trong nhóm nút định dạng văn bản và chọn Inline image.

Thao tác tạo bảng trên trình soạn thảo Block-Editor sẽ được minh hoạ bằng video sau:

Video 3. Tạo bảng trên trình soạn thảo Block-Editor

Lưu ý: Khi tạo bảng bằng khối Table, tuỳ thuộc vào cấu trúc của theme mà bảng có thể có đường viền hoặc không. Đây là vấn đề liên quan đến cấu trúc theme (CSS) nên WordPress bản miễn phí không thể can thiệp được. Do đó, nếu muốn tuỳ chỉnh đường viền của bảng như ý muốn thì các bạn hãy đọc phần tạo bảng trên trình soạn thảo Cổ điển dưới đây. Điều này không đồng nghĩa với việc trình soạn thảo Block-Editor không thể tuỳ chỉnh đường viền cho bảng. Nó hoàn toàn làm được, chỉ có điều lúc này các bạn phải sử dụng khối Classic thay vì sử dụng khối Table. Cách sử dụng khối Classic mình đã viết trong series Hướng dẫn WordPress cơ bản cho người mới bắt đầu rồi, nếu các bạn chưa đọc thì hãy bấm vào ĐÂY để đọc nhé

2.2. Tạo bảng trên trình soạn thảo Cổ điển (Phiên bản 1)

Để tạo bảng trên trình soạn thảo Cổ điển, chúng ta sẽ sử dụng code HTML, tức là các bạn phải dán code tạo bảng vào giao diện HTML của trình soạn thảo. Nếu các bạn chưa biết cách chuyển đổi giữa giao diện trực quan và giao diện HTML thì bấm vào ĐÂY để xem nhé Tiếp theo, để có thể hiểu hơn về cách sử dụng code HTML, các bạn hãy đọc bài HTML và một số code HTML cơ bản cho blog WordPress có trong blog của mình. Đây là bài viết rất quan trọng nhằm giúp các bạn có thể viết được code tạo bảng như ý muốn nên hãy đọc và nghiên cứu kĩ nhé

Lưu ý: Trong phần Tạo bảng nâng cao mình sẽ hướng dẫn các bạn cách tạo bảng nhanh, nhưng để hiểu và thao tác được với code tạo bảng nâng cao thì các bạn bắt buộc phải đọc phần Tạo bảng cơ bản và phần Một vài thao tác điều chỉnh cơ bản với bảng trước. Các bạn nhất định phải đọc kĩ để hiểu được tác dụng của một số thẻ và thuộc tính trong code tạo bảng nhé

2.2.1. Tạo bảng cơ bản

Code tạo bảng cơ bản là code đơn giản nhất của phần này. Nhưng nhược điểm của nó chính là kiểu dáng của bảng sẽ tuân theo cấu trúc của theme, tức là nếu mặc định của theme là bảng không có đường kẻ dọc thì khi các bạn dùng code này, bảng cũng sẽ không có đường kẻ dọc luôn. Điển hình như theme Selecta mình đang sử dụng, nó hoàn toàn không có đường kẻ dọc Vậy thì tại sao chúng ta vẫn phải học cái thứ ba chấm này? Bởi vì nó là cái cơ bản nhất, hiểu được nó thì mới có cơ sở hiểu và thao tác những kiểu bảng khó hơn được

Đã gọi là bảng thì cấu trúc của nó sẽ có ít nhất một hàng và hai cột, hoặc là một cột và hai hàng, chứ không thể nào chỉ có một ô được đúng không? Thế thì còn gọi gì là bảng Dưới đây là code tạo bảng cơ bản với 1 hàng và 2 cột:

Còn đây là code tạo bảng cơ bản với 2 hàng và 1 cột:

Bây giờ chúng ta sẽ đi phân tích một số thẻ HTML có trong 2 code trên:

• Thẻ tr: Thẻ này bao gồm cả thẻ mở (<tr>) và thẻ đóng (</tr>), thẻ này đại diện cho hàng (row) trong bảng. Một cặp thẻ tr (bao gồm thẻ mở và thẻ đóng) tương đương với một hàng trong bảng. Thẻ tr được bao quanh bởi thẻ table và thẻ tbody và không được bao ngoài 2 thẻ này khi viết code tạo bảng.

• Thẻ td: Thẻ này bao gồm cả thẻ mở (<td>) và thẻ đóng (</td>), thẻ này đại diện cho ô dữ liệu (data) trong bảng (từ đây mình sẽ gọi tắt là “ô”). Một cặp thẻ td (bao gồm thẻ mở và thẻ đóng) tương đương với một ô trong bảng. Thẻ td được bao quanh bởi thẻ tr và không được bao ngoài thẻ tr khi viết code tạo bảng.

Tạm thời chúng ta chỉ cần quan tâm đến 2 thẻ tr và td ở trên là được. Khi tạo bảng, chúng ta thường nói đến hàng và cột. Tuy nhiên, sau khi phân tích code và các thẻ ở trên thì yếu tố cột lại không xuất hiện mà thay vào đó là yếu tố ô. Nghĩa là thay vì tạo cột thì code này sẽ tạo ô trong các hàng. Nói một cách đơn giản thì là thế này, bình thường khi kẻ bảng trên giấy, chúng ta thường có thói quen chia cột trước và kẻ các đường kẻ ngang sau. Nhưng với code HTML tạo bảng, đầu tiên chúng ta sẽ tạo ra các hàng trước, sau đó xếp các ô vào trong các hàng đó theo chiều ngang. Ví dụ, mình tạo một hàng bằng cách viết một cặp thẻ tr, sau đó mình sẽ xếp 3 ô vào hàng đó bằng thêm 3 cặp thẻ td vào bên trong cặp thẻ tr vừa rồi. Như vậy mình sẽ có 1 hàng và 3 ô, tương đương với khái niệm 1 hàng và 3 cột. Bây giờ mình muốn bảng có 2 hàng và 3 cột thì sẽ tiếp tục viết thêm một cặp thẻ tr với 3 cặp thẻ td vào ngay sau thẻ tr đóng (</tr>) mà mình vừa viết.

Nói bằng lời thì hơi khó hình dung một chút nên mình sẽ minh hoạ trực tiếp với code tạo bảng 2 cột 1 hàng ở trên nhé Code ban đầu của chúng ta với 2 cột và 1 hàng có dạng như sau:

🍇 Kết quả:

Như các bạn thấy, trong code này có 2 cặp thẻ td được bao quanh bởi 1 cặp thẻ tr, tương đương với 2 cột và 1 hàng. Bây giờ mình muốn thêm 1 cột vào bảng ở trên thì mình sẽ chèn thêm một cặp thẻ td vào trong cặp thẻ tr đang bao quanh nó. Hiện tại bảng này đang có 2 cột, mình có thể lựa chọn chèn thêm cột mới vào giữa 2 cột có sẵn hoặc chèn vào phía trước cột 1 hoặc phía sau cột 2.

Nếu mình chèn cột mới vào giữa 2 cột, mình sẽ chèn cặp thẻ td vào giữa 2 cặp thẻ td đang có sẵn trong code. Lúc này, code của mình sẽ có dạng như sau:

🍇 Kết quả:

Nếu mình chèn cột mới vào phía trước cột 1 thì mình sẽ chèn cặp thẻ td vào trước cặp thẻ td thứ nhất trong code. Lúc này, code của mình sẽ có dạng như sau:

🍇 Kết quả:

Nếu mình chèn cột mới vào phía sau cột 2 thì mình sẽ chèn cặp thẻ td vào sau cặp thẻ td thứ hai trong code. Lúc này, code của mình sẽ có dạng như sau:

🍇 Kết quả:

Bây giờ chúng ta có 3 cột, mình lại muốn tăng số lượng hàng có trong bảng và giữ nguyên số cột thì mình chỉ việc sao chép (copy) cặp thẻ tr (bao gồm cả thẻ đóng, thẻ mở và các thẻ được nó bao quanh như thẻ td) ở trên và dán (paste) vào ngay phía dưới cặp thẻ này. Tức là nếu mình muốn tăng thêm 1 hàng thì mình sẽ copy+paste cặp thẻ tr này 1 lần, nếu mình muốn tăng thêm 2 hàng thì mình sẽ copy+paste cặp thẻ tr này 2 lần,… Ở đây, mình sẽ tăng thêm 2 hàng cho bảng, tức là tổng cộng bảng của mình bây giờ sẽ có 3 cột và 3 hàng. Lúc này, code của mình sẽ có dạng như sau:

🍇 Kết quả:

Tương tự, nếu muốn giảm số hàng hoặc số cột trong bảng, các bạn chỉ cần xoá cặp thẻ tr hoặc td tương ứng với hàng hoặc cột đó. Xoá hàng thì đơn giản, nhưng khi xoá cột thì các bạn cần phải chú ý một chút. Như mình đã nói ở trên, code HTML tạo bảng theo kiểu xếp từng ô vào các hàng. Do đó, ngoại trừ bảng có 1 hàng ra thì khi các bạn xoá bảng có từ 2 hàng và 2 cột trở lên thì cần phải lưu ý về cách xoá cột với cặp thẻ td. Lúc này các bạn sẽ không xoá cột mà sẽ xoá ô. Điều này có nghĩa là các bạn không thể xoá 1 cột chỉ với 1 lần xoá cặp td mà sẽ phải xoá từng ô có trong cột muốn xoá. Ví dụ: Mình muốn xoá cột thứ 3 có trong bảng. Hiện tại, bảng của mình có 3 cột và 3 hàng. Để xoá cột thứ 3 này, mình sẽ phải xoá các cặp thẻ td thứ 3 trong các cặp thẻ tr có trong code, tức là mình phải xoá 3 cặp thẻ td chứ không phải 1 cặp thẻ. Lúc này, code của mình sẽ có dạng như sau:

🍇 Kết quả:

Bây giờ bảng của mình chỉ còn 2 cột và 3 hàng, nếu mình xoá hàng thứ 2 thì mình sẽ xoá cặp thẻ tr (bao gồm cả thẻ đóng, thẻ mở và các thẻ được nó bao quanh như thẻ td) thứ 2 trong code tạo bảng. Lúc này, code của mình sẽ có dạng như sau:

🍇 Kết quả:

Đến đây thì các bạn đã hiểu được cách điều chỉnh số lượng hàng và cột trong bảng chưa nào? Thực ra code tạo bảng còn có thể có thêm một số thẻ khác như thẻ th, tfoot, thead,… nhưng mình cảm thấy những thẻ này không quan trọng nên mình không đưa vào trong code. Với code tạo bảng ở trên, định dạng văn bản trong bảng sẽ được mặc định theo cấu trúc của theme. Nếu các bạn không muốn sử dụng định dạng mặc định của theme, hãy đặt code tạo bảng (cặp thẻ table, bao gồm cả thẻ mở, thẻ đóng và các thẻ được thẻ table bao quanh) vào bên trong cặp thẻ div chứa các thuộc tính định dạng. Trong trường hợp này, các bạn sẽ không thể dùng thẻ p hay thẻ span để định dạng mà chỉ có thể dùng thẻ div. Về lí thuyết, các bạn có thể định dạng cho văn bản trong bảng bằng cách thêm các thuộc tính định dạng vào thẻ mở của thẻ table tương tự như với thẻ div. Nhưng trong bài này, mình tách riêng ra để các bạn dễ chỉnh sửa hơn mà thôi. Ví dụ, mình có code định dạng văn bản với các thuộc tính như sau:

Bây giờ mình sẽ chèn code tạo bảng vào trong cặp thẻ div này, đoạn code hoàn chỉnh của mình sẽ có dạng như sau:

🍇 Kết quả:

Nếu mình không dùng thẻ div, mình sẽ định dạng với thẻ table trong code tạo bảng như sau, lúc này mình sẽ sao chép y nguyên các thuộc tính định dạng trong thẻ div ở trên vào thẻ mở của thẻ table:

🍇 Kết quả:

Tiếp theo, để chắc chắn 99% là bảng biểu có thể hiển thị ngon lành thì chúng ta cần thêm 2 thuộc tính với giá trị như sau vào thẻ table:

border-collapse: collapse;

width: 100%;

Tức là code tạo bảng hoàn chỉnh của mình sẽ có dạng thế này:

2.2.2. Một vài thao tác điều chỉnh cơ bản với bảng

a) Điều chỉnh độ rộng của các cột trong bảng

Về lí thuyết, các bạn có thể điều chỉnh độ rộng của các cột trong bảng bằng nhiều đơn vị tính khác nhau, nhưng đơn vị thường được sử dụng nhất là phần trăm (%). Để điều chỉnh độ rộng của các cột trong bảng, các bạn chỉ cần điều chỉnh độ rộng của các ô (tương ứng với các cặp thẻ td) trong hàng đầu tiên của bảng bằng thuộc tính width với giá trị % tương ứng. Ví dụ, code bảng của mình có 3 cột và 4 hàng, nếu để mặc định không điều chỉnh thì độ rộng của các cột sẽ được tự động điều chỉnh theo nội dung của các ô trong cột đó. Bây giờ mình sẽ điều chỉnh độ rộng của cột 1 thành 25%, cột 2 thành 40%, cột 3 thành 35%. Một mẹo nhỏ khi điều chỉnh độ rộng của cột là các bạn nên để giá trị auto cho độ rộng của cột cuối cùng trong bảng, như vậy sẽ tránh được trường hợp bảng có thể tràn ra ngoài vùng hiển thị bài đăng. Tức là trong trường hợp này, thay vì điều chỉnh độ rộng của cột 3 với giá trị là 35% thì mình sẽ điền giá trị auto cho nó. Và mình chỉ cần điều chỉnh với 3 ô trong hàng đầu tiên của bảng mà thôi. Code bảng sau khi điều chỉnh của mình sẽ có dạng như sau:

🍇 Kết quả:

b) Gộp ô trong bảng

Gộp ô không phải thuộc tính định dạng nên chúng ta sẽ tách riêng nó với các thuộc tính định dạng. Để gộp ô trong bảng, chúng ta sẽ sử dụng 2 thuộc tính là colspan (gộp các ô trong cùng một hàng – gộp ô theo chiều ngang) và rowspan (gộp các ô trong cùng một cột – hay còn gọi là gộp ô theo chiều dọc) với cú pháp như sau:

colspan="số ô cần gộp theo chiều ngang"

hoặc:

rowspan="số ô cần gộp theo chiều dọc"

• Đối với gộp ô theo chiều ngang, các ô sẽ được gộp lại theo chiều từ trái sang phải. Nghĩa là, các bạn sẽ đặt thuộc tính colspan vào thẻ mở td của ô mà các bạn muốn bắt đầu gộp nó với những ô nằm phía bên phải. Đồng thời, các bạn sẽ phải xoá bớt các ô bị thừa ra trong hàng vì code sẽ không tự động xoá các ô đã bị gộp, số lượng ô cần phải xoá sẽ được tính bằng cách lấy số ô cần gộp theo chiều ngang trong thuộc tính colspan trừ đi 1.

Ví dụ: Mình có thuộc tính colspan là colspan="4", suy ra số lượng ô mình cần xoá sau khi gộp ô sẽ bằng 4−1=3. Các bạn sẽ không được xoá những ô nằm bên trái của ô chứa thuộc tính colspan mà chỉ được xoá những ô nằm bên phải của ô này thôi. Nếu các bạn xoá những ô nằm bên trái thì các ô thừa vẫn sẽ tràn ra như bình thường.

Để dễ hình dung, mình sẽ lấy ví dụ với code tạo bảng cơ bản sau:

🍇 Kết quả:

Theo code tạo bảng cơ bản ở trên thì do mặc định của theme Selecta nên bảng của mình sẽ không có đường kẻ dọc. Nhưng để ví dụ về gộp ô dễ quan sát hơn, mình đã kẻ viền đen (và tô màu một vài ô) cho bảng. Cách kẻ viền này mình sẽ hướng dẫn các bạn ở phần Tạo bảng nâng cao sau, thế nên mình sẽ không đưa nó vào trong code tạo bảng cơ bản ở trên mà chỉ giải thích thôi. Với code tạo bảng ở trên, cấu trúc bảng của mình bao gồm 4 cột và 3 hàng. Bây giờ mình muốn gộp ô thứ 2 với ô thứ 3 và ô thứ 4 trong hàng thứ 2 của bảng thì đầu tiên, mình sẽ đặt thuộc tính colspan với số ô cần gộp là 3 (bao gồm ô thứ 2, ô thứ 3 và ô thứ 4) vào thẻ td mở của ô thứ 2 (ô bắt đầu cần gộp) trong hàng thứ 2. Code của mình lúc này sẽ có dạng như sau:

🍇 Kết quả:

Lúc này, do chưa xoá những ô còn thừa nên bảng của mình sẽ bị dư ra 2 ô ở hàng thứ 2. Do đó, mình sẽ phải xoá đi 3−1=2 ô ở phía bên phải của ô chứa thuộc tính colspan, tức là mình sẽ xoá 2 cặp thẻ td nằm ngay dưới cặp thẻ td chứa thuộc tính colspan. Lúc này, code của mình sẽ có dạng như sau:

🍇 Kết quả:

• Đối với gộp ô theo chiều dọc, các ô sẽ được gộp theo chiều từ trên xuống dưới tính từ ô bắt đầu gộp. Nghĩa là, các bạn sẽ đặt thuộc tính rowspan vào thẻ mở td của ô mà các bạn muốn bắt đầu gộp nó với những ô nằm phía dưới. Tương tự như khi gộp ô theo chiều ngang, các bạn cũng sẽ phải xoá các ô thừa ra sau khi gộp ô theo chiều dọc. Việc xoá ô này sẽ vất vả hơn khi xoá ô theo chiều ngang một chút. Nếu xoá ô theo chiều ngang, các bạn chỉ cần thao tác trên một cặp thẻ tr và các cặp thẻ td cần xoá đều nằm trong cặp thẻ tr đó. Nhưng khi xoá ô theo chiều dọc, các bạn sẽ phải thao tác trên nhiều cặp thẻ tr hơn. Nếu gộp 2 ô theo chiều dọc, các bạn chỉ cần thao tác với 1 cặp thẻ tr, nhưng nếu gộp 3 ô theo chiều dọc, các bạn sẽ phải thao tác với 2 cặp thẻ tr, cứ như vậy, các bạn gộp càng nhiều ô theo chiều dọc thì số cặp thẻ tr các bạn phải thao tác cũng sẽ tăng lên. Ở đây mình nói là cặp thẻ tr bởi vì thẻ tr đại diện cho hàng trong bảng, nhưng thực tế cặp thẻ mà chúng ta cần xoá sẽ là cặp thẻ td (tương ứng với ô) nằm trong cặp thẻ tr đó. Sau khi các bạn gộp ô theo chiều dọc, các ô bị gộp (không tính ô bắt đầu gộp) sẽ không mất đi mà sẽ bị đẩy lùi sang phải 1 ô, điều này đồng nghĩa với việc ô cuối cùng của hàng chứa ô bị gộp đó sẽ bị tràn ra khỏi bảng. Lúc này, để điều chỉnh lại bảng, các bạn có thể xoá ô bị tràn ra đó hoặc bất cứ một ô nào trong hàng đó đều được.

Để dễ hình dung, mình sẽ lấy ví dụ với code tạo bảng cơ bản sau:

🍇 Kết quả:

Như đã giải thích ở trên, mình kẻ thêm viền đen (và tô màu một vài ô) cho bảng để các bạn dễ quan sát quá trình gộp ô hơn. Lúc này, bảng của mình có 4 cột và 4 hàng. Mình muốn gộp ô thứ 2 của cột 2 (tương đương với toạ độ hàng 2, cột 2) với ô thứ 3 của cột này (tương đương với toạ độ hàng 3, cột 2) thì mình sẽ đặt thuộc tính rowspan với số ô cần gộp là 2 vào thẻ mở td của ô thứ 2 ở cột 2. Code của mình sẽ có dạng như sau:

🍇 Kết quả:

Do mình chưa xoá các ô thừa nên bảng của mình bị dư ra 1 ô ở hàng thứ 3. Ô bị dư ra thuộc hàng thứ 3, nghĩa là mình sẽ cần xoá 1 cặp thẻ td trong số 4 cặp thẻ td được bao quanh bởi cặp thẻ tr thứ 3 (tương đương với hàng thứ 3) trong code tạo bảng. Ở đây, mình sẽ lựa chọn xoá ô đầu tiên của hàng thứ 3 (tương ứng với toạ độ hàng 3, cột 1). Lúc này, code của mình sẽ có dạng như sau:

🍇 Kết quả:

Tiếp tục với code tạo bảng 4 hàng 4 cột ban đầu, giờ mình sẽ gộp 3 ô theo chiều dọc cho các bạn xem nhé. Mình sẽ gộp 3 ô đầu tiên của cột 2 lại với nhau. Lúc này, mình sẽ đặt thuộc tính rowspan vào ô bắt đầu muốn gộp, tức là ô thứ nhất của cột 2 (tương đương với toạ độ hàng 1, cột 2). Lúc này, code của mình sẽ có dạng như sau:

🍇 Kết quả:

Do mình bắt đầu gộp từ ô đầu tiên của cột 2 (tương đương với toạ độ hàng 1, cột 2) nên 2 hàng bên dưới hàng chứa ô này sẽ có tình trạng tràn ô, mỗi hàng sẽ bị tràn ra 1 ô. Để xoá 2 ô bị tràn này, mình sẽ phải thao tác với 2 cặp thẻ tr (tương đương với 2 hàng nằm bên dưới hàng chứa ô bắt đầu gộp). Đối với 2 cặp thẻ tr này, mình sẽ xoá 1 cặp thẻ td (tương đương với 1 ô) nằm bên trong nó, tức là mình sẽ xoá tất cả là 2 cặp thẻ td. Khi chưa xoá ô bị tràn, bên trong 2 cặp thẻ tr này sẽ có 4 cặp thẻ td, nhưng sau khi xoá thì 2 cặp thẻ này chỉ còn lại 3 cặp thẻ td mà thôi. Lúc này, code của mình sẽ có dạng như sau:

🍇 Kết quả:

• Để gộp ô theo cả chiều ngang lẫn chiều dọc, các bạn sẽ sử dụng đồng thời 2 thuộc tính colspan và rowspan. Lúc này, chúng ta sẽ chọn 1 ô trong bảng làm mốc để gộp theo cả chiều ngang lẫn chiều dọc. Và khi gộp xong, các bạn cũng phải tiến hành xoá các ô thừa như mình đã hướng dẫn ở trên. Ví dụ, mình có code tạo bảng cơ bản sau (bảng đã được kẻ thêm viền và tô màu để tiện quan sát):

🍇 Kết quả:

Ban đầu, bảng của mình có 3 cột và 3 hàng. Bây giờ mình sẽ lấy ô đầu tiên của cột 1 (tương đương với toạ độ hàng 1, cột 1) làm mốc để gộp ô, tức là mình sẽ đặt thuộc tính colspan và rowspan vào thẻ td mở của ô này. Mình sẽ gộp ô làm mốc này với 1 ô ở bên phải (gộp theo chiều ngang) và 1 ô ở bên dưới (gộp theo chiều dọc). Lúc này, code của mình sẽ có dạng như sau:

🍇 Kết quả:

Mình sẽ tiếp tục xoá các ô bị tràn ra nhé, code của mình lúc này sẽ có dạng như sau:

🍇 Kết quả:

Nói chung, việc gộp ô theo mình là hơi phức tạp và tương đối mất thời gian với các bạn. Nhưng mình vẫn giới thiệu đầy đủ để khi các bạn tạo bảng nhanh thì có thể đọc hiểu được code, biết được rowspan với colspan là cái gì. Đây không phải phần chính trong bài hướng dẫn tạo bảng này nhưng nó là phần quan trọng và các bạn bắt buộc phải biết nếu muốn thực hiện các thay đổi với code tạo bảng. Còn bây giờ chúng ta sẽ đến với phần Tạo bảng nâng cao – nội dung được quan tâm nhất của bài này, các bạn hãy bấm sang trang 2 của bài này hoặc bấm vào ĐÂY để đọc tiếp nhé

Trang 2 ⟶

VUI LÒNG KHÔNG SAO CHÉP BÀI VIẾT NÀY! CẢM ƠN CÁC BẠN!

Nguồn bài viết: https://wptutbyserahwang.wordpress.com/