Code Table

by **V. Sanji** 11/2/2016, 1:02 am

Lấy lại nội dung mị viết hồi xưa để hướng dẫn bên STW =))

Hướng dẫn dùng code table để trình bày.
Chúng ta sẽ không có thêm BBcode

và chúng ta sẽ vận dụng hết hiệu quả của code Table tại forum.
Sau khoảng 2 ngày mày mò thì Yuu thấy, cái duy nhất mà code table hiện không hỗ trợ được là hover mà thôi :shishi:
Bên dưới mình sẽ viết những hướng dẫn cơ bản nhất (nâng cao từ từ sau)

Code table bọc một bảng quanh nội dung kí hiệu áp code Code Table Table-icon_zps402c1dc5

Code cơ bản

Code:: [table][tr][td] nội dung trong table [/td][/tr][/table]

Ta có thể hiểu đơn giản toàn bộ cụm mở code và đóng code đó như code [box] trước đây của Vnsharing. Chúng ta có thể add thêm nhiều cấu trúc style của nó để trình bày.

CSS Properties rất nhiều và đa dạng, các bạn có thể tham khảo Tại đây shishi

Yuu sẽ giới thiệu qua một số áp dụng quen thuộc cho trình bày bài viết

1. Canh lề: Margin

Margin CSS

Những gì tôi có thể nhớ, là một màn tuyết trắng xóa.

Chúng tôi đang vượt lên trên những gì mà tuổi trẻ ở thị trấn đã trải qua. Ở đây chỉ có một màu trắng, đất trắng, cây trắng, trời trắng. Con người nhỏ bé lặn ngụp trong màu trắng bất tận ấy, tìm kiếm một điểm đến.

Cậu ấy hay tôi đều thế, nương tựa vào nhau mà bước.

Code:: [table style="Margin: 0px 100px 0px 100px; text-align:justify;"][tr][td] Những gì tôi có thể nhớ, là một màn tuyết trắng xóa. Chúng tôi đang vượt lên trên những gì mà tuổi trẻ ở thị trấn đã trải qua. Ở đây chỉ có một màu trắng, đất trắng, cây trắng, trời trắng. Con người nhỏ bé lặn ngụp trong màu trắng bất tận ấy, tìm kiếm một điểm đến. Cậu ấy hay tôi đều thế, nương tựa vào nhau mà bước. [/td] [/tr] [/table]

4 chỉ số của Margin tượng trưng cho Top Right Bottom Left (nhớ theo chiều kim đồng hồ là dễ nhất)
Để lùi trái phải vào mỗi bên 100px ta có thể ghi 0px 100px 0px 100px
Thêm Justify cho text để chữ được dàn trải đều các hàng.

Màu nền, hình nền, viền.

1. Màu nền
background-color: #mã màu hex hoặc mã màu rgba(?,?,?). CSS
Trong ví dụ bên dưới mình đã áp cả padding, giúp chữ tự cách lề table 1 khoảng tùy biến.

Những gì tôi có thể nhớ, là một màn tuyết trắng xóa.

Chúng tôi đang vượt lên trên những gì mà tuổi trẻ ở thị trấn đã trải qua. Ở đây chỉ có một màu trắng, đất trắng, cây trắng, trời trắng. Con người nhỏ bé lặn ngụp trong màu trắng bất tận ấy, tìm kiếm một điểm đến.

Cậu ấy hay tôi đều thế, nương tựa vào nhau mà bước.

Zoro ngả đầu ra sau, tựa người lên thành ghế lạnh, ngẩng nhìn bầu trời lúc này đang mờ mờ một màu xanh xám. Đôi cành cây trơ lá vắt vẻo trong khung trời của cậu, như đập vỡ chúng thành từng mảnh. Đã qua rồi ánh nắng rực rỡ, sắc màu trong suốt, xanh thẫm của những ngày hè. Zoro thì thầm với những mảnh trời nứt nẻ.

