The Lounge > Forum & Website

BB Code Table Guide [Creating a proper thread]

(1/5) > >>

Skaen:


• BB Code Table Guide •

* * *
Link to my Thread Workshop - Skaenn's Thread Workshop.
Table of Contents(Click the titles to go to the subjects)
1     Placing 2 columns next to each other
2     Creating a ranks/member list template
3     Full Regiment Thread Tutorial
Introduction
The BB Code Help thread is a really big help for basic bb code. Thank you Menelaos for your time to make this helpful page.
If you have no clue what BB code's about, I suggest taking a look at this page first before you get yourself into creating
tables. It's a very helpful thread for those who have never used it before. I made this thread because it goes more
deep into making tables and how to get stuff placed how you want it. This comes from a guy who was always amazed
by people building these amazing threads and never knew how BB code worked.

I have invested a lot of time into this and now I want to help the people who have want to learn it as well but don't
know how it works. I'm also making this guide for those who don't use the forums often or never really played around
with BB code. If you are one of those people, then I hope this thread will be useful for you. If you have problems with
a thread, and you just can't get it right, feel free to PM me, or post on this thread so other people that have experience
with tables can help you. Before you start building a thread I recommend you to take a sheet of paper and sketch your
design. This gives you a more clear view on how it is going to look like in the end and may aid you in the process.

Without further due, let's begin.                 

1     Placing 2 columns next to each other
Step 1
Let's start with something simple. Let's say, you want to have 2 columns of text next to each other.
On your sketch it would probably look like this:





To put these two columns next to each other we need to use a table.
If you click on the table icon , the BB code will already simulate a table for you.

Result:


--- Code ---
[table]
[tr]
[td][/td]
[/tr]
[/table]
--- End code ---
Now you can see that it gives you only one row of    [ td ] [ /td ].

[ td ] [ /td ] is actually 1 column. Remember to not put a space between the bracket and "td".
I did it here because otherwise I could not show this.
Step 2
So in this case you will need 2 lines, like this:


--- Code ---
[table]
[tr]
[td][/td]
[td][/td]
[/tr]
[/table]
--- End code ---
Just simply copy paste one line of [ td ] [ /td ] in the code. Now you have 2 columns you can work with.
Step 3
Now we will use the code and actually put text in it.

For example:

--- Code ---
[table]
[tr]
[td]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec orci sit amet massa posuere finibus vitae quis justo.
Pellentesque pretium faucibus justo a eleifend. Vestibulum malesuada accumsan cursus. Phasellus vitae sem non mauris
efficitur pulvinar at a mauris. Sed facilisis lorem nec rhoncus tristique. Donec mattis congue semper. Morbi gravida, quam
vitae vulputate accumsan, sem erat ultrices lacus, sed consequat turpis ipsum non metus. Suspendisse vestibulum nibh sed
odio malesuada fringilla.[/td]

[td]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec orci sit amet massa posuere finibus vitae quis justo.
Pellentesque pretium faucibus justo a eleifend. Vestibulum malesuada accumsan cursus. Phasellus vitae sem non mauris
efficitur pulvinar at a mauris. Sed facilisis lorem nec rhoncus tristique. Donec mattis congue semper. Morbi gravida, quam
vitae vulputate accumsan, sem erat ultrices lacus, sed consequat turpis ipsum non metus. Suspendisse vestibulum nibh sed
odio malesuada fringilla.[/td]
[/tr]
[/table]
--- End code ---

And now, you have two columns of text next to each other.
SpoilerLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec orci sit amet massa posuere finibus vitae quis justo.
Pellentesque pretium faucibus justo a eleifend. Vestibulum malesuada accumsan cursus. Phasellus vitae sem non mauris
efficitur pulvinar at a mauris. Sed facilisis lorem nec rhoncus tristique. Donec mattis congue semper. Morbi gravida, quam
vitae vulputate accumsan, sem erat ultrices lacus, sed consequat turpis ipsum non metus. Suspendisse vestibulum nibh sed
odio malesuada fringilla.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec orci sit amet massa posuere finibus vitae quis justo.
Pellentesque pretium faucibus justo a eleifend. Vestibulum malesuada accumsan cursus. Phasellus vitae sem non mauris
efficitur pulvinar at a mauris. Sed facilisis lorem nec rhoncus tristique. Donec mattis congue semper. Morbi gravida, quam
vitae vulputate accumsan, sem erat ultrices lacus, sed consequat turpis ipsum non metus. Suspendisse vestibulum nibh sed
odio malesuada fringilla.[close]
Step 4
The only problem now is that there is no space inbetween the columns. To put some space between them
simply put an empty [ td ] [ /td ] line inbetween like this:

