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

2.2.3. Tạo bảng nâng cao

Nội dung

1.Chia cột trên WordPress

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

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

2.Tạo bảng trên WordPress

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

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

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

1.Mình chỉ hướng dẫn các bạn tạo một số kiểu bảng nhất định, không phải tất cả. Nếu các bạn muốn tìm hiểu thêm thì có thể lên google tìm kiếm các bài viết về cách tạo bảng với ngôn ngữ HTML.

2.Các thao tác của mình được thao tác trên trình duyệt Google Chrome và hệ điều hành Windows 7, nếu các bạn sử dụng trình duyệt và hệ điều hành khác thì thao tác có thể khác đi đôi chút nhưng không đáng kể (và mình nghĩ là các bạn có thể tự thích ứng và mày mò được).

3.Các công cụ cần thiết khi tạo bảng nâng cao bao gồm: phần mềm Microsoft Word 2010 và Notepad (là Notepad, không phải Notepad++ nhé ). Máy tính của mình sử dụng MS Word phiên bản 2010 nên mình hướng dẫn các bạn tạo bảng theo phiên bản này, các phiên bản cũ hoặc mới hơn mình không cài nên mình không rõ, các bạn có thể lên mạng để tìm cách sử dụng thao tác tương ứng với phiên bản MS Word 2010. Còn Notepad là phần mềm có sẵn trong hệ điều hành Windows ở bất kì phiên bản nào. Nếu các bạn dùng hệ điều hành khác mà không có phần mềm này thì các bạn có thể lên mạng tải về hoặc tự tìm kiếm những phần mềm có chức năng tương đương.

4.Trước khi tạo bảng nâng cao, các bạn 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 của bài này trước để nắm được cách hoạt động của một số thẻ và biết cách điều chỉnh bảng khi cần.

a) Tạo bảng nhanh với MS Word 2010

Cuối bài này sẽ có thêm một phần tạo bảng nhanh với MS Word 2010 khác nhưng mình không thực sự thích nó cho lắm. Thật ra cách đó rất tiện nhưng lúc cần thay đổi một số thuộc tính trong bảng thì sửa code hơi mệt. Được rồi, bây giờ chúng ta cứ học cách tạo bảng nhanh đơn giản này trước đã nhé

Đầu tiên, các bạn mở một file mới trên phần mềm MS Word 2010. Tại tab Insert trên thanh Ribbon, các bạn bấm vào biểu tượng tạo bảng có chữ Table, sau đó bấm vào mục Insert Table… Lưu ý: Mình không tạo bảng nhanh trong phần mềm này bằng cách chọn các ô vuông hiện ra khi bấm vào biểu tượng tạo bảng là có lý do, thế nên các bạn cũng hãy bấm vào mục Insert Table… như mình đã hướng dẫn, không bấm vào các ô vuông để tạo bảng nhanh nhé

Sau khi các bạn bấm vào mục Insert Table…, một hộp thoại liên quan đến cài đặt cho bảng cần tạo sẽ hiện ra. Tại mục Table size, các bạn nhập số lượng cột cần có trong bảng vào ô bên phải của tuỳ chọn Number of columns và nhập số lượng hàng cần có vào ô bên phải của tuỳ chọn Number of rows. Tiếp theo, tại mục AutoFit behavior, các bạn bấm vào tuỳ chọn AutoFit to contents. Cuối cùng, các bạn bấm vào nút OK để phần mềm tự động tạo bảng.

Hình 11. Hộp thoại Insert Table

Tiếp theo, các bạn click chọn bảng vừa tạo và bấm tổ hợp phím Ctrl+C để sao chép (copy) bảng vào bộ nhớ đệm. Trước khi sao chép bảng, nếu bảng của các bạn cần gộp ô thì các bạn hãy gộp ô trong bảng trước rồi mới sao chép bảng. Sau đó, các bạn quay trở lại bài viết trên trình soạn thảo Cổ điển của WordPress ở giao diện trực quan (Visual), đặt con trỏ chuột ở vị trí muốn chèn bảng trong bài viết và bấm tổ hợp phím Ctrl+V để dán (paste) bảng vừa tạo trong MS Word vào bài viết. Sau khi dán xong, các bạn chuyển bài viết sang giao diện HTML, bấm tổ hợp phím Ctrl+F và tìm kiếm với thẻ <table> để xác định code tạo bảng. Code HTML của bảng mà các bạn vừa dán vào giao diện trực quan sẽ bắt đầu từ thẻ mở <table> và kết thúc bằng thẻ đóng </table>. Như mình đã nói ở phần trước, để 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 border-collapse và width vào trong thẻ mở table của code tạo bảng. Hai thuộc tính này sẽ có giá trị lần lượt là collapse và 100%.

