Thousand Sunny
Chào mừng bạn đến với diễn đàn 1000Sunny.net ♥ diễn đàn dành cho tất cả những ai yêu mến One Piece.

Hãy đăng ký làm thành viên để xem diễn đàn và sử dụng đủ các chức năng được tốt nhất mà không bị các loại quảng cáo.

Việc đăng ký rất nhanh chóng ~♪ vậy nên hãy click đăng ký nha *shishishi*
Tin tức One Piece
Hướng dẫn về diễn đàn 1000sunny

Code Table

Trả lời chủ đề này

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

  • Trả lời chủ đề này

Code Table

Bài gửi by V. Sanji on 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  :sob: 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 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.


V. Sanji
Phục vụ con dân

Posts : 421
Status :
Online
Offline

Danh vọng : 396
Join date : 09/02/2016

Feeling : đã trở lại và ăn hại hơn xưa.

Partner : Nico Robin Pink Petal
Rương vật phẩm :




Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang

- Similar topics

Trả lời chủ đề này
 
Permissions in this forum:
Bạn được quyền trả lời bài viết