--- Code ---
[table]
[tr]
[td]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec orci sit amet massa posuere finibus vitae quis justo.
Pellentesque pretium faucibus justo a eleifend. Vestibulum malesuada accumsan cursus. Phasellus vitae sem non mauris
efficitur pulvinar at a mauris. Sed facilisis lorem nec rhoncus tristique. Donec mattis congue semper. Morbi gravida, quam
vitae vulputate accumsan, sem erat ultrices lacus, sed consequat turpis ipsum non metus. Suspendisse vestibulum nibh sed
odio malesuada fringilla.[/td]

[td]                    [/td]

[td]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec orci sit amet massa posuere finibus vitae quis justo.
Pellentesque pretium faucibus justo a eleifend. Vestibulum malesuada accumsan cursus. Phasellus vitae sem non mauris
efficitur pulvinar at a mauris. Sed facilisis lorem nec rhoncus tristique. Donec mattis congue semper. Morbi gravida, quam
vitae vulputate accumsan, sem erat ultrices lacus, sed consequat turpis ipsum non metus. Suspendisse vestibulum nibh sed
odio malesuada fringilla.[/td]
[/tr]
[/table]
--- End code ---

SpoilerLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec orci sit amet massa posuere finibus vitae quis justo.
Pellentesque pretium faucibus justo a eleifend. Vestibulum malesuada accumsan cursus. Phasellus vitae sem non mauris
efficitur pulvinar at a mauris. Sed facilisis lorem nec rhoncus tristique. Donec mattis congue semper. Morbi gravida, quam
vitae vulputate accumsan, sem erat ultrices lacus, sed consequat turpis ipsum non metus. Suspendisse vestibulum nibh sed
odio malesuada fringilla.                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec orci sit amet massa posuere finibus vitae quis justo.
Pellentesque pretium faucibus justo a eleifend. Vestibulum malesuada accumsan cursus. Phasellus vitae sem non mauris
efficitur pulvinar at a mauris. Sed facilisis lorem nec rhoncus tristique. Donec mattis congue semper. Morbi gravida, quam
vitae vulputate accumsan, sem erat ultrices lacus, sed consequat turpis ipsum non metus. Suspendisse vestibulum nibh sed
odio malesuada fringilla.[close]
The more spaces between [ td ] [ /td ] will give more space inbetween the objects/text.
If you want even more space, then you can also shorten the rules of the paragraph by placing multiple enters.

Click to go back to top
2     Creating a ranks/member list template
Ranks/member lists come in all different kind of shapes and sizes. You can choose to put them on the thread vertically next to some text
or you could provide a whole section for it with maybe a picture to the side. The choice is yours.
I will show you a few ways on what I find the most convenient to do.

Variant 1 - Ranks/members list next to columns of textWIP[close]Variant 2 - Section dedicated to ranks/members list with a picture next to itWIP[close]
3     Full Regiment Thread Tutorial
Final result of the tutorial


* * *
ABOUTLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Interested in joining? Add one of the officers on steam, or send a personal message on the forums.

* * *
HISTORY OF THE REGIMENTLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.

    The Peninsular WarLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis eros sed dolor dignissim eleifend. Nulla faucibus vel leo a efficitur.
Sed suscipit tellus sed massa dictum interdum. Ut dictum sapien mi, porttitor tristique lacus eleifend at. In orci dui, consectetur ac maximus nec,
vestibulum sagittis metus. Vestibulum at eros ligula. Mauris posuere finibus vestibulum. In et sollicitudin elit. Integer ut euismod urna. Suspendisse
mattis accumsan leo, sit amet fringilla velit vulputate quis. In tempus libero eget mollis porttitor. Etiam lobortis elit vel rutrum malesuada. Donec
vulputate pellentesque dolor, at pharetra elit aliquam nec.

