Post by Phoenix on Aug 2, 2016 9:10:56 GMT -5
So table-making, huh?
My goal with this is to introduce to you the different tools you can use to make fancy posting tables (or any other type of formatting masterpiece) like the ones you see on this site and others and hopefully help you make one yourself. I don't have a complete understanding of how the more complicated things work on tables with pieces that move if you hover over them with your mouse, but I think I know the basics well enough to at least try to explain them. As always, if you have questions, ask away, and with that out of the way, let's begin!
EDIT: Looking back through this, it's a lot longer and more detailed than I thought it would be, so I apologize in advance if all you wanted was a guide on how to make a table. I feel like all of the background info is important to understanding what's actually going on, but if you just want the table stuff, skip to the bolded label.
First, I'm sure you're familiar with how to modify your text. When you click the button for bolding, italicizing, underlining, orstriking through, different tags show up.
With v5, I think the a pretty common way of making tables is by using the div elements. For example, you see these when you align your text in the middle or to the right of the page:
Another type of div element can give you something like this:
I view the div tags as ways to split up the page into different parts using a number of steps. Take, for example, that black box. See how I have its code (the div style one) inside the div align one? Since I wanted it in the middle, I had to make it so that everything would be in the middle first, before I made it. Otherwise it would have stayed to the left and only whatever was inside the box would be moved to the center:
What's nice about the div style tags is that you don't have to separate the different code elements that go inside it. Remember how when you want to change the font and of your text how you generally have to use something like
Tables!
Ok, that's cool, Phoenix, you're saying, but what exactly can go inside the div style tags, and how does this all translate into making a table? There are a lot of elements that can go inside these tags, and they that do many different things. But the ones that most are used for the most basic table are as follows:
Not too bad, right? If you want more than a basic box for a table, though, you can put div style tags on top of or inside of the other ones. It is a little tricky and might take a little time to pick up, but essentially it's like making an entire section of text italics but only making a part of that text underlined and italicized. You're nesting different style tags to have different parts do different things within the entire table as a whole.
Start off with our little box, only make it a bit taller and wider and change the border.
Now let's stick this inside
so that our code looks like this: and our table looks like:
Notice how both the text and the gray box have been moved to the center. That's because they're being affected by the div align tag that encompasses the entire table. Let's keep going and put this
inside the original box, but after the gray box, and you'll end up with something that looks like:
If you look at a really fancy template (or at least a table I've made), you can probably break its code down into the different div style tags and get a good understanding for what does what. Of course, the really fancy tables also include other elements inside the div style tags beside the most basic ones above. Some of the other tags that come to mind include:
Shall we put some of this to work? Let's take our old little template from beforeand change some pieces around and add some new ones.
First, we'll go into the first div style tag and make the whole thing a bit wider (width:300px;) and get rid of the height specification, which will let the table stretch. We can also add some padding to the bottom (padding-bottom:10px;), since that will look nice.
Just inside of that tag is the one that affects the dark gray box that's saying hi to you. Let's make that look a little nicer. We'll make it smaller (width:75px;height:75px;) and turn it into a circle (border-radius:100%. Float it on over to the left (float:left;) just to try it out, and move the hello to the middle of the circle (text-align:center).
So that's not entirely what we were going for with the position for the hello, but we can go back and fix that later. Now that white box is looking awkwardly narrow in the middle there, so we'll go into the next div style tag and make that wider (width: 270px;) and put a nice little border around it (border:1px solid #4f4f4f;). Now, because ~aesthetic~ let's change the space between the lines (line-height:15px;), between the words (word-spacing:4px;), and make everything lowercase (text-transform:lowercase;).
The text, I'm sure you've noticed, not longer quite fits the white box. It just continues off the able like that because the table won't stretch because the height of the white box is specified. If we get rid of that piece of coding, then it will stretch with the text.
So that circle doesn't look quite right, what with the corner of the white box sticking out the other side of it. Time to mess with the margins! Moving the circle up should get rid of that problem, so if we go back into the style tag for the circle and do just that (margin-top:-15px;) we should be good to go.
Now it's poking up a little above the rest of the table, which you could want in some instances. If that doesn't float your boat though, you can just add some more padding to the top (padding-top:20px;) of the main table.
There's a bit of a blank space above the white box and to the right of the gray circle where you canwrite your name add something, and I'm thinking a line of text might look nice up there. That means we'll be adding a new div style to the code. Since we want it inside the table but before the gray circle, we'll add the tag after the tag that codes for the entire box (div style="width:300px;background-color:#cccccc;padding-top:10px;border:1px solid;padding-bottom:10px;") but before the one that codes for the circle (div style="width:75px;height:75px;background-color:#4f4f4f;border-radius:100%;text-align:center;float:left;margin-top:-15px").
We want just text, so there's no point specifying a background color or anything; we'll just use the tags that change text. We'll move it to the center (text-align:center;) and make it a little bigger than the other text so it stands out (font-size:15px;). Let's spread out the letters, too, so they fill the space (letter-spacing:6px;) and because it's fun, we can have it be in all caps (text-transform:uppercase;). Now we put the text in and close the tag with a [/div.] at the end (without the .) to make sure only that specific part of the table has those specifications. With this tag here, the extra padding at the top looks a little strange, so we can lower that value agian.
Most posting templates have little sections at the end for things like word count and tagging people, so lets put one in ours. It belongs at the very bottom, under the white box, so we'll add the div tag after the one for the white box but still inside the main one. We'll pick the dimensions (width:250px;height:25px;) and make the background color the same as the circle (background-color:#4f4f4f;). Let's move it to the middle (float:center;), and because we haven't messed with this yet, change the opacity so that it's a little see through (opacity:0.8;).
The position of the hello in the circle still isn't right, but the problem is that when you add padding to the circle tag, it makes it an oval instead.
So to move the hello down to the middle of the circle, go inside the circle tag where the hello is. Make a new div style tag and put the padding there, and because tags only change what's inside them, it will only move the word down and it won't change the circle.
So let's do the same for our table.
And there you have it!
There are some other div style tags that I didn't include in this particular example, such as the scrolling (overflow:auto;) one and the background image (background-image:url(URL);)one. I don't think the scrolling one really works when you have an element that is covering part of the text like the circle is here. On its own, though, it looks like this:
The background image element is pretty self-explanatory - it uses an image for a background instead of a solid color.
Not surprisingly, I find that practice is really the best way to get more familiar and comfortable with everything, and the preview tab is your best friend. In general when I'm making tables or want to figure out what something does, I'll go through the code and change one thing and flip to the preview tag to see what that did. Experiment. Fail. Try again. That's what I do when I make my own templates, and I think that's the way you have to do it to get a better understanding of what's going on and what the different lines of code actually mean. It takes time, but it's not impossible if you keep at it.
Hopefully this helped at least a little bit, and again, if you have any questions, just ask and I'll do my best to answer them.
Fawn @marshymutt
EDIT 1: If you want to change the opacity of a background without having it affect the opacity of the text, use RGBA colors for the background instead. (background-color:rgba(___,___,___,opacity);). It still goes in the div style tag, and the opacity is still a decimal between 0 and 1. This is a very helpful website for converting HEX (the normal 6-digit code on the site) to RGBA. Thanks Amber !
EDIT 2: Selectively change border radius = border-radius: top top bottom bottom;
Gradient as a background = background-image:linear-gradient(#color1,#color2);
My goal with this is to introduce to you the different tools you can use to make fancy posting tables (or any other type of formatting masterpiece) like the ones you see on this site and others and hopefully help you make one yourself. I don't have a complete understanding of how the more complicated things work on tables with pieces that move if you hover over them with your mouse, but I think I know the basics well enough to at least try to explain them. As always, if you have questions, ask away, and with that out of the way, let's begin!
EDIT: Looking back through this, it's a lot longer and more detailed than I thought it would be, so I apologize in advance if all you wanted was a guide on how to make a table. I feel like all of the background info is important to understanding what's actually going on, but if you just want the table stuff, skip to the bolded label.
First, I'm sure you're familiar with how to modify your text. When you click the button for bolding, italicizing, underlining, or
[b]somebody[/b] or [i]once[/i] or [u]told[/u] or [s]me[/s]
You've figured out by now that the text that goes between them is what is modified. It's important that you close the tag properly or else the rest of your text will end up looking like something you didn't want. And you know this, because you can change the font, color, size, and style of the text. Making tables essentially uses this same idea, only the tags are different and a little longer. With v5, I think the a pretty common way of making tables is by using the div elements. For example, you see these when you align your text in the middle or to the right of the page:
[div align="centerORrightORjustify;"]the world was gonna roll me[/div]
As I'm sure you've noticed, Proboards automatically makes it so that the text is aligned left, so unless you're changing the alignment of the text before, it's not really necessary to align your text to the left. Justify makes it so that the text goes across every line evenly - see how the line of the text here is straight on both the right and left sides? That's what justify looks like. Another type of div element can give you something like this:
hi
[div align="center"][div style="width:200px;height:20px;border:1px solid #000;"]hi[/div][/div]
Meet the div style tag, which is probably what you will use to make your fancy tables. With this, you can format your post in a lot of different ways, but before things get really complicated, I'm going to try to give you some idea of how I keep everything straight.I view the div tags as ways to split up the page into different parts using a number of steps. Take, for example, that black box. See how I have its code (the div style one) inside the div align one? Since I wanted it in the middle, I had to make it so that everything would be in the middle first, before I made it. Otherwise it would have stayed to the left and only whatever was inside the box would be moved to the center:
hi
[div style="width:200px;height:20px;border:1px solid #000;"][div align="center"]hi[/div][/div]
Much like how you can control whether something is bolded, the text inside the box can also be moved to the outside depending where you put it in your code.hi
[div align="center"]hi[div style="width:200px;height:20px;border:1px solid #000;"][/div][/div]
hi
[div align="center"][div style="width:200px;height:20px;border:1px solid #000;"][/div]hi[/div]
In that way, the div style tags divide up your page - there are the parts inside the box and there are the parts outside of the box.What's nice about the div style tags is that you don't have to separate the different code elements that go inside it. Remember how when you want to change the font and of your text how you generally have to use something like
[font face="times new roman"][font size="6"]this[/font][/font]
to get something like this? Not anymore. With the div style tag, you can merge the different elements under one tag, so that you'll only need something that looks like [div style="font-family:times new roman;font-size:36px;"]this[/div]
to get this. Having everything under one tag makes life a little easier, because then you only need to remember to put a single [./div] tag (without the .) at the end of the text instead of trying to keep the number of [./font] tags right. (Although Proboards automatically closes your open tags when you hit the preview button, it doesn't always do it right.) Just a few notes: + When you change the font size with the div style tag, you put the font size in pixel size as opposed to just numbers. As you use the div style tags more, you'll get a feel for how font size translates in pixels.
+ You can change the font color using the div style tag as well:
+ You can change the font color using the div style tag as well:
[div style="font-family:times new roman;color:#cccccc;"]i ain't the sharpest tool in the shed[/div]
Tables!
Ok, that's cool, Phoenix, you're saying, but what exactly can go inside the div style tags, and how does this all translate into making a table? There are a lot of elements that can go inside these tags, and they that do many different things. But the ones that most are used for the most basic table are as follows:
+ background-color:#______;
The order in which you place them inside the div style tag doesn't matter. Each element is separated by a semi-colon (, and there are quotations on the outside of the first and final elements. If you stick all of these together and center it, then you can make a simple table that looks something like this:Makes the indicated area a solid color. You'll have to find the 6 digit hexadecimal code that corresponds to the color you want, but that's no different than changing the color of your text.
+ border:_px style #____;-- also border-left, border-right, border-top, border-bottom
Puts a border around the area. You can determine the width of the line (how many px wide), the type of line (dashed, solid, dotted, inset, outset, double), and what color the line is. You can also make it so that any number of sides do or don't have a border by specifying which sides you want, but if you want only the top and bottom to have a border, you'll have to put a border-top: ____; followed by a border-bottom: ____;. You have to indicate what type of border you want, but if you leave the other sections blank, Proboards will give you something that's ~3px wide and black.
+ height:_px;Determines the height of your table. You'll get a feel for how tall you like your tables. If you want one that just stretches to encompass all of your post regardless of how long or short it is, don't specify a height. I generally only use this for scrolling tables.
+ padding:_px;-- also padding-left, padding-right, padding-top, padding-bottom
Lets you move text around with more precision than the broader div align tags. It will move the margins however many px you want; that is, the higher number you put before the px, the wider the margins and the narrower your text will get. Like with the border, you can choose what sides you want to have wider margins or change the amount of padding on various sides. The generic padding tag, without specifying a side, will simply give you the margin on all sides. This is how I have been indenting the text in this section, as you can put a div padding tag inside of a div padding tag.
+ text-align:___;Aligns your text inside the table. Even if you have a div align tag centering your table in the middle of your post (which most people do), indicating the alignment of the text inside your table makes it so that your text isn't centered as well. You can align right, left, or justify your text.
+ width:_px;Determines the width of your table. 500px is about as wide as you'll want to go; otherwise you'll get that annoying side scroll bar. I usually pick somewhere between 400px and 500px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[div align="center"][div style="width:150px;height:100px;background-color:#cccccc;padding-top:5px;padding-left:10px;border:2px dashed #000000;text-align:justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/div][/div]
Not too bad, right? If you want more than a basic box for a table, though, you can put div style tags on top of or inside of the other ones. It is a little tricky and might take a little time to pick up, but essentially it's like making an entire section of text italics but only making a part of that text underlined and italicized. You're nesting different style tags to have different parts do different things within the entire table as a whole.
Start off with our little box, only make it a bit taller and wider and change the border.
[div align="center"][div style="width:200px;height:200px;background-color:#cccccc;padding-top:10px;border:1px solid;"][/div][/div]
hello
[div style="width:150px;background-color:#4f4f4f;"]hello[/div]
[div align="center"][div style="width:200px;height:200px;background-color:#cccccc;padding-top:10px;border:1px solid;"][div style="width:150px;background-color:#4f4f4f;"]hello[/div][/div][/div]
hello
Notice how both the text and the gray box have been moved to the center. That's because they're being affected by the div align tag that encompasses the entire table. Let's keep going and put this
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[div style="width:150px;padding:5px;background-color:#ffffff;text-align:justify;height:150px;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/div]
hello
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[div align="center"][div style="width:200px;height:200px;background-color:#cccccc;padding-top:10px;border:1px solid;"][div style="width:150px;background-color:#4f4f4f;"]hello[/div]
[div style="width:150px;padding:5px;background-color:#ffffff;text-align:justify;height:150px;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/div][/div][/div]
If you look at a really fancy template (or at least a table I've made), you can probably break its code down into the different div style tags and get a good understanding for what does what. Of course, the really fancy tables also include other elements inside the div style tags beside the most basic ones above. Some of the other tags that come to mind include:
+ background-image:url(URLHERE);
Makes an image the background instead of a solid color.
+ border-radius:_pxOR100%;Makes the corners of the table rounded. A higher number means more curved. It's possible to make a circle using this by putting '100%' instead of indicating a specific number of px.
+ float:___;Moves the contents of one div style tag around the table. You can have a piece aligned to the left, center, or right. The text automatically shapes itself around.
+ letter-spacing:_px;Changes the amount of space between individual letters. A larger number makes a wider space.
+ line-height:_px;Changes the amount of space between the lines of text. A smaller number makes them closer together. A larger number moves the lines further apart.
+ margin-___:_px;-- also margin-left, margin-right, margin-top, margin-bottom
Changes the spacing between an element and its surrounds. While the padding tag modifies what's inside that particular tag, the margin one moves around that tag as a whole. For the table down below, using padding inside the div tag for the gray circle would move the text up, down, left, or right, but using the margin tag would change the position of the circle itself. Putting a negative number moves the element closer to the particular margin, and a positive number will move it further away.
+ opacity:___;Changes the opacity (transparency) of the element. Put a number between 0 and 1, with 1 being completely opaque and 0 being completely transparent.
+ overflow:auto;If you don't specify a height, your table will stretch the necessary length to include all of your text. However, if you do, then the table will stay that height and your text will simply keep going off of it. Adding this tag will add a scroll bar to your table if necessary so that the table stays the size it's supposed to and you can just keep scrolling to read the text. It's only necessary if there is a specific height indicated for the table.
+ text-transform:___;Makes the entirety of your text within this tag uppercase or lower case regardless of how it's typed.
+ word-spacing:__px;Changes the amount of space between each word. Like with the letter spacing, a higher number will put more space between the words.
Shall we put some of this to work? Let's take our old little template from before
[div align="center"][div style="width:200px;height:200px;background-color:#cccccc;padding-top:10px;border:1px solid;"][div style="width:150px;background-color:#4f4f4f;"]hello[/div]
[div style="width:150px;padding:5px;background-color:#ffffff;text-align:justify;height:150px;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/div][/div][/div]
First, we'll go into the first div style tag and make the whole thing a bit wider (width:300px;) and get rid of the height specification, which will let the table stretch. We can also add some padding to the bottom (padding-bottom:10px;), since that will look nice.
hello
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[div align="center"][div style="width:300px;background-color:#cccccc;padding-top:10px;border:1px solid;padding-bottom:10px;"][div style="width:150px;background-color:#4f4f4f;"]hello[/div]
[div style="width:150px;padding:5px;background-color:#ffffff;text-align:justify;height:150px;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/div][/div][/div]
Just inside of that tag is the one that affects the dark gray box that's saying hi to you. Let's make that look a little nicer. We'll make it smaller (width:75px;height:75px;) and turn it into a circle (border-radius:100%. Float it on over to the left (float:left;) just to try it out, and move the hello to the middle of the circle (text-align:center).
hello
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[div align="center"][div style="width:300px;background-color:#cccccc;padding-top:10px;border:1px solid;padding-bottom:10px;"][div style="width:75px;height:75px;background-color:#4f4f4f;border-radius:100%;text-align:center;float:left;"]hello[/div][div style="width:150px;padding:5px;background-color:#ffffff;text-align:justify;height:150px;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/div][/div][/div]
So that's not entirely what we were going for with the position for the hello, but we can go back and fix that later. Now that white box is looking awkwardly narrow in the middle there, so we'll go into the next div style tag and make that wider (width: 270px;) and put a nice little border around it (border:1px solid #4f4f4f;). Now, because ~aesthetic~ let's change the space between the lines (line-height:15px;), between the words (word-spacing:4px;), and make everything lowercase (text-transform:lowercase;).
hello
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[div align="center"][div style="width:300px;background-color:#cccccc;padding-top:10px;border:1px solid;padding-bottom:10px;"][div style="width:75px;height:75px;background-color:#4f4f4f;border-radius:100%;text-align:center;float:left;"]hello[/div][div style="width:270px;padding:5px;background-color:#ffffff;text-align:justify;height:150px;border:1px solid #4f4f4f;line-height:15px;word-spacing:4px;text-transform:lowercase;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div][/div][/div]
The text, I'm sure you've noticed, not longer quite fits the white box. It just continues off the able like that because the table won't stretch because the height of the white box is specified. If we get rid of that piece of coding, then it will stretch with the text.
hello
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[div align="center"][div style="width:300px;background-color:#cccccc;padding-top:10px;border:1px solid;padding-bottom:10px;"][div style="width:75px;height:75px;background-color:#4f4f4f;border-radius:100%;text-align:center;float:left;"]hello[/div][div style="width:270px;padding:5px;background-color:#ffffff;text-align:justify;border:1px solid #4f4f4f;line-height:15px;word-spacing:4px;text-transform:lowercase;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div][/div][/div]
So that circle doesn't look quite right, what with the corner of the white box sticking out the other side of it. Time to mess with the margins! Moving the circle up should get rid of that problem, so if we go back into the style tag for the circle and do just that (margin-top:-15px;) we should be good to go.
hello
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[div align="center"][div style="width:300px;background-color:#cccccc;padding-top:10px;border:1px solid;padding-bottom:10px;"][div style="width:75px;height:75px;background-color:#4f4f4f;border-radius:100%;text-align:center;float:left;margin-top:-15px;"]hello[/div][div style="width:270px;padding:5px;background-color:#ffffff;text-align:justify;border:1px solid #4f4f4f;line-height:15px;word-spacing:4px;text-transform:lowercase;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div][/div][/div]
Now it's poking up a little above the rest of the table, which you could want in some instances. If that doesn't float your boat though, you can just add some more padding to the top (padding-top:20px;) of the main table.
hello
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[div align="center"][div style="width:300px;background-color:#cccccc;padding-top:20px;border:1px solid;padding-bottom:10px;"][div style="width:75px;height:75px;background-color:#4f4f4f;border-radius:100%;text-align:center;float:left;margin-top:-15px;"]hello[/div][div style="width:270px;padding:5px;background-color:#ffffff;text-align:justify;border:1px solid #4f4f4f;line-height:15px;word-spacing:4px;text-transform:lowercase;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div][/div][/div]
There's a bit of a blank space above the white box and to the right of the gray circle where you can
We want just text, so there's no point specifying a background color or anything; we'll just use the tags that change text. We'll move it to the center (text-align:center;) and make it a little bigger than the other text so it stands out (font-size:15px;). Let's spread out the letters, too, so they fill the space (letter-spacing:6px;) and because it's fun, we can have it be in all caps (text-transform:uppercase;). Now we put the text in and close the tag with a [/div.] at the end (without the .) to make sure only that specific part of the table has those specifications. With this tag here, the extra padding at the top looks a little strange, so we can lower that value agian.
greetings
hello
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[div align="center"][div style="width:300px;background-color:#cccccc;padding-top:10px;border:1px solid;padding-bottom:10px;"][div style="text-align:center;font-size:15px;letter-spacing:6px;text-transform:uppercase;"]greetings[/div][div style="width:75px;height:75px;background-color:#4f4f4f;border-radius:100%;text-align:center;float:left;margin-top:-15px;"]hello[/div][div style="width:270px;padding:5px;background-color:#ffffff;text-align:justify;border:1px solid #4f4f4f;line-height:15px;word-spacing:4px;text-transform:lowercase;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div][/div][/div]
Most posting templates have little sections at the end for things like word count and tagging people, so lets put one in ours. It belongs at the very bottom, under the white box, so we'll add the div tag after the one for the white box but still inside the main one. We'll pick the dimensions (width:250px;height:25px;) and make the background color the same as the circle (background-color:#4f4f4f;). Let's move it to the middle (float:center;), and because we haven't messed with this yet, change the opacity so that it's a little see through (opacity:0.8;).
greetings
hello
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Word count, tags etc.
[div align="center"][div style="width:300px;background-color:#cccccc;padding-top:10px;border:1px solid;padding-bottom:10px;"][div style="text-align:center;font-size:15px;letter-spacing:6px;text-transform:uppercase;"]greetings[/div][div style="width:75px;height:75px;background-color:#4f4f4f;border-radius:100%;text-align:center;float:left;margin-top:-15px;"]hello[/div][div style="width:270px;padding:5px;background-color:#ffffff;text-align:justify;border:1px solid #4f4f4f;line-height:15px;word-spacing:4px;text-transform:lowercase;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div][div style="width:250px;height:25px;background-color:#4f4f4f;float:center;text-align:center;opacity:0.8;"]Word count, tags etc.[/div][/div][/div]
The position of the hello in the circle still isn't right, but the problem is that when you add padding to the circle tag, it makes it an oval instead.
hello
[div style="width:75px;height:75px;border-radius:100%;background-color:#4f4f4f;float:center;text-align:center;padding-top:10px;"]hello[/div]
So to move the hello down to the middle of the circle, go inside the circle tag where the hello is. Make a new div style tag and put the padding there, and because tags only change what's inside them, it will only move the word down and it won't change the circle.
hello
[div style="width:75px;height:75px;border-radius:100%;background-color:#4f4f4f;text-align:center;"][div style="padding-top:25px;"]hello[/div][/div]
So let's do the same for our table.
greetings
hello
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Word count, tags etc.
[div align="center"][div style="width:300px;background-color:#cccccc;padding-top:10px;border:1px solid;padding-bottom:10px;"][div style="text-align:center;font-size:15px;letter-spacing:6px;text-transform:uppercase;"]greetings[/div][div style="width:75px;height:75px;border-radius:100%;background-color:#4f4f4f;float:left;text-align:center;margin-top:-15px;"][div style="padding-top:25px;"]hello[/div][/div][div style="width:270px;padding:5px;background-color:#ffffff;text-align:justify;line-height:15px;text-transform:lowercase;word-spacing:4px;border:1px solid #4f4f4f;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div][div style="width:250px;height:25px;background-color:#4f4f4f;float:center;text-align:center;opacity:0.8;"]Word count, tags etc.[/div][/div][/div]
And there you have it!
There are some other div style tags that I didn't include in this particular example, such as the scrolling (overflow:auto;) one and the background image (background-image:url(URL);)one. I don't think the scrolling one really works when you have an element that is covering part of the text like the circle is here. On its own, though, it looks like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[div style="width:200px;background-color:#cccccc;padding-top:10px;border:1px solid;padding-bottom:10px;height:150px;overflow:auto;text-align:justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div]
The background image element is pretty self-explanatory - it uses an image for a background instead of a solid color.
Not surprisingly, I find that practice is really the best way to get more familiar and comfortable with everything, and the preview tab is your best friend. In general when I'm making tables or want to figure out what something does, I'll go through the code and change one thing and flip to the preview tag to see what that did. Experiment. Fail. Try again. That's what I do when I make my own templates, and I think that's the way you have to do it to get a better understanding of what's going on and what the different lines of code actually mean. It takes time, but it's not impossible if you keep at it.
Hopefully this helped at least a little bit, and again, if you have any questions, just ask and I'll do my best to answer them.
Fawn @marshymutt
EDIT 1: If you want to change the opacity of a background without having it affect the opacity of the text, use RGBA colors for the background instead. (background-color:rgba(___,___,___,opacity);). It still goes in the div style tag, and the opacity is still a decimal between 0 and 1. This is a very helpful website for converting HEX (the normal 6-digit code on the site) to RGBA. Thanks Amber !
EDIT 2: Selectively change border radius = border-radius: top top bottom bottom;
Gradient as a background = background-image:linear-gradient(#color1,#color2);