Code:: [table style="Margin: 0px 0px 0px 0px; text-align:justify; background-color:#b8e5ff"][tr][td][table style="Margin: 5px 50px 50px 50px; text-align:justify; padding:10px; background-color:#ffffff;"][tr] [td]Những gì tôi có thể nhớ, là một màn tuyết trắng xóa. Chúng tôi đang vượt lên trên những gì mà tuổi trẻ ở thị trấn đã trải qua. Ở đây chỉ có một màu trắng, đất trắng, cây trắng, trời trắng. Con người nhỏ bé lặn ngụp trong màu trắng bất tận ấy, tìm kiếm một điểm đến. Cậu ấy hay tôi đều thế, nương tựa vào nhau mà bước. [/td] [/tr] [tr][td colspan="2"]Zoro ngả đầu ra sau, tựa người lên thành ghế lạnh, ngẩng nhìn bầu trời lúc này đang mờ mờ một màu xanh xám. Đôi cành cây trơ lá vắt vẻo trong khung trời của cậu, như đập vỡ chúng thành từng mảnh. Đã qua rồi ánh nắng rực rỡ, sắc màu trong suốt, xanh thẫm của những ngày hè. Zoro thì thầm với những mảnh trời nứt nẻ.[/td] [/tr] [/table] [/td] [/tr] [/table]

2. Hình nền
Áp dụng khá giống Background-color, giờ ta có Background-image: url('linkảnh')
Để định dạng repeat hoặc không repeat ta thêm Background-repeat: chọn repeat hoặc no-repeat
Để hình nền chạy theo chiều dọc thêm Background-attachment: fixed

Những gì tôi có thể nhớ, là một màn tuyết trắng xóa.

Chúng tôi đang vượt lên trên những gì mà tuổi trẻ ở thị trấn đã trải qua. Ở đây chỉ có một màu trắng, đất trắng, cây trắng, trời trắng. Con người nhỏ bé lặn ngụp trong màu trắng bất tận ấy, tìm kiếm một điểm đến.

Cậu ấy hay tôi đều thế, nương tựa vào nhau mà bước.

Zoro ngả đầu ra sau, tựa người lên thành ghế lạnh, ngẩng nhìn bầu trời lúc này đang mờ mờ một màu xanh xám. Đôi cành cây trơ lá vắt vẻo trong khung trời của cậu, như đập vỡ chúng thành từng mảnh. Đã qua rồi ánh nắng rực rỡ, sắc màu trong suốt, xanh thẫm của những ngày hè. Zoro thì thầm với những mảnh trời nứt nẻ.

Code:: [table style="Margin: 0px 0px 0px 0px; text-align:justify; background-image: url('http://i1359.photobucket.com/albums/q788/Yuushishi/ZoSan%20FC/fiction/pattern010_zps5872c729.jpg'); background-repeat:repeat; "][tr][td] [table style="Margin: 5px 50px 50px 50px; text-align:justify; padding:10px; background-color:#ffffff;"][tr] [td]Những gì tôi có thể nhớ, là một màn tuyết trắng xóa. Chúng tôi đang vượt lên trên những gì mà tuổi trẻ ở thị trấn đã trải qua. Ở đây chỉ có một màu trắng, đất trắng, cây trắng, trời trắng. Con người nhỏ bé lặn ngụp trong màu trắng bất tận ấy, tìm kiếm một điểm đến. Cậu ấy hay tôi đều thế, nương tựa vào nhau mà bước. [/td] [/tr] [tr][td colspan="2"]Zoro ngả đầu ra sau, tựa người lên thành ghế lạnh, ngẩng nhìn bầu trời lúc này đang mờ mờ một màu xanh xám. Đôi cành cây trơ lá vắt vẻo trong khung trời của cậu, như đập vỡ chúng thành từng mảnh. Đã qua rồi ánh nắng rực rỡ, sắc màu trong suốt, xanh thẫm của những ngày hè. Zoro thì thầm với những mảnh trời nứt nẻ.[/td] [/tr] [/table] [/td] [/tr] [/table]

Đây là với attachment

Những gì tôi có thể nhớ, là một màn tuyết trắng xóa.

Chúng tôi đang vượt lên trên những gì mà tuổi trẻ ở thị trấn đã trải qua. Ở đây chỉ có một màu trắng, đất trắng, cây trắng, trời trắng. Con người nhỏ bé lặn ngụp trong màu trắng bất tận ấy, tìm kiếm một điểm đến.

Cậu ấy hay tôi đều thế, nương tựa vào nhau mà bước.

Zoro ngả đầu ra sau, tựa người lên thành ghế lạnh, ngẩng nhìn bầu trời lúc này đang mờ mờ một màu xanh xám. Đôi cành cây trơ lá vắt vẻo trong khung trời của cậu, như đập vỡ chúng thành từng mảnh. Đã qua rồi ánh nắng rực rỡ, sắc màu trong suốt, xanh thẫm của những ngày hè. Zoro thì thầm với những mảnh trời nứt nẻ.