Ut luctus ultrices risus, ac convallis orci consequat ac. Donec nec placerat nulla, at dictum eros. Etiam quis ex leo. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Mauris maximus rhoncus velit non condimentum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam non turpis sem. Fusce pellentesque volutpat vehicula. Praesent in aliquam quam, vel sodales libero. Suspendisse potenti.

Battle of BorodinoLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis eros sed dolor dignissim eleifend. Nulla faucibus vel leo a efficitur.
Sed suscipit tellus sed massa dictum interdum. Ut dictum sapien mi, porttitor tristique lacus eleifend at. In orci dui, consectetur ac maximus nec,
vestibulum sagittis metus. Vestibulum at eros ligula. Mauris posuere finibus vestibulum. In et sollicitudin elit. Integer ut euismod urna. Suspendisse
mattis accumsan leo, sit amet fringilla velit vulputate quis. In tempus libero eget mollis porttitor. Etiam lobortis elit vel rutrum malesuada. Donec
vulputate pellentesque dolor, at pharetra elit aliquam nec.

Ut luctus ultrices risus, ac convallis orci consequat ac. Donec nec placerat nulla, at dictum eros. Etiam quis ex leo. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Mauris maximus rhoncus velit non condimentum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam non turpis sem. Fusce pellentesque volutpat vehicula. Praesent in aliquam quam, vel sodales libero. Suspendisse potenti.   

* * *
MUSTER ROLL

Commissioned Officers [2]  Colonel Peter Griffin
  Lieutenant Colonel Cleveland Brown                         Non-Commissioned Officers [3]  Serjeant Major Stewie Griffin
  Serjeant Brian Griffin
  Corporal Chris Griffin                         Enlisted [11]  Lance Corporal Joe Swanson

  Grenadier Adam West
  Grenadier Cleveland Brown Jr.

  Private Glenn Quagmire
  Private Tom Tucker
  Private Jonathan Weed
  Private Jake Tucker
  Private Carter Pewterschmidt
  Private Elmer Hartman
  Private Jim Caplan
  Private Neil Goldman
[close]
We are going to make a regiment thread for the 153e Régiment d'Infanterie de Ligne.

In the spoiler above you can see the result of what we are working towards. A very basic, but an organized thread. Like above, I will explain it step by step.

Please, don't just copy-paste blindly without looking. Try to read the codes and practice with them.
I know, it takes a bit of time but once you get the hang of it, you can go to town with any design in your head.

Let's begin.

Step 1
It's very important to have a good header on your thread. A good header will immediately catch the eye. Try to look out for highly detailed pictures.
If they are too big, you can always crop them. If you don't have enough money, or you don't want to spend money for a program to do just this,
you can download paint.NET (Click here - Download page) for free. It's basically a lite version of photoshop.

You can also use paint.NET to remove any backgrounds. What I suggest is taking a soft brush. Put the size on 10 and the hardness on 20 and go around the
edges of the soldiers and/or objects that you want to cut out. The 20% hardness will make sure your edges won't look pixelated. I'm not going in full depth
talking about Graphics Design as this tutorial will only go about the actual layout of this regiment thread.
But, if you want me to make a tutorial on my take on headers, just let me know.

Important note; after each step, you can also click the 'view' option before posting. This way you can see what you are doing.

I have made myself a header which I will use.

Spoiler[close]
You always want to center your headers obviously.  Click in your text editor on the align button that centers your text.
We will also need the image tag .

Your code will look like this:


--- Code ---
[center][img]https://imgyukle.com/f/2021/07/23/Y5fSj.png[/img][/center]
--- End code ---

Step 2
Now, we will put 3 enters under the header. After you have done that we will make a spacer. A spacer can be useful to have some space
between text and objects. Your thread will look less sloppy when you use them right. I have chosen 3 asterisk's as I think it looks a bit authentic

To make the spacer, we will have to center it. After that, choose a font for the asterisk's that you like. I have chosen the font 'Garamond'. I have
gone with font size 18 as the Garamond font is standard a little smaller than some other fonts.
When you have completed step 2, your code will look like this:


--- Code ---
[center][img]https://imgyukle.com/f/2021/07/23/Y5fSj.png[/img][/center]



[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]
--- End code ---

Step 3
In this part, we will add an About section. Here you can write about what your regiment is about, and who you are as a community.