Thao tác tạo bảng nhanh với MS Word 2010 sẽ được minh hoạ bằng video sau:

Video 4. Tạo bảng nhanh với MS Word 2010

b) Kẻ viền cho bảng

Với cách tạo bảng nhanh bằng MS Word 2010 ở trên, các bạn đã có được một code tạo bảng cơ bản. Và bây giờ sẽ đến lúc chúng ta màu mè cho nó Đầu tiên, việc kẻ viền cho bảng sẽ được kẻ theo từng ô, có nghĩa là code tạo bảng có bao nhiêu cặp thẻ td thì các bạn sẽ phải thao tác với bấy nhiêu cặp thẻ td đó. Nhưng đương nhiên chúng ta sẽ không làm thủ công mà sẽ sử dụng Notepad với công cụ Replace. Các bạn có thể làm với Word nhưng theo mình Notepad đơn giản hơn và ít lỗi hơn. Nhưng trước tiên, các bạn cần phải học cách kẻ viền cho 1 ô trước đã

Để kẻ viền cho ô, các bạn sẽ thêm vào thẻ mở td tương ứng với ô đó thuộc tính border với cú pháp như sau:

<td style="border: kiểu đường viền màu viền độ dày của viền;">Nội dung chứa trong ô</td>

Thuộc tính border trong code của mình là thuộc tính tổng hợp, tức là mình định dạng đồng thời cả 3 yếu tố: kiểu đường viền, màu viền và độ dày của viền thay vì tách ra từng cái một. Trong bài này, mình chỉ hướng dẫn các bạn cách kẻ viền cơ bản với thuộc tính border tổng hợp, nếu các bạn muốn tìm hiểu thêm thì có thể tự lên internet tìm kiếm. Thứ tự các yếu tố trong thuộc tính border này có thể đổi chỗ cho nhau và kết quả không thay đổi. Nghĩa là mình điền giá trị của yếu tố màu viền trước giá trị của yếu tố kiểu đường viền trước cũng được, kết quả đều không thay đổi. Đối với 3 yếu tố này, các bạn cần chú ý một số điều sau:

• Kiểu đường viền: Kiểu đường viền phổ biến là dạng nét liền (solid), các bạn muốn kẻ đường viền bảng kiểu nào thì hãy xem bảng tổng hợp dưới đây và điền giá trị thích hợp vào thuộc tính border nhé

Bảng 1. Các kiểu đường viền

Kiểu đường viền	Giá trị khi điền vào code
Dạng nét liền	solid
Dạng dấu chấm	dotted
Dạng nét đứt	dashed
Dạng nét đôi	double
Dạng đường rãnh	groove
Dạng chóp	ridge
Dạng đổ bóng bên trong	inset
Dạng đổ bóng bên ngoài	outset

• Màu viền: Về lí thuyết thì các bạn có thể dùng bất cứ loại mã màu nào cho màu viền, nhưng mà mình khuyên các bạn nên dùng mã HEX. Các lưu ý về sử dụng mã màu các bạn có thể xem ở ĐÂY nhé

• Độ dày của viền: Tính theo đơn vị px.

Mình sẽ ví dụ cho các bạn dễ hình dung nhé Mình có code tạo bảng cơ bản với 2 cột và 2 hàng như sau:

<table style="border-collapse: collapse; width: 100%;">

<tbody>

<tr>

<td>hàng 1, cột 1</td>

<td>hàng 1, cột 2</td>

</tr>

<tr>

<td>hàng 2, cột 1</td>

<td>hàng 2, cột 2</td>

</tr>

</tbody>

</table>

🍇 Kết quả:

hàng 1, cột 1	hàng 1, cột 2
hàng 2, cột 1	hàng 2, cột 2

