.svg/2000px-Google_Chrome_icon_(2011).svg.png){kind=icon}
So I figured I could just as well share my most basic table code! You'll have to go to someone else for name/quote styling though ;)
What we want is a functional table, something like this:
All you need is this code!
A description of what the different style elements do:
and that was all you needed to make a table in quick'n'dirty neo code!
Now, onto what I call "broken tables", or just tables where you've closed too many or too few tags.
A tag is basically what goes between the < and the >, for example it can be table or div (tables are becoming sort of obsolete, I recommend using divs!).
What a "broken table" looks like:
Anyway! You might be familiar with seeing the text show up beneath the posting area like that. It's because you've closed one div too many.
Alternatively, it can look like this:
In which case you haven't closed enough tags.
So to give you an idea of tag balance:
This, then, are two examples of tag imbalance.
So how do you know how many tags to close? Count/look. Look at your code, with just some dummy word to indicate the posting space, and see that you close as many divs as you opened, vice versa, or if you use tables, same thing.
Also, I like getting the most effect with the fewest words written. Compact your code as much as you can, take out useless/contradictory stuff, use divs (!!! :D), etc. C: The smaller the piece of code, the easier to get an overview of your tags.
So basically: check/count. Make the structure visible (even if you compact the code later on again because it treats line breaks between code tags really weirdly xD) so you can get an easy overview of how many tags you've got goin'.
Finally, this is the correct structure of a single-row, single-cell table:
Then of course you can do things like double columns:
Etc. But again, divs are superior!
And finally, that note about 750px wide tables. While yeah, theoretically the writing space is 750px wide, in reality, it isn't, because the posting box has some padding. A posting table being the full width of 750px is going to stretch the board, even if it's just marginally. 740px instead usually does the trick. :)
What we want is a functional table, something like this:
And just as he plunged into the playful light, she followed him, just as their bodies followed one another in the dance. Lead, pursue, guide and chase—she drew away from his head and the click of teeth, repeating that she was no lady. His crooked grin grew lopsided. Perhaps she was right. Did fair, noble ladies know how to play with thugslords in the dark, icy caves? Did they know how to urge the body into a frenzy with gentle touches? Maybe, maybe not, and her chuckle was high, feminine even, and for a moment he felt like stopping where he was and gawking at her. Psyche, giggling? The world was growing madder and madder, but that was yesterday's news and he pushed his nose against her hip. Warm air rushed against her black skin, and then he inhaled, drawing in her scent deep into his lungs, into his mind. Strangely enough she didn't draw away, and he remained where he was, breathing against the crook of her flank.
"Well then, Queen Sir Barbarian," he said lightly, and aimed a mischievous nip for her thigh. "I suppose that makes me the Lord Barbarian.. a very spotty one, too." With a grin he moved, the flat of his shoulder against her warm flank, his blue eyes peering out from under his white forelock towards hers. Azzuen had once joked that said spots might be contagious. Snorting softly, Mauja let the memory fall back down into his mind, and reached out to stroke her shoulder much too lightly. "I would've thought a barbarian wouldn't look quite so well groomed, Sir..." His voice had dropped a notch, fading to an almost throaty murmur, and his blue gaze absently trailed the planes of her face as his maw hovered just beyond her shoulder.
"Well then, Queen Sir Barbarian," he said lightly, and aimed a mischievous nip for her thigh. "I suppose that makes me the Lord Barbarian.. a very spotty one, too." With a grin he moved, the flat of his shoulder against her warm flank, his blue eyes peering out from under his white forelock towards hers. Azzuen had once joked that said spots might be contagious. Snorting softly, Mauja let the memory fall back down into his mind, and reached out to stroke her shoulder much too lightly. "I would've thought a barbarian wouldn't look quite so well groomed, Sir..." His voice had dropped a notch, fading to an almost throaty murmur, and his blue gaze absently trailed the planes of her face as his maw hovered just beyond her shoulder.
— Mauja 19th April 2013, heart AND downfall
All you need is this code!
Code:
<div style="width: 719px; margin: 0 auto; box-sizing: border-box; background: url('http://julle.cc/images/Helovia/mausunset_top.jpg') top center no-repeat #0F1C2C; padding: 680px 90px 10px 90px; color: #415063; font-family: georgia; font-size: 12px; text-align: justify;">
text 'n shit here!
</div>A description of what the different style elements do:
- width: the width (in pixels) of the table. good idea to match this to the image width
- margin: I recommend letting this be set to 0 auto. margin is the distance/space on the sides of the table; 0 offset in the space above/beneath, and auto for left/right, centering the table in the posting space
- box-sizing: keep this as it is. border-box defines it to not exceed its set width, meaning even if you add a shitton of padding you won't have a table wider than (in this case) 719 pixels!
- background: this one is broken into several elements. in the url space, put the url to the image. "top center" is the location of the url background; if you have a table with the picture at the bottom, just change this to "bottom center". no-repeat defines that the url background should not repeat. finally, the hex code is the background color of the table.
- padding: this is the distance from the edges of the table to the text. it goes top, right, bottom, left. as this is a top-image table, it has a lot of padding for the top, to put the text where I want it beneath my image. left/right I normally have the same value, depending on the table width it ranges from ~40px to up to 120 if I feel like it. you can also play with asymmetry if you want, as I've done on a few of mine. bottom padding I find that 10-20 pixels look good, but it's personal taste!
- color: the font color.
- font-family: the font family. for posting tables, I recommend using regular ones like verdana, times, georgia, arial, etc.
- font-size: the font size, can be either px or pt. for posting tables, I recommend nothing smaller than 10pt or 12px. I love readability when I thread with people <3
- text-align: if you want the text centered, justify, aligned left or right.. I prefer justify for post text. nice and easy on the eyes.
and that was all you needed to make a table in quick'n'dirty neo code!
Now, onto what I call "broken tables", or just tables where you've closed too many or too few tags.
A tag is basically what goes between the < and the >, for example it can be table or div (tables are becoming sort of obsolete, I recommend using divs!).
What a "broken table" looks like:
Anyway! You might be familiar with seeing the text show up beneath the posting area like that. It's because you've closed one div too many.
Alternatively, it can look like this:
In which case you haven't closed enough tags.
So to give you an idea of tag balance:
Code:
<div id="first">
<div id="second">
</div>
</div>This, then, are two examples of tag imbalance.
Code:
<div id="first">
</div>
</div>Code:
<div id="first">
<div id="second">
</div>So how do you know how many tags to close? Count/look. Look at your code, with just some dummy word to indicate the posting space, and see that you close as many divs as you opened, vice versa, or if you use tables, same thing.
Also, I like getting the most effect with the fewest words written. Compact your code as much as you can, take out useless/contradictory stuff, use divs (!!! :D), etc. C: The smaller the piece of code, the easier to get an overview of your tags.
So basically: check/count. Make the structure visible (even if you compact the code later on again because it treats line breaks between code tags really weirdly xD) so you can get an easy overview of how many tags you've got goin'.
Finally, this is the correct structure of a single-row, single-cell table:
Code:
<table>
<tr>
<td>
</td>
</tr>
</table>Then of course you can do things like double columns:
Code:
<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>Etc. But again, divs are superior!
And finally, that note about 750px wide tables. While yeah, theoretically the writing space is 750px wide, in reality, it isn't, because the posting box has some padding. A posting table being the full width of 750px is going to stretch the board, even if it's just marginally. 740px instead usually does the trick. :)