First things first, this part will also be centered. After that, we will need a table. The reason behind this is because we will use
horizontal lines. When you don't put a horizontal line in a table, it will take the whole width of the thread. When you want the
horizontal line to be only as long as the title, you will have to put them into a table.

In the first chapter of this guide, we have seen how to insert a table. However, you can also create a table without clicking on
the table icon. You can also just type [ td ] [ /td ] and after that, it will simulate a table for you. Of course, don't put these spaces
between "td" and the brackets. I have done this because otherwise, you wouldn't be able to see it written.

When you have completed this, your code will look like this:


--- Code ---
[center][img]https://imgyukle.com/f/2021/07/23/Y5fSj.png[/img][/center]



[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][td]ABOUT[/td][/center]
--- End code ---

Step 3.1
Now we will add the horizontal lines. To do this is very simple. Left of the Spoiler icon you will see a
horizontal line with arrows pointing outwards. That is the button you have to press. An other way
in inserting them is by typing [ hr ], also keep in mind again, no spaces between text and the brackets.

Place them within your table, when this is done, your code will look like this:


--- Code ---
[center][img]https://imgyukle.com/f/2021/07/23/Y5fSj.png[/img][/center]



[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][td][hr]ABOUT[hr][/td][/center]
--- End code ---

Step 3.2
The rest of this step is very simple. Now select only the text of 'ABOUT' or your preferred title and
choose a font and font size that you like. Also, I would advise making your titles bold as they will
stand out a little bit more. I have gone with Garamond, size 18pt's.

Also an important note; for some reason when you put text into tables, the text will turn into a gray
color. If you don't mind that you can keep it this way, but if you want your text to be black then go to
the right of the font size option and choose the color black.

If you have completed all of this, your code will look like this:


--- Code ---
[center][img]https://imgyukle.com/f/2021/07/23/Y5fSj.png[/img][/center]



[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][td][hr][font=Garamond][size=16pt][b][color=black]ABOUT[/color][/b][/size][/font][hr][/td][/center]
--- End code ---

Step 3.3
What we have to do now is just put a paragraph of text in. Place your paragraph right under your title. The horizontal
lines already create a bit of space above and under them. When you have done that, choose again a font and font size
for the main text of your preference. I have gone again with Garamond and 11pt's of size.

Now notice that your text goes straight through the whole width of the thread. In order to have a smaller paragraph just
hit a few enters to cut off lines of text to let them start in a new rule. It will make the thread also look less sloppy.

I have also put an "Add a person to join" text rule as it is helpful for people who do want to join.
I have also put this in cursive. But it's a matter of preference.

When you finished all of this, your code should look like this:

Note: If you don't see [ table ] [ tr ] etc, don't worry. It's because we didn't click on the table button.
After you posted or viewed the thread before posting they will pop up.


--- Code ---
[center][img]https://imgyukle.com/f/2021/07/23/Y5fSj.png[/img][/center]