Bây giờ mình sẽ kẻ viền cho bảng, tức là mình phải kẻ viền cho 4 ô trong bảng, đồng nghĩa với việc mình phải thêm 4 thuộc tính border vào 4 cặp thẻ td trong code này. Ở đây mình sẽ kẻ bảng với nét liền (solid), màu đỏ (red) và độ dày viền là 2px. Lúc này, code của mình sẽ có dạng như sau:

Code trước khi kẻ viền:	Code sau khi kẻ viền:
<table style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <td>hàng 1, cột 1</td> <td>hàng 1, cột 2</td> </tr> <tr> <td>hàng 2, cột 1</td> <td>hàng 2, cột 2</td> </tr> </tbody> </table>	<table style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <td style="border: solid red 2px;">hàng 1, cột 1</td> <td style="border: solid red 2px;">hàng 1, cột 2</td> </tr> <tr> <td style="border: solid red 2px;">hàng 2, cột 1</td> <td style="border: solid red 2px;">hàng 2, cột 2</td> </tr> </tbody> </table>

🍇 Kết quả:

hàng 1, cột 1	hàng 1, cột 2
hàng 2, cột 1	hàng 2, cột 2

Được rồi, đến đây thì các bạn đã biết cách kẻ viền cho bảng rồi chứ? Với 4 ô như trong ví dụ thì mình có thể sao chép rồi dán 3 lần được, nhưng nếu số lượng ô nhiều hơn thì kiểu copy+paste này sẽ rất mệt. Đó là lí do mình cần các bạn sử dụng công cụ Replace của phần mềm Notepad. Chúng ta sẽ tiến hành kẻ viền nhanh cho bảng theo các bước sau:

• Bước 1: Sao chép (Copy) hoặc cắt (Cut) code tạo bảng cơ bản ban đầu (chính là code tạo bảng được tạo ra bằng cách tạo bảng nhanh trên MS Word 2010 mà mình vừa hướng dẫn ở trên đó) ở giao diện HTML vào phần mềm Notepad.

• Bước 2: Bấm tổ hợp phím Ctrl+H để bật hộp thoại Replace. Trên hộp thoại này có 2 mục Find what và Replace with, các bạn nhập chữ <td vào khung trắng của mục Find what, sau đó các bạn nhập thuộc tính kẻ viền cho bảng vào khung trắng của mục Replace with với cú pháp sau đây:

<td style="border: kiểu đường viền màu viền độ dày của viền;"

Thông thường, các theme sẽ mặc định khoảng cách từ đường viền của ô vào trong phần nội dung. Nếu các bạn không thích khoảng cách mặc định này, các bạn hãy thêm thuộc tính padding với đơn vị tính là px vào trước hoặc sau thuộc tính border của thẻ td. Tức là, lúc này ngoài thuộc tính kẻ viền như trên thì phần nhập vào khung Replace with sẽ có thêm thuộc tính padding như sau (ở đây mình để padding với giá trị 8px):

<td style="border: kiểu đường viền màu viền độ dày của viền; padding: 8px;"

Sau khi đã thêm thuộc tính kẻ viền xong, các bạn bấm vào nút Replace All để kẻ viền đồng loạt cho các ô trong bảng. Sau đó, các bạn bấm vào biểu tượng dấu nhân để đóng hộp thoại Replace lại.

• Bước 3: Sao chép toàn bộ code vừa được thay thế trong phần mềm Notepad và dán nó vào vị trí muốn chèn bảng trong bài viết trên WordPress. Nhớ là các bạn phải dán code ở giao diện HTML nhé. Nếu lúc trước các bạn dùng thao tác sao chép (Copy) code tạo bảng cơ bản thì bây giờ các bạn hãy dán đè code mới lên nó (hoặc các bạn xoá hết code cũ đi rồi dán code mới cũng được). Nếu trước đó các bạn dùng thao tác cắt (Cut) thì bây giờ các bạn chỉ cần dán lại code mới vào chỗ vừa cắt mà thôi. Sau khi dán code xong, các bạn có thể chuyển bài viết về giao diện trực quan và soạn thảo như bình thường.

