Tạo bảng (table) sử dụng markdown trên UAN Forum

Với hướng dẫn này, chúng tôi sử dụng một bảng có ba cột. Bạn có thể tạo một bảng có nhiều cột như bạn muốn nhưng nên biết rằng độ rộng bài đăng của bạn bị giới hạn, và một bảng quá lớn có thể trở nên thô kệch khi hiển thị trên di động.

Cơ chế cho một table thực sự đơn giản, mỗi ký tự | sẽ đại diện cho một cột. Giữa hai ký tự | bạn có thể thêm nội dung mà bạn muốn. Bạn cần bắt đầu và kết thúc mỗi dòng của bảng với một ký tự |.

Đầu tiên, chúng ta cần tạo một cái header cho bảng. Bạn cần phải thêm vào 2 dòng để có một cái bảng với tiêu đề header:

  • Dòng đầu tiên sẽ là tiêu đề cho từng cột (nếu có hơn 1 cột).
  • Dòng thứ hai sẽ là một dòng ngăn cách tiêu đề với nội dung bên dưới (và có vai trò căn trái, phải cho bảng)

Ví dụ:
| Col A | Col B | Col C
|—|---|—|

Đây là cấu trúc cơ bản của một table, với 3 cột và tiêu đề đi kèm.

Col A Col B Col C

Giờ đây chúng ta đã có thanh tiêu đề. Chúng ta tiếp tục tạo thêm những dòng bên dưới cho bảng. Công việc rất đơn giản, chỉ cần bắt đầu với |, và điền nội dung vào đủ các cột mà bạn cần (mỗi cột ngăn cách bởi dấu |).

Ví dụ như bên dưới:
| Col A | Col B | Col C|
| — | — | — |
| A1 | B1 | C1 |

Kết quả:

Col A Col B Col C
A1 B1 C1

Bạn có biết là Emojis hoặc công cụ markdown đều có thể sử dụng cho bảng? Bạn cũng có thể bôi đậm cho text và add vào emoji nếu muốn.

Giờ thì trang trí cho bảng thêm một chút xíu nhé. Chúng ta sẽ thêm vào một ô một biểu tượng emoji bất kỳ.

| Col A | Col B | Col C|
|---|---|---|
| A1 | B1 | C1 |
| A2 | B2 | :smile: |

Kết quả:

Col A Col B Col C
A1 B1 C1
A2 B2 :smile:

Bạn có thể để trống một ô bất kỳ nào đó nếu bạn muốn. Nhưng luôn nhớ rằng phải luôn được ngăn cách bởi dấu |, chỉ có điều là giữa hai dấu | thì không có nội dung nào thôi. Trong ví dụ bên dưới, ô B2 sẽ để trống.

| Col A | Col B | Col C|
|---|---|---|
| A1 | B1 | C1 |
| A2 | | :smile: |

Kết quả:

Col A Col B Col C
A1 B1 C1
A2 :smile:

Căn chỉnh dòng (alignment)

Như đã đề cập ở trên, dòng ngăn cách giữa header và nội dung bên dưới nó có thể đóng vai trò là “cây thước” để căn chỉnh trái, phải cho từng cột. Trong ví dụ ở trên, dòng phân cách có dạng: |—|---|—|.

Với mỗi cột, dấu : sẽ quyết định việc căn chỉnh theo hướng nào cho mỗi cột. Nếu chúng ta đặt dấu : bên trái dòng —, thì cột sẽ được canh trái. Dấu : đặt bên phải — thì canh phải. Canh giữa sẽ có dạng là :—:

| Left | Center | Right |
|:---|:---:|---:|
| My content is on the left | I'm the center of the world | I like being on the right side |
| :waxing_gibbous_moon: | :full_moon: | :waning_gibbous_moon: |

Kết quả:

Left Center Right
My content is on the left I’m the center of the world I like being on the right side
:waxing_gibbous_moon: :full_moon: :waning_gibbous_moon:

Tùy chỉnh bảng (sử dụng CSS)

Bạn hoàn toàn có thể tùy chỉnh thẩm mỹ bảng cho mình bằng việc sử dụng vài dòng CSS. Bạn có thể add border cho từng ô dữ liệu (cell), add background cho header, v.v. Nói chung là rất nhiều thứ bạn có thể làm.

Trong ví dụ bên dưới, bảng sẽ được điều chỉnh thay đổi một số yếu tố như: màu nền của header sẽ chuyển thành xám, border cho từng dòng sẽ đậm lên hơn.

Bảng sau khi CSS nó sẽ thế này:

Và đây là code CSS:

/* table */
.cooked table thead, .d-editor-preview table thead {
border-bottom: 2px solid #bbb !important;
background-color: #d3d3d3;
}
.cooked table tr, .d-editor-preview table tr {
border-bottom: 1px solid #bbb;
}

Nguồn: https://meta.discourse.org/t/create-a-table-using-markdown-on-your-discourse-forum/66544

1 Like