[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][table][tr][td][hr][font=Garamond][size=16pt][b][color=black]ABOUT[/color][/b][/size][/font][hr][/td][/tr][/table][/center]
[center][font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.

[i]Interested in joining? Add one of the officers on steam, or send a personal message on the forums.[/i][/size][/font][/center]
--- End code ---

Step 4
We will create another spacer. Place two enters under the paragraph of text. And copy-paste the
spacer we used before.

Note: Don't worry about the cursive text in the code. I believe it's a bug. On your thread, it should be alright.

When you have done that your code will look like this:


--- Code ---
[center][img]https://imgyukle.com/f/2021/07/23/Y5fSj.png[/img][/center]



[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][table][tr][td][hr][font=Garamond][size=16pt][b][color=black]ABOUT[/color][/b][/size][/font][hr][/td][/tr][/table][/center]
[center][font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.

[i]Interested in joining? Add one of the officers on steam, or send a personal message on the forums.[/i][/size][/font][/center]


[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]
--- End code ---

Step 5
Now for the fifth step, we are going to create the history section. Place one enter under the spacer we made above.
What I want you to do now is copy-paste the whole 'ABOUT' section and place it under the spacer. After that delete
the text within the 'ABOUT' section and put in a paragraph of the regiment's history. Also, of course, replace the title.

When you have done that, your code should look like this:


--- Code ---
[center][img]https://imgyukle.com/f/2021/07/23/Y5fSj.png[/img][/center]



[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][table][tr][td][hr][font=Garamond][size=16pt][b][color=black]ABOUT[/color][/b][/size][/font][hr][/td][/tr][/table][/center]
[center][font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.

[i]Interested in joining? Add one of the officers on steam, or send a personal message on the forums.[/i][/size][/font][/center]


[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][table][tr][td][hr][font=Garamond][size=16pt][b][color=black]HISTORY OF THE REGIMENT[/color][/b][/size][/font][hr][/td][/tr][/table][/center]
[center][font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.[/size][/font][/center]
--- End code ---

Step 5.1
We are not done yet with the history section. It would look a little boring, having a thread with only text paragraphs.

What we are going to do now is make a table. A table including a picture on the left and a text paragraph on the right.
Above the paragraph, we are also going to put a title with horizontal lines above and under it.

Make sure to have two empty rules under the history text paragraph. After that make a table with 3 [ td ] rules.

Like this:


--- Code ---
[td][/td]

[td][/td]

[td][/td]
--- End code ---

Step 5.1.1
When you have done that, place your cursor in the middle [ td ] rule and press the spacebar 4 times.

It should look like this:


--- Code ---
[td][/td]

[td]    [/td]

[td][/td]
--- End code ---

Step 5.1.2
Now it's time to put an image in the upper rule. Keep in mind that you take high-definition pictures and a big enough
size so that the text won't go under them. It takes a bit of time sometimes cropping the image to get it as high as the
paragraph. Trust me, if you take this time, it's gonna look a lot better.

When you have placed your image, your code should look like this:


--- Code ---
[center][img]https://imgyukle.com/f/2021/07/23/Y5fSj.png[/img][/center]



[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][table][tr][td][hr][font=Garamond][size=16pt][b][color=black]ABOUT[/color][/b][/size][/font][hr][/td][/tr][/table][/center]
[center][font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.

[i]Interested in joining? Add one of the officers on steam, or send a personal message on the forums.[/i][/size][/font][/center]


[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][table][tr][td][hr][font=Garamond][size=16pt][b][color=black]HISTORY OF THE REGIMENT[/color][/b][/size][/font][hr][/td][/tr][/table][/center]
[center][font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.[/size][/font][/center]


[td][img]https://imgyukle.com/f/2021/07/23/YIYfq.png[/img][/td]

[td]    [/td]

[td][/td]
--- End code ---

Step 5.1.3
Now for the title, it's very simple. Just create two horizontal lines in the bottom [ td ] rule.
Also, try to stick with the fonts and font sizes you have used before for titles and text.

I made the title a little bit smaller, as it is a subtitle. I have used Garamond with 14 pt's.

When you have done this, your code should look like this:


--- Code ---
[center][img]https://imgyukle.com/f/2021/07/23/Y5fSj.png[/img][/center]



[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][table][tr][td][hr][font=Garamond][size=16pt][b][color=black]ABOUT[/color][/b][/size][/font][hr][/td][/tr][/table][/center]
[center][font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.

[i]Interested in joining? Add one of the officers on steam, or send a personal message on the forums.[/i][/size][/font][/center]


[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][table][tr][td][hr][font=Garamond][size=16pt][b][color=black]HISTORY OF THE REGIMENT[/color][/b][/size][/font][hr][/td][/tr][/table][/center]
[center][font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.[/size][/font][/center]


[table][tr][td][img]https://imgyukle.com/f/2021/07/23/YIYfq.png[/img][/td]

[td]    [/td]

[td][hr][font=Garamond][size=14pt][b][color=black]The Peninsular War[/color][/b][/size][/font][hr][/td]
--- End code ---

Step 5.1.4
At the end of your sub-title rule, you will see a closing table code. [ /td ]

Before the first bracket, hit enter because we are going to place text in the same table under the title.

When you have done that, place your paragraph of history text that you want to use.
Remember to cut off the text so that the text and image won't cover the whole
width of the thread. Also make sure you selected your font and font size again.

When you have done that, your code should look like this:


--- Code ---
[center][img]https://imgyukle.com/f/2021/07/23/Y5fSj.png[/img][/center]



[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][table][tr][td][hr][font=Garamond][size=16pt][b][color=black]ABOUT[/color][/b][/size][/font][hr][/td][/tr][/table][/center]
[center][font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.

[i]Interested in joining? Add one of the officers on steam, or send a personal message on the forums.[/i][/size][/font][/center]


[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][table][tr][td][hr][font=Garamond][size=16pt][b][color=black]HISTORY OF THE REGIMENT[/color][/b][/size][/font][hr][/td][/tr][/table][/center]
[center][font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.[/size][/font][/center]


[table][tr][td][img]https://imgyukle.com/f/2021/07/23/YIYfq.png[/img][/td]

[td]    [/td]

[td][hr][font=Garamond][size=14pt][b][color=black]The Peninsular War[/color][/b][/size][/font][hr]
[font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis eros sed dolor dignissim eleifend. Nulla faucibus vel leo a efficitur.
Sed suscipit tellus sed massa dictum interdum. Ut dictum sapien mi, porttitor tristique lacus eleifend at. In orci dui, consectetur ac maximus nec,
vestibulum sagittis metus. Vestibulum at eros ligula. Mauris posuere finibus vestibulum. In et sollicitudin elit. Integer ut euismod urna. Suspendisse
mattis accumsan leo, sit amet fringilla velit vulputate quis. In tempus libero eget mollis porttitor. Etiam lobortis elit vel rutrum malesuada. Donec
vulputate pellentesque dolor, at pharetra elit aliquam nec.

Ut luctus ultrices risus, ac convallis orci consequat ac. Donec nec placerat nulla, at dictum eros. Etiam quis ex leo. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Mauris maximus rhoncus velit non condimentum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam non turpis sem. Fusce pellentesque volutpat vehicula. Praesent in aliquam quam, vel sodales libero. Suspendisse potenti. [/size][/font][/td]
--- End code ---

Step 5.1.5
Now make sure to have two empty rules under your history text paragraph.
Be aware to put your cursor behind the codes and not just the text.

We are going to make another table. The very same like we did now. But
for now we are going to place the text on the left and the image on the right.

If you are smart, just copy paste the entire table and replace the image with
a paragraph and the paragraph with an image.

When you have done that, your code should look like this:


--- Code ---
[center][img]https://imgyukle.com/f/2021/07/23/Y5fSj.png[/img][/center]



[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][table][tr][td][hr][font=Garamond][size=16pt][b][color=black]ABOUT[/color][/b][/size][/font][hr][/td][/tr][/table][/center]
[center][font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.

[i]Interested in joining? Add one of the officers on steam, or send a personal message on the forums.[/i][/size][/font][/center]


[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][table][tr][td][hr][font=Garamond][size=16pt][b][color=black]HISTORY OF THE REGIMENT[/color][/b][/size][/font][hr][/td][/tr][/table][/center]
[center][font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.[/size][/font][/center]


[table][tr][td][img]https://imgyukle.com/f/2021/07/23/YIYfq.png[/img][/td]

[td]    [/td]

[td][hr][font=Garamond][size=14pt][b][color=black]The Peninsular War[/color][/b][/size][/font][hr]
[font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis eros sed dolor dignissim eleifend. Nulla faucibus vel leo a efficitur.
Sed suscipit tellus sed massa dictum interdum. Ut dictum sapien mi, porttitor tristique lacus eleifend at. In orci dui, consectetur ac maximus nec,
vestibulum sagittis metus. Vestibulum at eros ligula. Mauris posuere finibus vestibulum. In et sollicitudin elit. Integer ut euismod urna. Suspendisse
mattis accumsan leo, sit amet fringilla velit vulputate quis. In tempus libero eget mollis porttitor. Etiam lobortis elit vel rutrum malesuada. Donec
vulputate pellentesque dolor, at pharetra elit aliquam nec.

Ut luctus ultrices risus, ac convallis orci consequat ac. Donec nec placerat nulla, at dictum eros. Etiam quis ex leo. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Mauris maximus rhoncus velit non condimentum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam non turpis sem. Fusce pellentesque volutpat vehicula. Praesent in aliquam quam, vel sodales libero. Suspendisse potenti. [/size][/font][/td][/tr][/table]


[table][tr][td][hr][font=Garamond][size=14pt][b][color=black]Battle of Borodino[/color][/b][/size][/font][hr]
[font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis eros sed dolor dignissim eleifend. Nulla faucibus vel leo a efficitur.
Sed suscipit tellus sed massa dictum interdum. Ut dictum sapien mi, porttitor tristique lacus eleifend at. In orci dui, consectetur ac maximus nec,
vestibulum sagittis metus. Vestibulum at eros ligula. Mauris posuere finibus vestibulum. In et sollicitudin elit. Integer ut euismod urna. Suspendisse
mattis accumsan leo, sit amet fringilla velit vulputate quis. In tempus libero eget mollis porttitor. Etiam lobortis elit vel rutrum malesuada. Donec
vulputate pellentesque dolor, at pharetra elit aliquam nec.

Ut luctus ultrices risus, ac convallis orci consequat ac. Donec nec placerat nulla, at dictum eros. Etiam quis ex leo. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Mauris maximus rhoncus velit non condimentum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam non turpis sem. Fusce pellentesque volutpat vehicula. Praesent in aliquam quam, vel sodales libero. Suspendisse potenti.[/size][/font][/td]

[td]    [/td]

[td][img]https://imgyukle.com/f/2021/07/23/YIYfq.png[/img][/td][/tr][/table]
--- End code ---

Step 6
Now the final part. The roster. When you have come this far, this will be a piece of cake.
Rosters can have different layouts. But for this tutorial, we are going to keep it simple.

Before the roster use a spacer again to give it  a bit of space. Just copy and paste the spacer from earlier.
After that, copy the 'ABOUT' title code and paste it. Change 'ABOUT' to Muster Roll or anything you like.

We are going to need a table again. But this time with 5 [ td ] rules.

Like this:


--- Code ---
[td][/td]

[td][/td]

[td][/td]

[td][/td]

[td][/td]
--- End code ---

When that is done, make sure to hit the spacebar 25 times in the 2nd from the
top and 2nd from the bottom [ td ] rules.

Like this:


--- Code ---
[td][/td]

[td]                         [/td]

[td][/td]

[td]                         [/td]

[td][/td]
--- End code ---

Now to fill in these tables, all you need is to add the horizontal lines again. Put them in
each of the [ td ] rules. After that, you use the same font as you have always used as well
as a proper font size for sub-titles. When you have done that you can fill in the roster.

Officers and NCOs can just be written under each other, except for the enlisted. Try to leave an
enter of space between each rank. It will give a cleaner look.

You can also put country flags before each player. Just use the image tag and press it 2 times on
the spacebar to give a little space between the flag and the text.

I am going to let you try this one out.

When you have done that, your whole thread code should look like this:


--- Code ---
[center][img]https://imgyukle.com/f/2021/07/23/Y5fSj.png[/img][/center]



[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][table][tr][td][hr][font=Garamond][size=16pt][b][color=black]ABOUT[/color][/b][/size][/font][hr][/td][/tr][/table][/center]
[center][font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.

[i]Interested in joining? Add one of the officers on steam, or send a personal message on the forums.[/i][/size][/font][/center]


[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[center][table][tr][td][hr][font=Garamond][size=16pt][b][color=black]HISTORY OF THE REGIMENT[/color][/b][/size][/font][hr][/td][/tr][/table][/center]
[center][font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque leo vel aliquet dapibus. Suspendisse ipsum risus,
suscipit ac vulputate vitae, pretium ac mi. Aliquam finibus cursus rhoncus. Suspendisse semper rhoncus vehicula. Maecenas id massa
eu quam imperdiet interdum. Curabitur iaculis felis nisi, at vehicula felis suscipit at. Morbi sem sem, ornare sit amet pellentesque non,
sodales id quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.[/size][/font][/center]


[table][tr][td][img]https://imgyukle.com/f/2021/07/23/YIYfq.png[/img][/td]

[td]    [/td]

[td][hr][font=Garamond][size=14pt][b][color=black]The Peninsular War[/color][/b][/size][/font][hr]
[font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis eros sed dolor dignissim eleifend. Nulla faucibus vel leo a efficitur.
Sed suscipit tellus sed massa dictum interdum. Ut dictum sapien mi, porttitor tristique lacus eleifend at. In orci dui, consectetur ac maximus nec,
vestibulum sagittis metus. Vestibulum at eros ligula. Mauris posuere finibus vestibulum. In et sollicitudin elit. Integer ut euismod urna. Suspendisse
mattis accumsan leo, sit amet fringilla velit vulputate quis. In tempus libero eget mollis porttitor. Etiam lobortis elit vel rutrum malesuada. Donec
vulputate pellentesque dolor, at pharetra elit aliquam nec.

Ut luctus ultrices risus, ac convallis orci consequat ac. Donec nec placerat nulla, at dictum eros. Etiam quis ex leo. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Mauris maximus rhoncus velit non condimentum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam non turpis sem. Fusce pellentesque volutpat vehicula. Praesent in aliquam quam, vel sodales libero. Suspendisse potenti. [/size][/font][/td][/tr][/table]


[table][tr][td][hr][font=Garamond][size=14pt][b][color=black]Battle of Borodino[/color][/b][/size][/font][hr]
[font=Garamond][size=11pt]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis eros sed dolor dignissim eleifend. Nulla faucibus vel leo a efficitur.
Sed suscipit tellus sed massa dictum interdum. Ut dictum sapien mi, porttitor tristique lacus eleifend at. In orci dui, consectetur ac maximus nec,
vestibulum sagittis metus. Vestibulum at eros ligula. Mauris posuere finibus vestibulum. In et sollicitudin elit. Integer ut euismod urna. Suspendisse
mattis accumsan leo, sit amet fringilla velit vulputate quis. In tempus libero eget mollis porttitor. Etiam lobortis elit vel rutrum malesuada. Donec
vulputate pellentesque dolor, at pharetra elit aliquam nec.

Ut luctus ultrices risus, ac convallis orci consequat ac. Donec nec placerat nulla, at dictum eros. Etiam quis ex leo. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Mauris maximus rhoncus velit non condimentum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam non turpis sem. Fusce pellentesque volutpat vehicula. Praesent in aliquam quam, vel sodales libero. Suspendisse potenti.[/size][/font][/td]

[td]    [/td]

[td][img]https://imgyukle.com/f/2021/07/23/YIYfq.png[/img][/td][/tr][/table]


[center][font=Garamond][size=18pt][color=black]* * *[/color][/size][/font][center]

[table][tr][td][hr][font=Garamond][size=16pt][b][color=black]MUSTER ROLL[/color][/b][/size][/font][hr][/td][/tr][/table]


[table][tr][td][hr][font=Garamond][size=13pt][b][color=black]Commissioned Officers [2][/color][/b][/size][/font][hr]
[font=Garamond][size=11pt][img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Colonel Peter Griffin
[img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Lieutenant Colonel Cleveland Brown[/size][/font][/td]

[td]                         [/td]

[td][hr][font=Garamond][size=13pt][b][color=black]Non-Commissioned Officers [3][/color][/b][/size][/font][hr]
[font=Garamond][size=11pt][img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Serjeant Major Stewie Griffin
[img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Serjeant Brian Griffin
[img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Corporal Chris Griffin[/size][/font][/td]

[td]                         [/td]

[td][hr][font=Garamond][size=13pt][b][color=black]Enlisted [11][/color][/b][/size][/font][hr]
[font=Garamond][size=11pt][img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Lance Corporal Joe Swanson

[img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Grenadier Adam West
[img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Grenadier Cleveland Brown Jr.

[img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Private Glenn Quagmire
[img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Private Tom Tucker
[img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Private Jonathan Weed
[img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Private Jake Tucker
[img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Private Carter Pewterschmidt
[img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Private Elmer Hartman
[img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Private Jim Caplan
[img]https://imgyukle.com/f/2021/07/23/YTy5n.png[/img]  Private Neil Goldman
[/size][/font][/td][/tr][/table]
--- End code ---

I hope you guys found this useful. I know it can be a lot to take in when you have never
used it before. Therefore, if you are working on your page and there is something you don't
understand feel free to contact me. I'm pretty active on here.





Click to go back to top







Skaen:
reserved space

Please don't spam unnecessary comments. This makes things easier to help people who are needing it.

Astoria:
good luck gardaşım ♥

Skaen:

--- Quote from: Astoria on June 02, 2020, 05:34:20 pm ---good luck gardaşım ♥

--- End quote ---
Thanks gardes

Radulf:
Good work as usual

Navigation

[0] Message Index

[#] Next page

Go to full version