Về nội dung của các ô trong bảng, các bạn có thể chèn bất cứ thứ gì vào đó miễn là thuộc sự cho phép của WordPress bản miễn phí. Các bạn có thể chèn ảnh, chèn nhạc, chèn kí tự, hay thậm chí là chèn một bảng khác đều được. Và đương nhiên là các bạn cũng có thể sử dụng các thẻ div, p, span để định dạng cho văn bản trong ô. Cách định dạng cho toàn bộ văn bản trong bảng mình đã nói ở phần Tạo bảng cơ bản rồi, nếu các bạn chưa đọc thì hãy bấm vào ĐÂY để đọc lại nhé Nếu nội dung trong ô bao gồm nhiều đối tượng phức tạp như hình ảnh, nhạc, video, code đường viền,… thì các bạn không nên soạn thảo trực tiếp trên ô đó mà nên soạn thảo riêng nội dung đó vào một bài viết mới ở dạng bản nháp (Draft), sau đó các bạn mới sao chép code HTML của bài viết đó rồi dán vào phần nội dung của ô (chính là vị trí nằm giữa thẻ td mở và thẻ td đóng) trong bảng.

Thao tác kẻ viền cho bảng sẽ được minh hoạ bằng video sau:

Video 5. Kẻ viền cho bảng

c) Tạo bảng với đường kẻ ngang

Tức là bảng của các bạn sẽ chỉ có đường kẻ ngang mà không có đường kẻ dọc. Chúng ta vẫn sẽ sử dụng công cụ Replace của Notepad như ở trên nhưng cú pháp khi nhập vào khung trắng của mục Replace with sẽ khác. Các bạn vẫn nhập vào khung trắng của mục Find what chữ <td nhưng sẽ nhập vào mục Replace with với cú pháp như sau:

<td style="border-bottom: kiểu đường viền màu viền độ dày của viền; border-top: kiểu đường viền màu viền độ dày của viền; border-left: 0; border-right: 0;"

Tương tự như trên, các bạn có thể thêm vào thuộc tính padding nếu muốn.

Tiếp theo, để xoá đường viền mặc định bao ngoài của bảng, các bạn thêm vào thẻ mở table của bảng thuộc tính border với giá trị là 0. Tức là, lúc này thẻ mở table của các bạn sẽ có dạng như sau:

<table style="border-collapse: collapse; width: 100%; border: 0;">

Thao tác tạo bảng với đường kẻ ngang sẽ được minh hoạ bằng video sau:

Video 6. Tạo bảng với đường kẻ ngang

d) Tạo bảng với đường kẻ dọc

Tức là bảng của các bạn sẽ chỉ có đường kẻ dọc mà không có đường kẻ ngang. Chúng ta vẫn sẽ sử dụng công cụ Replace của Notepad như ở trên nhưng cú pháp khi nhập vào khung trắng của mục Replace with sẽ khác. Các bạn vẫn nhập vào khung trắng của mục Find what chữ <td nhưng sẽ nhập vào mục Replace with với cú pháp như sau:

<td style="border-left: kiểu đường viền màu viền độ dày của viền; border-right: kiểu đường viền màu viền độ dày của viền; border-top: 0; border-bottom: 0;"

Tương tự như trên, các bạn có thể thêm vào thuộc tính padding nếu muốn.

Tiếp theo, để xoá đường viền mặc định bao ngoài của bảng, các bạn thêm vào thẻ mở table của bảng thuộc tính border với giá trị là 0. Tức là, lúc này thẻ mở table của các bạn sẽ có dạng như sau:

<table style="border-collapse: collapse; width: 100%; border: 0;">

Thao tác tạo bảng với đường kẻ dọc sẽ được minh hoạ bằng video sau:

Video 7. Tạo bảng với đường kẻ dọc

e) Tạo bảng không có đường viền

Tức là bảng của các bạn sẽ không có cả đường viền ngang lẫn đường viền dọc.

Chúng ta vẫn sẽ sử dụng công cụ Replace của Notepad như ở trên nhưng cú pháp khi nhập vào khung trắng của mục Replace with sẽ khác. Các bạn vẫn nhập vào khung trắng của mục Find what chữ <td nhưng sẽ nhập vào mục Replace with với cú pháp như sau:

<td style="border: 0;"

Tương tự như trên, các bạn có thể thêm vào thuộc tính padding nếu muốn.

