Code table trong trình bày - một số thứ cơ bản nhất.

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

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 Luffy 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 trong trình bày - một số thứ cơ bản nhất. 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 :D

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 và ứng dụng cột để chèn ảnh.

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.

Chèn ảnh trái phải
Hồi xưa thì cái này là limit hoặc limitr hoặc imgleft hoặc imgright bây giờ ta vận dụng chia cột của table luôn
cứ 1

Code:: [tr][td]...........[/td][/tr]

là 1 hàng và 1

Code:: [td]......[/td]

là 1 cột. Table giúp ta dễ dàng trình bày hàng cột nội dung bên trong

Code table trong trình bày - một số thứ cơ bản nhất. 1-36

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 100px 0px 100px; text-align:justify;"][tr][td][img]http://r15.imgfast.net/users/1513/30/53/14/avatars/1-36.jpg[/img][/td][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]

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][img]http://r15.imgfast.net/users/1513/30/53/14/avatars/1-36.jpg[/img][/td]
[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][img]http://r15.imgfast.net/users/1513/30/53/14/avatars/1-36.jpg[/img][/td]
[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 Code table trong trình bày - một số thứ cơ bản nhất. 3553023154

(đang ngồi soạn bài thì cô Đông add emo FB luôn, thiệt là cảm ơ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-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][img]http://r15.imgfast.net/users/1513/30/53/14/avatars/1-36.jpg[/img][/td]
[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.

**A Pace-aholic** Berry : 141 Tổng số bài gửi : 37

Cách biến tấu table thành limit của Yuu vẫn chưa thật tối ưu, khi sử dụng phải căn phần text cho vừa chiều cao của ảnh, mình có cách khác:

Sử dụng CSS property float vào table, set thêm padding tạo khoảng cách giữa table và text, ta có:

Code table trong trình bày - một số thứ cơ bản nhất. Roughwork2_by_sandara

But once he has her there, he doesn't act like your ordinary kidnapper and lock her in a closet and abuse her - at least, not as far as we're told. Rather, he marries her, at least in a common law way.

He sets her up as his queen, very nearly his equal in power.

When Persephone's whereabouts are discovered, and Hermes comes to bring her back above ground, Hades tells her: "Go now, Persephone, to your dark-robed mother, go, and feel kindly in your heart towards me: be not so exceedingly cast down; for I shall be no unfitting husband for you among the deathless gods, that am own brother to father Zeus. And while you are here, you shall rule all that lives and moves and shall have the greatest rights among the deathless gods: those who defraud you and do not appease your power with offerings, reverently performing rites and paying fit gifts, shall be punished for evermore."

Code:: [table style="float:left;padding-right: 15px;"][tr][td][img]http://th04.deviantart.net/fs42/200H/f/2009/091/b/9/Roughwork2_by_sandara.jpg[/img][/td]
[/tr]
[/table]
[justify]But once he has her there, he doesn't act like your ordinary kidnapper and lock her in a closet and abuse her - at least, not as far as we're told. Rather, he marries her, at least in a common law way.

He sets her up as his queen, very nearly his equal in power.

When Persephone's whereabouts are discovered, and Hermes comes to bring her back above ground, Hades tells her: "Go now, Persephone, to your dark-robed mother, go, and feel kindly in your heart towards me: be not so exceedingly cast down; for I shall be no unfitting husband for you among the deathless gods, that am own brother to father Zeus. And while you are here, you shall rule all that lives and moves and shall have the greatest rights among the deathless gods: those who defraud you and do not appease your power with offerings, reverently performing rites and paying fit gifts, shall be punished for evermore."[/justify]

Tương tự, nếu muốn ảnh ở bên phải:

Code table trong trình bày - một số thứ cơ bản nhất. Hades_and_persephone_by_rgveta-djw2ov

That's somewhat debatable. The most common story is that Hades abducted Persephone against her will. Some describe it as love at first sight - in fact, in Ovid's Metamorphoses, Hades was struck by one of Eros' famous arrows and made to fall in love with Persephone, all through Aphrodite's machinations.

In that same poem Arethusa describes seeing Persephone in the Underworld: "Her looks were sad, and fear still in her eyes; and yet a queen, and yet of that dark land empress."

When the abduction was discovered Hades was made to let Persephone go, but because she had been tricked into eating the food of the Underworld she was forced to return for a part of each year. In some variations of the story, Persephone had eaten a pomegranate in the Underworld's orchard during her explorations. Ascalaphus, the keeper of the orchard, dobbed her in and thus she was forced to return to the Underworld every year - Persephone "groaned in distress" and punished him by turning him into an owl.

Yet Ovid makes the resolution a happy one: "Now Proserpine [Persephone], of two empires alike great deity, spends with her mother half the year's twelve months and with her husband half. Straightaway her heart and features are transformed; that face which even Pluto [Hades] must have found unhappy beams with joy."

And if she truly didn't care for his attentions, she certainly wouldn't have had such an unpleasant reaction when she found out Hades got the hots of the nymph Minthe. Persephone was so angry on that occasion that she trampled the poor girl under her feet and turned her into a mint plant.

Maybe she loved him, maybe she didn't. Maybe she learned to love him over time. Maybe all she has is animosity and loneliness.

Code:: [table style="float:right;padding-left: 15px; text-align:justify"][tr][td][img]http://th02.deviantart.net/fs70/200H/f/2013/153/3/a/hades_and_persephone_by_rgveta-djw2ov.jpg[/img][/td]
[/tr]
[/table]
[justify]That's somewhat debatable. The most common story is that Hades abducted Persephone against her will. Some describe it as love at first sight - in fact, in Ovid's Metamorphoses, Hades was struck by one of Eros' famous arrows and made to fall in love with Persephone, all through Aphrodite's machinations.

In that same poem Arethusa describes seeing Persephone in the Underworld: "Her looks were sad, and fear still in her eyes; and yet a queen, and yet of that dark land empress."

When the abduction was discovered Hades was made to let Persephone go, but because she had been tricked into eating the food of the Underworld she was forced to return for a part of each year. In some variations of the story, Persephone had eaten a pomegranate in the Underworld's orchard during her explorations. Ascalaphus, the keeper of the orchard, dobbed her in and thus she was forced to return to the Underworld every year - Persephone "groaned in distress" and punished him by turning him into an owl.

Yet Ovid makes the resolution a happy one: "Now Proserpine [Persephone], of two empires alike great deity, spends with her mother half the year's twelve months and with her husband half. Straightaway her heart and features are transformed; that face which even Pluto [Hades] must have found unhappy beams with joy."

And if she truly didn't care for his attentions, she certainly wouldn't have had such an unpleasant reaction when she found out Hades got the hots of the nymph Minthe. Persephone was so angry on that occasion that she trampled the poor girl under her feet and turned her into a mint plant.

Maybe she loved him, maybe she didn't. Maybe she learned to love him over time. Maybe all she has is animosity and loneliness.[/justify]

*Quăng bông rào rào cho post trên*

Chuẩn quá, lại còn đơn giản dễ hiểu dễ xài *chấm nước mắt* bye bye

Khuyên các thím nên dùng background màu không nên tối quá hoặc quá rối rắm, hoặc nên margin nó lại để tách ra một khoảng.

Nếu không che mất cái nút like với dislike là thiệt lắm nha Luffy moc mui

**Thủy Thủ** Berry : 86 Tổng số bài gửi : 151

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]

chỗ Margin: 0px 100px 0px 100px có thể viết gọn thành 0px 100px trong đó 0px là margin top và bottom, 100px là left và right.

Btw, đây là cách code này hiển thị ở chế độ mobile trên các trình duyệt trên điện thoại có hỗ trợ flash:

Spoiler:

và trường hợp tệ hơn:

Spoiler:

Khắc phục có thể sử dụng kết hợp width và margin:auto

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.

Trong cách này, width dùng thông số px sẽ gây tràn màn hình :v do đó chỉ có thể dùng %

mà nói tóm lại thì cách chữa cháy cũng si đa vật vã, cách tốt nhất là không post bài ở chế độ mobile nhưng nếu mạng quá lag thì bạn không có sự lựa chọn nào khác

Btw, lỗi này chỉ gặp trên các trình duyệt web hỗ trợ flash và hoàn toàn bình thường trên Opera Mini, nhưng tất nhiên là dùng Opera Mini thì không log nick vào được =))))))))

**Hải Quân** Berry : 65 Tổng số bài gửi : 142

Opera Mini log nick được nhưng hay bị out ra nhé, save mật khẩu thì nó còn nguyên nick và pass chỉ cần bấm đăng nhập thôi nữa thôi không cần nhập lại.

Cái nữa là không đăng nhập khi kéo xuống cuối một topic bất kỳ có thể thấy cái Similar topics với tiêu đề dòm rất đau mắt mà không tiện cap hình ra đây =))

» NHỮNG CẬP NHẬT CỦA FORUM TRONG NGÀY 9/10
» Đính chính quan trọng trong vấn đề clone và nhân vật
» Mẫu trình bày bài tương tác
» [Journey of Dreams] Hành trình đến Loguetown
» Code TIP cho nhân vật or whatever mục đích sử dụng