Code:: [table style="Margin: 0px 0px 0px 0px; text-align:justify; background-image: url('http://i1359.photobucket.com/albums/q788/Yuushishi/ZoSan%20FC/fiction/il_fullxfull441284010_fgbp_zps1fa494e1.jpg'); background-repeat:repeat; Background-attachment: fixed;"][tr][td] [table style="Margin: 5px 50px 50px 50px; text-align:justify; padding:10px; background-color:#ffffff;"][tr] [td]Những gì tôi có thể nhớ, là một màn tuyết trắng xóa. Chúng tôi đang vượt lên trên những gì mà tuổi trẻ ở thị trấn đã trải qua. Ở đây chỉ có một màu trắng, đất trắng, cây trắng, trời trắng. Con người nhỏ bé lặn ngụp trong màu trắng bất tận ấy, tìm kiếm một điểm đến. Cậu ấy hay tôi đều thế, nương tựa vào nhau mà bước. [/td] [/tr] [tr][td colspan="2"]Zoro ngả đầu ra sau, tựa người lên thành ghế lạnh, ngẩng nhìn bầu trời lúc này đang mờ mờ một màu xanh xám. Đôi cành cây trơ lá vắt vẻo trong khung trời của cậu, như đập vỡ chúng thành từng mảnh. Đã qua rồi ánh nắng rực rỡ, sắc màu trong suốt, xanh thẫm của những ngày hè. Zoro thì thầm với những mảnh trời nứt nẻ.[/td] [/tr] [/table] [/td] [/tr] [/table]

3. Border
CSS

Những gì tôi có thể nhớ, là một màn tuyết trắng xóa.

Chúng tôi đang vượt lên trên những gì mà tuổi trẻ ở thị trấn đã trải qua. Ở đây chỉ có một màu trắng, đất trắng, cây trắng, trời trắng. Con người nhỏ bé lặn ngụp trong màu trắng bất tận ấy, tìm kiếm một điểm đến.

Cậu ấy hay tôi đều thế, nương tựa vào nhau mà bước.

------------------------------------

Zoro ngả đầu ra sau, tựa người lên thành ghế lạnh, ngẩng nhìn bầu trời lúc này đang mờ mờ một màu xanh xám. Đôi cành cây trơ lá vắt vẻo trong khung trời của cậu, như đập vỡ chúng thành từng mảnh. Đã qua rồi ánh nắng rực rỡ, sắc màu trong suốt, xanh thẫm của những ngày hè. Zoro thì thầm với những mảnh trời nứt nẻ.

Code:: [table style="padding:10px; text-align:justify; background-color:#b8e5ff"][tr][td][table style="border: 1px solid black; padding:50px;"][tr][td] [table style="text-align:justify; padding:15px; background-color:#ffffff;"][tr][td]Những gì tôi có thể nhớ, là một màn tuyết trắng xóa. Chúng tôi đang vượt lên trên những gì mà tuổi trẻ ở thị trấn đã trải qua. Ở đây chỉ có một màu trắng, đất trắng, cây trắng, trời trắng. Con người nhỏ bé lặn ngụp trong màu trắng bất tận ấy, tìm kiếm một điểm đến. Cậu ấy hay tôi đều thế, nương tựa vào nhau mà bước. ------------------------------------ Zoro ngả đầu ra sau, tựa người lên thành ghế lạnh, ngẩng nhìn bầu trời lúc này đang mờ mờ một màu xanh xám. Đôi cành cây trơ lá vắt vẻo trong khung trời của cậu, như đập vỡ chúng thành từng mảnh. Đã qua rồi ánh nắng rực rỡ, sắc màu trong suốt, xanh thẫm của những ngày hè. Zoro thì thầm với những mảnh trời nứt nẻ. [/td] [/tr] [/table] [/td] [/tr] [/table] [/td] [/tr] [/table]

border: độ dày định dạng màu
Trong đó độ dày là px: 1px 2px 3px ...
Định dạng gồm: solid (thẳng bình thường), dotted: chấm, dashed: gạch
Nếu bạn chỉ muốn kẻ 1 đường border ở một phía, có thể dùng border-top, border-bottom, border-left, border-right thay cho border.