Tiếp theo, để xoá đường viền mặc định bao ngoài của bảng, các bạn thêm vào thẻ mở table của bảng thuộc tính border với giá trị là 0. Tức là, lúc này thẻ mở table của các bạn sẽ có dạng như sau:

<table style="border-collapse: collapse; width: 100%; border: 0;">

Thao tác tạo bảng không có đường viền sẽ được minh hoạ bằng video sau:

Video 8. Tạo bảng không có đường viền

f) Tạo màu nền và hình nền cho bảng

Để tạo màu nền và hình nền cho bảng, chúng ta sẽ thêm thuộc tính background vào thẻ mở table của code tạo bảng. Đây là thuộc tính định dạng nên các bạn sẽ không cần tách riêng mà sẽ để nó chung với các thuộc tính border-collapse và width luôn. Cách sử dụng thuộc tính background với bảng tương tự như cách sử dụng thuộc tính background với văn bản, các bạn có thể đọc bài Tạo hình nền/theme riêng cho bài viết để hiểu rõ hơn nhé, mình sẽ không viết lại cách dùng ở đây nữa mà chỉ đưa ví dụ thôi. Ví dụ, mình có code tạo bảng như sau:

<table style="border-collapse: collapse; width: 100%;">

<tbody>

<tr>

<td style="border: 1px solid #cc00cc;">hàng 1, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 1, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 1, cột 3</td>

</tr>

<tr>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 3</td>

</tr>

<tr>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 3</td>

</tr>

</tbody>

</table>

🍇 Kết quả:

hàng 1, cột 1	hàng 1, cột 2	hàng 1, cột 3
hàng 2, cột 1	hàng 2, cột 2	hàng 2, cột 3
hàng 3, cột 1	hàng 3, cột 2	hàng 3, cột 3

Bây giờ mình sẽ thêm thuộc tính background để tạo màu nền cho cả bảng, ở đây mình chọn màu cam nhạt với mã HEX là #ffcba4. Code của mình sẽ có dạng như sau:

<table style="border-collapse: collapse; width: 100%; background: #ffcba4;">

<tbody>

<tr>

<td style="border: 1px solid #cc00cc;">hàng 1, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 1, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 1, cột 3</td>

</tr>

<tr>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 3</td>

</tr>

<tr>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 3</td>

</tr>

</tbody>

</table>

🍇 Kết quả:

hàng 1, cột 1	hàng 1, cột 2	hàng 1, cột 3
hàng 2, cột 1	hàng 2, cột 2	hàng 2, cột 3
hàng 3, cột 1	hàng 3, cột 2	hàng 3, cột 3

Nếu không thích màu nền, mình sẽ chọn một hình ảnh làm nền cho bảng, lúc này code của mình sẽ có dạng như sau:

<table style="border-collapse: collapse; width: 100%; background: url('https://wptutbyserahwang.files.wordpress.com/2020/02/xz8apj.jpg');">

<tbody>

<tr>

<td style="border: 1px solid #cc00cc;">hàng 1, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 1, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 1, cột 3</td>

</tr>

<tr>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 3</td>

</tr>

<tr>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 3</td>

</tr>

</tbody>

</table>

🍇 Kết quả:

hàng 1, cột 1	hàng 1, cột 2	hàng 1, cột 3
hàng 2, cột 1	hàng 2, cột 2	hàng 2, cột 3
hàng 3, cột 1	hàng 3, cột 2	hàng 3, cột 3

Tiếp theo, nếu các bạn muốn tô màu hay tạo hình nền cho một ô nào đó trong bảng thì các bạn sẽ thao tác với cặp thẻ td tương ứng với ô đó, cách làm tương tự như đối với tạo màu nền (hoặc hình nền) cho văn bản. Ví dụ, mình có code bảng như sau:

<table style="border-collapse: collapse; width: 100%;">

<tbody>

<tr>

<td style="border: 1px solid #cc00cc;">hàng 1, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 1, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 1, cột 3</td>

</tr>

<tr>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 3</td>

</tr>

<tr>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 3</td>

</tr>

</tbody>

</table>

🍇 Kết quả:

hàng 1, cột 1	hàng 1, cột 2	hàng 1, cột 3
hàng 2, cột 1	hàng 2, cột 2	hàng 2, cột 3
hàng 3, cột 1	hàng 3, cột 2	hàng 3, cột 3

