Deleted
•
Posts: 0
Likes:
|
Post by Deleted on Jun 22, 2014 17:56:04 GMT -5
I wanna test some table codes. Feel free to use them! I"ll provide the raw code for use too. Something some quote here This table is very simple to edit. Just change the colors of things. It should expand/contract to fit the size of your post. Lorem ipsum dolor sit amet, nusquam principes te has, sit legimus honestatis id, per ea mundi ocurreret honestatis. Tritani integre est in, ancillae deleniti temporibus no vis. Eum cu error tamquam. Sea ad eius dicit temporibus, est an iusto iudico munere, ut meliore suscipit accusamus duo. Te choro theophrastus qui, mea magna simul ne. Vide causae accusam qui te, ius eu vidit tation utinam. Wisi nulla omittam mea ne. In sit quodsi officiis oporteat, inani delicatissimi ea duo. Eum ut inani appetere argumentum, pro cu modo facilis incorrupte, quem hinc te eos. [div style="background:#ffffff;border:1px solid #000000;text-align:justify;padding-left:5px;padding-right:5px;padding-bottom:15px;"][div style="font-size:25px;font-family:Georgia;color:#980000;letter-spacing:3px;border-bottom:1px solid #980000;text-align:left;"]NAME [span style="letter-spacing:1px;font-family:Times;font-size:10px;color:#bbbbbb;font-style:italic;"]QUOTE MAYBE[/span][/div] TEXT HERE [/div]
|
|
Deleted
•
Posts: 0
Likes:
|
Post by Deleted on Jun 22, 2014 18:33:01 GMT -5
Something some quote here This table is a little harder to edit, you have to understand how the code works. Again, you can just change color values of the DIV boxes. However, there is also a table inside of the main box which separates the post into two columns. You can put your text on either side, but the extra side is for an image of your character. If you want the image in this cell instead, just put the image code I've provided here, and put text in the other cell.
The image works best if it is 325 wide x 365 high, with the bottom of it fading to a transparency, so that if the post is especially long, the bottom of the image fades out. The example image is from Elli S.
If you don't use an image that fades, then you can easily give it a border to separate it from the table.
| |
[div style="background:#ffffff;border:1px solid #000000;text-align:justify;padding-left:5px;padding-right:5px;padding-bottom:15px;"][div style="font-size:25px;font-family:Georgia;color:#980000;letter-spacing:3px;border-bottom:1px solid #980000;text-align:left;"]NAME [span style="letter-spacing:1px;font-family:Times;font-size:10px;color:#bbbbbb;font-style:italic;"]QUOTE[/span][/div] [table style="border:none;width:100%;border-collapse:collapse;"][tbody][tr][td style="border:none;width:50%;;vertical-align:top;"]TEXT HERE [/td][td style="border:none;width:50%;;vertical-align:top;"][img src="http://i.imgur.com/tWi7MsW.png" style="max-width:100%;"][/td][/tr][/tbody][/table]
|
|
Deleted
•
Posts: 0
Likes:
|
Post by Deleted on Jun 22, 2014 19:05:39 GMT -5
| This table is fairly easy to edit, I think. You can change the colors extremely easily, and you can replace the image at the top with anything you like. You can edit the width of the table and the height of the image to your liking. To edit the height of the image shown, just change the "height" in that cell.. I used a much larger image, but set it to max-width:100%.
You can use an image that is exactly the size you want and remove the max-width property if you wish.However, you MUST specify a height for the image to show. Usually you want this to be the same height or smaller than the image you put in. This has the same image credit as above. | NAME QUOTE MAYBE |
[div align="center"][table style="background:#ffffff;width:100%;border:1px solid #000000;border-collapse:collapse;"][tbody][tr][td style="border:0px;border-collapse:collapse;padding:0px;height:120px;background-repeat:repeat;background-image:url('http://i.imgur.com/hfM1JX5.png');"][/td][/tr][tr][td style="border:0px;border-collapse:collapse;border-top:1px solid #000000;padding:10px;"]TEXT HERE[/td][/tr][tr][td style="text-align:center;border:none;border-collapse:collapse;"][div style="font-size:25px;font-family:Georgia;color:#980000;letter-spacing:3px;border-bottom:1px solid #980000;margin-bottom:-15px;"]NAME[/div] [span style="letter-spacing:1px;font-family:Times;font-size:10px;color:#bbbbbb;font-style:italic;"]QUOTE MAYBE[/span][/td][/tr][/tbody][/table][/div]
|
|
Deleted
•
Posts: 0
Likes:
|
Post by Deleted on Jun 22, 2014 19:22:24 GMT -5
|
This is the coding i use most often! It's a little complex but fun to work with, and allows for a dynamic expanding table that uses full graphics.
Note: the images for this table are broken down into three sections. 1 2 3 < to show the images that I used for Elara's table. I've used generic images here.
The table itself is transparent and the cells use background images, making it so you can round your images to get a rounded table.
Note that this table requires a lot more work from you, as it requires you to do the images for each part of the table.
The middle image should be a subtle repeating pattern, or a solid color, depending on how you build your image.
You can change the padding on the middle section if you want the text to take up a wider space.
I cannot, at this time, provide a tutorial for you. I am only able to provide the code. You can tweak it to your own liking.
| |
[div align="center"][table style="background:transparent;width:500px;border:0px;border-collapse:collapse;"][tbody][tr][td style="height:105px;border:0px;border-collapse:collapse;background-repeat:repeat;background-image:url('http://i.imgur.com/OF2QCfE.jpg');"][/td][/tr][tr][td style="height:50px;border:0px;border-collapse:collapse;background-repeat:repeat;background-image:url('http://i.imgur.com/04mpSvb.jpg');"] [div style="font-family:georgia;font-size:13px;padding-left:100px;padding-right:100px;text-align:justify;"][font color="#000000"]YOUR TEXT GOES HERE![/font][/div] [/td][/tr][tr][td style="height:150px;border:0px;border-collapse:collapse;background-repeat:repeat;background-image:url('http://i.imgur.com/dg9cKpr.jpg');"][/td][/tr][/tbody][/table][/div]
|
|
Deleted
•
Posts: 0
Likes:
|
Post by Deleted on Jun 22, 2014 19:27:29 GMT -5
NAME
QUOTE MAYBE This just provides a reversed version of table 3. See details on that post. | |
[div align="center"][table style="background:#ffffff;width:100%;border:1px solid #000000;border-collapse:collapse;"][tbody][tr][td style="border:0px;border-collapse:collapse;padding:10px;"][div style="font-size:25px;font-family:Georgia;color:#980000;letter-spacing:3px;border-bottom:1px solid #980000;margin-bottom:-15px;text-align:center;"]NAME[/div] [div style="letter-spacing:1px;font-family:Times;font-size:10px;color:#bbbbbb;font-style:italic;text-align:center;"]QUOTE MAYBE[/div] YOUR TEXT HERE[/td][/tr][tr][td style="border:0px;border-collapse:collapse;padding:0px;height:120px;background-repeat:repeat;background-image:url('http://i.imgur.com/hfM1JX5.png');border-top:1px solid #000000;"][/td][/tr][/tbody][/table][/div]
|
|