Simple tables are pretty popular right now so I thought I'd post a quick tutorial on how to make them. I would appreciate it if you took the time to actually read the tutorial and create your own tables rather than just copying and pasting the completed code! This code could also be a starting base for more complex coding, it's always best to start with a clean code and build up, additionally you learn more this way.


This is the layout of the table. This part of the code determines the basic look and feel of the table. As this is a simple table there is no fancy edges, no crazy shapes and everything is straight forward.

width: 400px - The width is how wide you want your table to be. I usually try to keep mine between 350 - 600. These sizes seem to work best within Helovia and help keep the site look tidy and well kept.

background-color: #ffffff - This determines the colour of your table. I always prefer to pick my colours in Photoshop with the eye dropped tool but if that option is not available for you then there are many great colour resources on the web.
(One I use when too lazy to open photoshop is : Link.)

padding: 5px 5px 5px 5px - The padding determines how much space you want between your text and the table borders. The order for the padding goes Top, Right, Bottom, Left.
Example: if you want more room at the top of your table you would edit the first '5px' to a larger number like '45px'.


This will be your character's name. Most tables have large fancy text of their character's name but keeping in with the simple theme, this code has no such things.

font-family: times; | text-align: left; | font-size: 11pt; | color: #000000; - All relate to the text itself, it determines the styling of the text.
There are many different font options, they are all available with example on the web.
For the text alignment you can choose left, right, center or justify.
I usually try to pick a text size that is only slightly larger than the text in the body of the table. This way it stands out without overwhelming the rest of the simple table.
Again any colour is available for you to choose, pick something that compliments the table instead of overtaking it.

margin-left: 40px; margin-right: 40px; - This will effect the position of your text. If you want it in a different position from the main text body, this alignment will assist you in achieving this effect.


The code for the main text body. I won't explain the alignment, family, size and colour again. Any questions refer to above.

letter-spacing: 1px - The spacing between each letter.

word-spacing: 2px; - The spacing between words.

line-height: 9pt - The space between each new line.


This goes at the end of your code, it 'closes' your table. This is essential to have, do not forget it.

In the end you should have something resembling this:

Name

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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Add images, more text, quotes and more!
Post your creations below! I'd love to see them, any questions ask away.