Bây giờ mình sẽ tô màu nền cho ô đầu tiên trong bảng (tương đương với toạ độ hàng 1, cột 1), ở đây mình chọn màu hồng nhạt với mã HEX là #ffc6ea. Code của mình sẽ có dạng như sau:

<table style="border-collapse: collapse; width: 100%;">

<tbody>

<tr>

<td style="border: 1px solid #cc00cc; background: #ffc6ea;">hàng 1, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 1, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 1, cột 3</td>

</tr>

<tr>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 2, cột 3</td>

</tr>

<tr>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 1</td>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 2</td>

<td style="border: 1px solid #cc00cc;">hàng 3, cột 3</td>

</tr>

</tbody>

</table>

🍇 Kết quả:

hàng 1, cột 1	hàng 1, cột 2	hàng 1, cột 3
hàng 2, cột 1	hàng 2, cột 2	hàng 2, cột 3
hàng 3, cột 1	hàng 3, cột 2	hàng 3, cột 3

Thao tác tạo màu nền và hình nền cho bảng sẽ được minh hoạ bằng video sau:

Video 9. Tạo màu nền và hình nền cho bảng

g) Tạo bảng nhanh với MS Word 2010 và Notepad

Đây chính là cách tạo bảng nhanh mà mình đã nói trước đó. Nó rất nhanh và tiện, nhưng khi cần phải sửa đổi một số thuộc tính trong code thì nó lại hơi phiền phức một chút vì lúc này code tạo bảng sẽ rất dài và loằng ngoằng, và chưa chắc code sẽ hiển thị đúng 100% như lúc xem trong phần mềm MS Word 2010. Cách tạo bảng nhanh với MS Word 2010 và Notepad rất đơn giản. Đầu tiên, các bạn sẽ thực hiện tạo và hoàn thiện bảng (bao gồm nhập văn bản, gộp ô, kẻ viền, tô màu nền,…) trong phần mềm MS Word 2010 trước. Lưu ý: Khi kẻ viền trong MS Word 2010, các bạn chỉ nên chọn những kiểu viền đã được liệt kê trong Bảng 1, nếu các bạn chọn kiểu viền khác thì code sẽ hiển thị không đúng. Sau khi đã tạo bảng trong MS Word 2010 xong, các bạn bấm vào tab File, chọn mục Save As và lưu file dưới dạng Web Page.

Tiếp theo, các bạn mở thư mục chứa file vừa lưu (file lưu dưới dạng Web Page), click chuột phải vào file vừa lưu và chọn mở file với Notepad (Open with\Notepad). Sau khi file được mở ra với phần mềm Notepad, để dễ nhìn code hơn, các bạn bấm vào mục Format của phần mềm này và chọn Word Wrap để ngắt các dòng code dài.

Sau đó, các bạn bấm tổ hợp phím Ctrl+F để mở hộp thoại tìm kiếm. Tại đây, các bạn nhập chữ <table vào mục Find what và bấm vào nút Find Next để tìm kiếm thẻ mở table. Sau khi tìm thấy thẻ mở table, các bạn đóng hộp thoại tìm kiếm đi và sao chép code tạo bảng. Các bạn sẽ bắt đầu sao chép từ thẻ mở table đến hết thẻ đóng table, sau đó các bạn hãy dán nó vào vị trí cần chèn bảng của bài viết trên WordPress (tất nhiên là phải dán code ở giao diện HTML rồi). Sau khi dán code xong, các bạn có thể quay trở lại giao diện trực quan để thực hiện các điều chỉnh cần thiết.

Thao tác tạo bảng nhanh với MS Word 2010 và Notepad sẽ được minh hoạ bằng video sau:

Video 10. Tạo bảng nhanh với MS Word 2010 và Notepad

Vậy là mình đã hướng dẫn xong các bạn cách chia cột và tạo bảng trên WordPress rồi Đây là bài hướng dẫn đầu tiên của năm mới 2020, chúc các bạn một năm mới an lành và hạnh phúc Hiện tại đang có dịch COVID-19, các bạn nhớ giữ gìn sức khoẻ và tuân theo các chỉ dẫn của Bộ Y tế để phòng tránh dịch nhé

⟵ Trang 1

↑ Về bảng nội dung ↑

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/

Pages: 1 2