This is a tutorial for making HTML posting tables the way I make them: without the table tag! In this tutorial, you will learn to use and love the div tag.
As a side note, I am not an HTML expert, so if I say something that is pure nonsense, be sure to tell me. There are also some things you may have seen before, like hover tables or shadows, but I don't know how to do them and I'm not really interested in learning, so if you are, you can look it up yourself.
This post is part one, which tells you all of the many, many HTML things I know and apply to tables. There will be a part two on actually making pretty tables from everything I've stuffed forcefully into your brain via your eyes. I'll cover almost all of the types of tables I've encountered, except for hover tables.
Table of Contents
HTML Basics
---The All-Important Div Tag
---Attributes, Properties, Values and Their Magic
------The Style Attribute
---Colors
Onto the Table Making!
---Text Styling
Fancier Tables
---Images
---Scrolling Divs
---Margin
---Rounded Corners
---Max-Width and Max-Height Properties
Misc. Unrelated HTML Info
Putting it all Together (Second Part)
Skip to the bottom of this giant post
HTML Basics
HTML stands for Hyper-Text Markup Language. It's the coding language for webpages and it's pretty neat when you get to use it. I've noticed not all HTML is enabled on this forum, for example, comments are disabled, but what we are allowed to use still has a wide range of abilities.
Anyway, onto the important stuff.
HTML is composed of a bunch of tags, which all look like: <TAG NAME>. Most of them need to be closed off with a </TAG NAME>, or else you're going to break the board. If you don't, for example, close off <b> (bold), the computer will think everything else is also supposed to be bolded. It can be even worse if you fail to close a <a href="link"> or a <div>, because for the former, everything else in the page will also be a link, and in the latter, everything else can be formatted ugly.
So if you end up breaking the page, go look to see if you forgot to close something off, and be wary for when you think you have, but forgot the / in the closing tag, so you just have <TAG NAME> <TAG NAME>, not <TAG NAME> </TAG NAME>.
Also be wary for typos or incorrect punctuation or what-have-you. If you have : instead of ; in certain places, it can look really wonky.
The All-Important Div
<div> stands for divider, and it's a container for content. It's very important. While placed down bare, it's invisible, but if you add fancy styling, it can be very impressive, especially with other divs. Using it is how you're going to learn to make tables here, not with the actual <table> tag.
Attributes, Properties, Values and Their Magic
Attributes. They are *looks it up* the href in <a href="URL">, the src in <img src="URL">, the align in <div align="ALIGNMENT">, and most importantly, the style in <div style="STYLE INFO;">. They're traits of a tag*, defining the various way it works, such as the url of a link, or the styling, or appearance, of the tag.
Properties are *also looks up* characteristics for styling. They only come in <TAG style="Right here;"> and there are a bucketload of them. Some examples would be color, background-color, border, padding, and padding-left/right/top/bottom.
*The proper terminology for here is probably element. Divs are elements, <div>s are tags.
Code
Result
<div style="color:black;background-color:white;border:1px solid;padding:5px;padding-left:20px;">
TEXT TEXT CONTENT TEXT TEXT TEXT MORE TEXT I DUNNO WHY I DON'T JUST USE THE LOREM IPSUM THING OR WHY IT'S ALL CAPS BUT IT IS TEXT CONTENT TEXT YES WORDS ENGLISH YAY LETTERS TEXT CONTENT
</div>
TEXT TEXT CONTENT TEXT TEXT TEXT MORE TEXT I DUNNO WHY I DON'T JUST USE THE LOREM IPSUM THING OR WHY IT'S ALL CAPS BUT IT IS TEXT CONTENT TEXT YES WORDS ENGLISH YAY LETTERS TEXT CONTENT
Values are the things after properties. While properties say what is going to be specified, like the color of the letters or the size of the padding, values say that actual specification, like 10 pixels.* The value is the value of the property, saying the background color is black, or the border is 5 pixels thick.
*I'm so articulate.
Code
Result
<div style="color:black;background-color:white;border:1px solid;padding:5px;padding-left:20px;">
TEXT TEXT CONTENT TEXT TEXT TEXT MORE TEXT I DUNNO WHY I DON'T JUST USE THE LOREM IPSUM THING OR WHY IT'S ALL CAPS BUT IT IS TEXT CONTENT TEXT YES WORDS ENGLISH YAY LETTERS TEXT CONTENT
</div>
TEXT TEXT CONTENT TEXT TEXT TEXT MORE TEXT I DUNNO WHY I DON'T JUST USE THE LOREM IPSUM THING OR WHY IT'S ALL CAPS BUT IT IS TEXT CONTENT TEXT YES WORDS ENGLISH YAY LETTERS TEXT CONTENT
Please excuse the ugliness of this table. While you can do many things with HTML, there are other things you need to know CSS to do, like prettify that table. And, unfortunately, you can't edit Sverige's CSS in any way.
There are two attributes that really matter right now: align and style. Minor information on other ones will be in the Misc. Other HTML section.
The align attribute says how the content is aligned horizontally. There are four values* for it: right, left, center and justify.
*IDK if that's the right terminology for this situation, but IDC either.
Code
Result
<div align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, volutpat sit amet nunc ut, eleifend vehicula lacus.
Integer scelerisque massa maximus, iaculis libero nec, molestie mi. Proin tincidunt dictum turpis, ut pellentesque est rutrum sit amet. Fusce et vestibulum dui. Sed feugiat id odio a suscipit.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, volutpat sit amet nunc ut, eleifend vehicula lacus.
Integer scelerisque massa maximus, iaculis libero nec, molestie mi. Proin tincidunt dictum turpis, ut pellentesque est rutrum sit amet. Fusce et vestibulum dui. Sed feugiat id odio a suscipit.
<div align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, volutpat sit amet nunc ut, eleifend vehicula lacus. Quisque commodo metus diam, vitae finibus libero aliquet id. Integer scelerisque massa maximus, iaculis libero nec, molestie mi. Proin tincidunt dictum turpis, ut pellentesque est rutrum sit amet. Fusce et vestibulum dui. Sed feugiat id odio a suscipit.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, volutpat sit amet nunc ut, eleifend vehicula lacus. Quisque commodo metus diam, vitae finibus libero aliquet id. Integer scelerisque massa maximus, iaculis libero nec, molestie mi. Proin tincidunt dictum turpis, ut pellentesque est rutrum sit amet. Fusce et vestibulum dui. Sed feugiat id odio a suscipit.
<div align="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, volutpat sit amet nunc ut, eleifend vehicula lacus. Quisque commodo metus diam, vitae finibus libero aliquet id. Integer scelerisque massa maximus, iaculis libero nec, molestie mi. Proin tincidunt dictum turpis, ut pellentesque est rutrum sit amet. Fusce et vestibulum dui. Sed feugiat id odio a suscipit.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, volutpat sit amet nunc ut, eleifend vehicula lacus. Quisque commodo metus diam, vitae finibus libero aliquet id. Integer scelerisque massa maximus, iaculis libero nec, molestie mi. Proin tincidunt dictum turpis, ut pellentesque est rutrum sit amet. Fusce et vestibulum dui. Sed feugiat id odio a suscipit.
<div align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, volutpat sit amet nunc ut, eleifend vehicula lacus. Quisque commodo metus diam, vitae finibus libero aliquet id. Integer scelerisque massa maximus, iaculis libero nec, molestie mi. Proin tincidunt dictum turpis, ut pellentesque est rutrum sit amet. Fusce et vestibulum dui. Sed feugiat id odio a suscipit.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, volutpat sit amet nunc ut, eleifend vehicula lacus. Quisque commodo metus diam, vitae finibus libero aliquet id. Integer scelerisque massa maximus, iaculis libero nec, molestie mi. Proin tincidunt dictum turpis, ut pellentesque est rutrum sit amet. Fusce et vestibulum dui. Sed feugiat id odio a suscipit.
The proper formatting is pretty simple: <TAG align="ALIGNMENT">. You need the align attribute one space after the tag name (or the end of some other attribute (<div style="padding:10px;" align="center">), it doesn't matter), then = and the alignment surrounded in quotation marks. Don't forget the quotation marks! It is align="justify", not align=justify.
That's it. It's also worth mentioning that align aligns the content of the div or table or whatever it is, not the actual div/table/etc. So align="center" will not make your table be centered, just the content. You want the table to be within another <div align="center"> For clarification:
Code
Result
<div align="center" style="width:200px;background-color:white;">
CONTENT
</div>
CONTENT
<div align="center"><div style="width:200px;background-color:white;">
CONTENT
</div></div>
CONTENT
The top example has only one div, whose align is set to center. The content is therefore centered, but the div, with a white background, is not. The bottom example, however, has the white background div set inside another div, whose only purpose is to center its content, which is the white div.
The Style Attribute
The style attribute, its properties and its values will be the main topic of this very long tutorial. Style is what makes tables so stylish and fancy. It is what gives you background images and borders and scrolling sections and just about everything else you need.
The format is an important thing that I haven't really explained yet. In your div tag, you want to insert style="", separated by a space from the other stuff, so you don't have <divstyle=""> or <div align="justify"style="">, but <div style=""> or <div align="justify" style="">. Then, inside the quotations, you put in the properties and values, and they must be formatted like so: style="property:value;", to have the grand result of <div style="property:value;">. If you do not use the colon or semicolon correctly, it won't work. Always end your property:value things* with a semicolon (;).
*As you can see, my HTML vocabulary is extensive.
Colors
There are multiple formats for colors in the webiverse. The first is names. They are simple enough, and there are many of them. If you are too lazy to type in the hex or rgba for red or white, for example, you can simply type red or white, respectively. This is a list of all the names you can reliably use. There are a lot of them, and make sure not to insert spaces in multi-worded colors.
That list also has the hex values for each of those names. Hex colors are very commonly used, and have a wide range. I find colors and their associated hex codes from here. Remember all hex codes begin with the number sign, #. Then proceeds a six-digit group of letters and numbers.
And then there is RGB, standing for red, green, blue. Each one has a value of 0 to 255. Black is 0,0,0, while white is 255,255,255. You can pick your RGB colors here and also get the hex for them, if you're interested. You could also input hex into there and get the RGB values. RGB is a bit pickier when inserting it into HTML or codes. You need to specify that it's an RGB value by typing rgb, and then, in parenthesis, the RGB values, so it looks like rgb(255,203,100).
There's also RGBA, standing for red, green, blue alpha, alpha meaning transparency/opacity. Alpha has a value 0 to 1, and if it's used, it's generally a decimal saying how opaque. 50% opaque for white would then be rgba(255,255,255,0.5) and 90% opacity would be rgba(255,255,255,0.9). It can be useful if your text is on an image and you want the text to have a semi-transparent background so it's easier to read.
Onto the Table Making!
So now that I've stuffed you full of HTML jargon and information, it's time to actually start producing tables!*
Let's start with a bland <div> CONTENT </div> "table" that is invisible, and then add a background. That way, you can actually see the shape of your div. So type up the style attribute, and in it, add the property background-color, which is the background color, and set the value of that to white**. You'll have:
*This is a lie; actual, pretty tables will be made in part two.
**You can also set it to a hex code, which, for white, is #ffffff, or even an rgb value, which would be rgb(255,255,255).
Code
Result
<div style="background-color:white;">
Content
</div>
Content
It's glorious. However, it most tables have a set width, so add in the width property before or after the background color. The width of your table is up to you; if you have a background image, it should probably be the width of that image, but if not, around 600 to 500 pixels is good. For a 600 pixel wide table, the value for width would be 600px, meaning 600 pixels (px).
The examples will be much smaller so they actually fit.
Code
Result
<div style="background-color:white;width:300px;">
Content
</div>
Content
Centering the Table:
Most tables are also centered, so you can add another div, outside of your original table, which makes the alignment centered.
Code
Result
<div align="center"><div style="background-color:white;width:300px;">
Content
</div></div>
Content
Aligning the Text:
While the table is now centered, the text inside is too. You may want to keep it, but if you don't, set the align of the table, the second div, to right, left, or justify.
Code
Result
<div align="center"><div style="background-color:white;width:300px;" align="justify">
Content
</div></div>
Content
Padding:
Tadaa! And now you notice the content is very close to the div edges, and it's not overly attractive. That is fixed by the padding property, which says how much empty space is between the edges of the div (or table or whatever tag it's being applied to) and the content. So set the padding to 5px, 10px, or whatever you goshdarned please.
Code
Result
<div align="center"><div style="background-color:white;width:300px;padding:5px;" align="justify">
Content
</div></div>
Content
In some circumstances, you may not want padding on your outermost div, but, in general, you'll always want it where there's text.
Borders:
I'm not one to use borders much, but if you want, borders are the lines on the outside of the div. They can be whatever width and color you please, and even can be styled to be dotted or dashed.
All the border fanciness, like color and width and style, are all covered under one property: the border property. You can then have multiple values, like: border: 1px gray solid;. You can also put spaces between them, in case you didn't notice.* Actually, I don't know if they work without the spaces, so it's best to put them in, just in case.
The border color is pretty simple, just insert your color in your preferred format (name, hex, RGB). The width is similarly simple, and you can just use pixels for it. You could also use percentages or other units of measurement, but most people just use pixels and so I'm not going to tell you about all that other fanciness.
As for border styles, that's something that requires examples. There are dotted, dashed, and solid borders.
*You can actually put spaces in between all of the property: value things, so you have padding: 5px; but I'm not in the habit of doing that.
Code
Result
<div align="center"><div style="background-color:white;width:300px;padding:5px;border: 2px black solid;" align="justify">
Solid border
</div></div>
Solid border
<div align="center"><div style="background-color:white;width:300px;padding:5px;border: 2px black dotted;" align="justify">
Dotted border
</div></div>
Dotted border
<div align="center"><div style="background-color:white;width:300px;padding:5px;border: 2px black dashed;" align="justify">
Dashed border
</div></div>
Dashed border
All those borders are 2 pixels thick, to be easier to see.
There's also other fancy stuff that may or may not be CSS only, go check out this lovely reference page if you're curious and mess around.
Text Styling
Most tables, at the very least, have the text a different color than posts without any tables. MyCode has that down, but I'm going to tell you how to slip it into your table anyway. And if you feel like being fancy, I'll talk about different fonts and sizes too.
The color of text is covered by the color property. It's pretty simple. Just do color:Color value;
Code
Result
<div align="center"><div style="background-color:white;width:300px;padding:5px;border: 2px black solid;color:black;" align="justify">
Black text
</div></div>
Black text
<div align="center"><div style="background-color:white;width:300px;padding:5px;border: 2px black solid;color:blue;" align="justify">
Blue text
</div></div>
Blue text
<div align="center"><div style="background-color:white;width:300px;padding:5px;border: 2px black solid;color:red;" align="justify">
Red text
</div></div>
Red text
As for different fonts, you can use the font-family property. Here is a short list of reliable fonts you can use, reliable meaning it works everywhere. It's a bit confusing, but I'm sure you're smart enough to figure it out, and I'm also lazy and am not going to find an even clearer list. Be sure to insert spaces when need be, so it's Times New Roman, not TimesNewRoman. Fonts with multiple words must also be surrounded in apostrophes, so 'Times New Roman' not "Times New Roman".
Code
Result
<div align="center"><div style="background-color:white;width:300px;padding:5px;border: 2px black solid;color:black;font-family:Courier;" align="justify">
Courier
</div></div>
Courier
<div align="center"><div style="background-color:white;width:300px;padding:5px;border: 2px black solid;color:black;font-family:'Times New Roman';" align="justify">
Times New Roman
</div></div>
Times New Roman
<div align="center"><div style="background-color:white;width:300px;padding:5px;border: 2px black solid;color:black;font-family:Verdana;" align="justify">
Verdana
</div></div>
Verdana
Then there are the text sizes. This is covered by font-size, which can be: xx-small, x-small, small, medium, large, x-large, and xx-large. It can also be a value in pixels. I believe Sverige's post text is set to be 12 pixels.
Code
Result
<div align="center"><div style="background-color:white;width:300px;padding:5px;border: 2px black solid;color:black;font-size:x-small;" align="justify">
X-small
</div></div>
X-small
<div align="center"><div style="background-color:white;width:300px;padding:5px;border: 2px black solid;color:black;font-size:medium;" align="justify">
Medium
</div></div>
Medium
<div align="center"><div style="background-color:white;width:300px;padding:5px;border: 2px black solid;color:black;font-size:18px;" align="justify">
18 pixels
</div></div>
18 pixels
There are also, for titles such as your character's name, headers of varying sizes, but go here to learn about them; I'm not going to cover them.
Fancier Tables
So those are the basics for tables. With the information I have given you, you can make tables of color and different fonts and text sizes. You can even have multiple divs put within each other to create something like this table I once made*.
HOWEVER, tables look much prettier with images, so you'll learn about implementing them.
You're also going to learn about scrolling tables here.
*I'll tell you how to do rounded corners later on.
Images
So, images. They sure are pretty, and useful too. There are two ways to insert images. One is with the img tag, and the other is with the background-image property.
The Img Tag:
This has a different format than most tags. It's self-closing, so it looks like <img src="URL" />, not <img src="URL"></img>. Note the /> at the end of the correct tag. For example:
Code
Result
<img src="http://i1144.photobucket.com/albums/o485/meixiaotian/Tables%20Pics/Silence-Frost2.jpg" />
The Background-Image Property:
This is most applicable when the image is actually going to be a the background of the post, but it works fine otherwise. The value for this must be url('URL'). Note the apostrophes around the url. Using this makes it a bit harder for an observer to find the url of the image, but if they were determined, they could still find it. It also takes a bit of finagling if you're going to use it just as an image, not as the actual background for the post, because you need to set the height property and width property to the height and width of the image, in pixels. (That is italicized in the example instead of bolded.)
Code
Result
<div style="background-image:url('http://i1144.photobucket.com/albums/o485/meixiaotian/Tables%20Pics/Silence-Frost2.jpg');width:448px;height:343px;"></div>
If you don't define it to be that way, the image will only show up when there's content on it. That can be useful when it's just a pattern or something. For example:
Code
Result
<div style="background-image:url('http://i58.tinypic.com/15i9bp5.png');">
CONTENT CONTENT
CONTENT MORE CONTENT
YAY
</div>
CONTENT CONTENT
CONTENT MORE CONTENT
YAY
As the background isn't anything interesting, you're not missing out when you don't see all of it, and can only see the part with content on it.
If you have more than enough content to fill the image, so the text takes up more space than the background image, the background image will repeat to fill up enough space. It works fine when it's a tileable image, like a pattern, (such as the background image of Sverige,) but sometimes it's not attractive. You can also define the height or width to be as high or wide as the image, so it doesn't tile that way. For example, if you have an image 500px wide and you have it be the background image of a 500px wide div, the image won't repeat horizontally, only vertically, up and down.
Code
Result
<div style="background-image:url('http://sverige.icyboards.net/avatars/sverige/avatar_637.jpeg?dateline=1424060583');">
CONTENT CONTENT
CONTENT
YAY
EVEN MORE AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
</div>
CONTENT CONTENT
CONTENT
YAY
EVEN MORE AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
<div style="background-image:url('http://sverige.icyboards.net/avatars/sverige/avatar_637.jpeg?dateline=1424060583');width:150px;">
CONTENT CONTENT
CONTENT
YAY
EVEN MORE AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
</div>
CONTENT CONTENT
CONTENT
YAY
EVEN MORE AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
<div style="background-image:url('http://sverige.icyboards.net/avatars/sverige/avatar_637.jpeg?dateline=1424060583');width:150px;height:150px;">
CONTENT CONTENT
CONTENT
YAY
EVEN MORE AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
</div>
CONTENT CONTENT
CONTENT
YAY
EVEN MORE AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
So in the three examples above, not only do you get to see Peryas's avatar more than you ever need to again, you can also see the different ways images can repeat when they're used as the background image of a div and aren't large enough.
The first example has absolutely no restrictions on the size of the table, and so the background image repeats to be as wide as possible and as tall as its content (which is normal behavior for a div's background, image or not). It also happens if the background image isn't large enough to fit the defined width and/or height of the table. This situation works well when the background is a tileable pattern or image.
The second example has the table have a set width, which is exactly the width of the background image. It therefore repeats only downwards. I've seen this work well when the background is only one pixel high and the table the exact width of the background, so the repeating background isn't jarring. I'll show how to do this in part two.
The third example gives the table a set width and height, both of which are the same as the background image. There is no repeating image, which is good for drawings or photo manipulations that aren't meant to repeat. However, you notice that the text goes past the background image, which can't continue downwards. That is where scrolling comes in!
Scrolling Divs
Scrolling stuff is fun! It's for when you have a set width and height of your div containing the post, but your post might be larger than that set area, and to keep it inside, you add a scrolling bar.
The property controlling this is overflow. You can set it to multiple things, but the best one, the one that I'm going to tell you to use, is auto. You can also set it to scroll, but it puts a scrolling bar there whether it's needed or not, which can look really ugly on older computers that don't automatically make scroll bars invisible. So you want overflow:auto;.
Code
Result
<div style="background-image:url('http://sverige.icyboards.net/avatars/sverige/avatar_637.jpeg?dateline=1424060583');width:150px;height:150px;overflow:auto;">
CONTENT
CONTENT
YAY
EVEN MORE
AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
</div>
CONTENT
CONTENT
YAY
EVEN MORE
AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
Yay! Now it's all neatly contained, and if you had an image that was actually supposed to have text on top of it, unlike that avatar, it would look nice.
But, in case you didn't notice, the text is hard to read on top of that image. You could edit the text color, or you could put the text in another div, not the one with the background image, and have the text div be scrolly and have a semi-transparent background.
Semi-Transparent Backgrounds on Images
So in the colors section waay up high, I talked about RGBA. Go read that if you don't remember it.
Okay, this is a pretty simple thing. First, we're going to get a div with the same dimensions as its background image. Then, we'll have a second div, inside of it, with the same dimensions.
Code
Result
<div style="background-image:url('http://sverige.icyboards.net/avatars/sverige/avatar_637.jpeg?dateline=1424060583');width:150px;height:150px;"><div style="width:150px;height:150px;">
CONTENT CONTENT
CONTENT
YAY
EVEN MORE AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
</div></div>
CONTENT CONTENT
CONTENT
YAY
EVEN MORE AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
Next, we're going to insert the overflow:auto into the second div, and then turn the text color to something dark.
Code
Result
<div style="background-image:url('http://sverige.icyboards.net/avatars/sverige/avatar_637.jpeg?dateline=1424060583');width:150px;height:150px;"><div style="width:150px;height:150px;overflow:auto;color:black;">
CONTENT CONTENT
CONTENT
YAY
EVEN MORE AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
</div></div>
CONTENT CONTENT
CONTENT
YAY
EVEN MORE AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
And then let's add a semi-transparent background color to the second div, like, say, rgba(255,255,255,0.5), which is white 50% transparent.
Code
Result
<div style="background-image:url('http://sverige.icyboards.net/avatars/sverige/avatar_637.jpeg?dateline=1424060583');width:150px;height:150px;"><div style="background-color:rgba(255,255,255,0.5);width:150px;height:150px;overflow:auto;color:black;">
CONTENT CONTENT
CONTENT
YAY
EVEN MORE AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
</div></div>
CONTENT CONTENT
CONTENT
YAY
EVEN MORE AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
So there, it's more readable. To make it more impressive, shrink the second div a little bit by adding 5 pixel padding to the outer div and subtract 10 pixels from each div's dimensions (150px-10px=140px), turning all of the 150px to 140px to make up for the padding, which is 5 pixels top and 5 pixels bottom, and 5 pixels left and 5 pixels right. I can't say I understand why it has to be this way, but sometimes you just have to mess with the code without understanding why your solution works.
Code
Result
<div style="background-image:url('http://sverige.icyboards.net/avatars/sverige/avatar_637.jpeg?dateline=1424060583');width:140px;height:140px;padding:5px;">
<div style="rgba(255,255,255,0.5);width:140px;height:140px;overflow:auto;color:black;">
CONTENT CONTENT
CONTENT
YAY
EVEN MORE AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
</div></div>
CONTENT CONTENT
CONTENT
YAY
EVEN MORE AND MORE
BEEP
I WAS LAZY
AND COULDN'T
THINK OF ANY
TINY IMAGES
SO
Tadaa! Now it looks even cooler! Please make sure to have high contrast between the text and the background, or else it may hard or even impossible to read without highlighting. Feel free to mess around more with the transparency, positioning, and other somesuch of your text.
Margins
Margins are the space between one object/element and the ones around it. For example, if an image had a left margin of 50 pixels, it would position itself to be 50 pixels away from whatever is on its left, such as another image, or maybe the edge of its container.
I suppose I should introduce the famous box model* now. The margin is the empty space around the object, the border is the edge of the object, the padding is the empty space inside the object, and the content is the actual stuff inside the object.
*Ignore all the CSS jibber-jabber, the image and the paragraph directly beneath it are all relevant to HTML.
Code
Result
<div style="background-color:white;width:200px;height:200px;padding:5px;margin:20px;">
CONTENT
</div>
CONTENT
In the example above, the 200px by 200px div has a margin of 20 pixels, so it looks like the table box it's inside has large padding, even though it doesn't. You can also become more specific with the properties: margin-top, margin-bottom, margin-left and margin-right, which control the margins of the object's top, bottom, left, and right, respectively.
You can use margins to position objects, for example, indenting an image 50 pixels to the right. A really cool feature about margins, though, is that the value can be negative, so you could have margin-top:-20px;, meaning it goes up, past its boundaries by 20 pixels.
Code
Result
<div style="background-color:white;width:200px;height:200px;padding:5px;margin-top:-20px;">
-20 pixel top margin
</div>
-20 pixel top margin
<div style="background-color:blue;width:200px;height:200px;padding:5px;margin-left:-20px;">
-20 pixel left margin
</div>
-20 pixel left margin
<div style="background-color:red;width:200px;height:200px;padding:5px;margin-bottom:-20px;">
-20 pixel bottom margin
</div>
-20 pixel bottom margin
<div style="background-color:green;width:200px;height:200px;padding:5px;margin-right:-20px;">
-20 pixel right margin
</div>
-20 pixel right margin
Pretty cool, right? You can use this to make different divs or images overlap each other, like in this table I made in my art shop. The image and table overlap there.
You notice the bottom, -20px right margin doesn't move. That may be because it automatically doesn't touch anything on its right. Instead, you need to give it a 20px left margin. Again, sometimes you need to mess with the code to make it work right.
Rounded Corners
Earlier, I showed you this lovely table, and as you can see, there are a lot of rounded corners there. You could get that effect with an image, or you could use the border-radius property.
This thread, not on Sverige, has two posting tables that both make use of the border-radius property, and the second one has a div made into a circle with the border-radius property. I showed them to you because they use this property, but mainly because they're beautiful and I think more people should admire them. (Don't steal them, though.)
So, border-radius's values are measurements, like pixels. I mainly use pixels. You can also define a div's individual corners' border-radiuses, with border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. It's a lot, I know, try to remember border-top/bottom-left/right-radius, although I can't say that's too easy to remember either.
Code
Result
<div style="background-color:white;width:200px;height:200px;padding:5px;border-radius:20px;">
20 pixel border radius
</div>
20 pixel border radius
<div style="background-color:white;width:200px;height:200px;padding:5px;border-top-left-radius:20px;">
20 pixel top left border radius
</div>
20 pixel top left border radius
<div style="background-color:white;width:200px;height:200px;padding:5px;border-top-right-radius:20px;">
20 pixel top right border radius
</div>
20 pixel top right border radius
<div style="background-color:white;width:200px;height:200px;padding:5px;border-bottom-right-radius:20px;">
20 pixel bottom right border radius
</div>
20 pixel bottom right border radius
<div style="background-color:white;width:200px;height:200px;padding:5px;border-bottom-left-radius:20px;">
20 pixel bottom left border radius
</div>
20 pixel bottom left border radius
If you wanted to make a circle, set the border-radius to 50%. It works for all sizes of divs that are normally squares.
Code
Result
<div style="background-color:white;width:200px;height:200px;padding:5px;border-radius:50%;">
Circle!
</div>
Circle!
You can also note that the content is outside of the circle. Although there's nothing you can do about forcing the text to mind the background circle, you can at least center it vertically and horizontally by putting the content in an invisible table (okay, maybe I know a little bit about how the table tag works). Since this is not a tutorial on how to use that tag, just know that this single-box table consists of <table><tr><td> </td></tr></table>. That's a lot of stuff, I know. The content goes inside that space.
Anyway, tables automatically vertically center their content, but not horizontally, so you'll have to set the td's alignment to center and to make sure there are no borders, although this isn't a problem on Sverige, but it may be on other sites, set the border of the td to 0 pixels. And then, to make sure your table fills up all the space it can inside your circle, set the width and height to 100%, so it'll take up as much space as it can. It would then look like:
Code
Result
<div style="background-color:white;width:200px;height:200px;padding:5px;border-radius:50%;">
<table style="width:100%;height:100%;"><tr><td align="center" style="border:0px;">
Content
Content Content
Well, it could be sorta
circular, but
not really
</td></tr></table>
</div>
Content
Content Content
Well, it could be sorta
circular, but
not really
Max-Width and Max-Height Properties
I should've probably put this up earlier, but I forgot it existed until I made it to this point in the tutorial.
There are two properties called max-width and max-height. They allow the height and width of your div to grow until they reach that limit. This is most applicable for scrolling tables that have a pattern background, or something that looks fine if you don't have all of it. Whenever you use them, or at least max-height, you should probably have overflow:auto too, or else it'll spill over the background, even if it's ended, and it'll look ugly and silly.
Code
Result
<div style="padding:5px;background-image:url('http://i58.tinypic.com/15i9bp5.png');max-height:200px;max-width:700px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus bibendum consequat erat id suscipit. Pellentesque ac fermentum nisl, nec aliquam massa.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus bibendum consequat erat id suscipit. Pellentesque ac fermentum nisl, nec aliquam massa.
<div style="padding:5px;background-image:url('http://i58.tinypic.com/15i9bp5.png');max-height:200px;max-width:700px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum consequat erat id suscipit. Pellentesque ac fermentum nisl, nec aliquam massa.
Integer neque nibh, interdum sed imperdiet ut, cursus et lorem. Maecenas vitae finibus velit. Cras sit amet enim enim. Aenean urna nibh, maximus ut venenatis in, faucibus quis quam.
Mauris bibendum, nisi eu consequat accumsan, eros quam feugiat neque, quis sollicitudin orci tellus vitae ante.
Donec lacus nulla, volutpat et iaculis eget, viverra vitae erat. Ut eget luctus nisi, non tincidunt leo. Curabitur luctus odio non turpis placerat iaculis.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum consequat erat id suscipit. Pellentesque ac fermentum nisl, nec aliquam massa.
Integer neque nibh, interdum sed imperdiet ut, cursus et lorem. Maecenas vitae finibus velit. Cras sit amet enim enim. Aenean urna nibh, maximus ut venenatis in, faucibus quis quam.
Mauris bibendum, nisi eu consequat accumsan, eros quam feugiat neque, quis sollicitudin orci tellus vitae ante.
Donec lacus nulla, volutpat et iaculis eget, viverra vitae erat. Ut eget luctus nisi, non tincidunt leo. Curabitur luctus odio non turpis placerat iaculis.
You can see the difference between a lot of content and a little.
Other Misc. HTML Stuff
Okay, before I go into the second part, which yammers about making many of the types of tables I've seen, I am going to give you some random HTML information you may or may not care about.
Let's start with the horizontal line! You can see an example riiight above the title of this lovely section. It's simple: <hr>. No need to close it either, but you can and have <hr/>.
Code
Result
<hr>
Then there's the ability to use different fonts than the standard ones! I have a very specific formula on how to do this. Go to Google Fonts and find a font you like. Click the quick-use (-> button) and copy the html in step three. It will look like: <link href='http://fonts.googleapis.com/css?family=Font+Name' rel='stylesheet' type='text/css'>. You'll only need to insert this once into every page. Then you have the font! Use the font-family property to use the font. Remember to enter the spaces and put the apostrophes around them if the font name has spaces.
Code
<th style="border:1px solid;