[SOLVED] announcement and tutorial topic table style on this forum

[george abdoNew Member]

hi i want to know how can i make a table like this one please http://help.forumotion.com/t147283-profiles-with-stripes it is also in every announcement or tutorial topic at this forum so can you please tell me how can i make my post like that in my forum?

[george abdoNew Member]

bump please

[Paradiseng]

You need to follow the tutorial

[george abdoNew Member]

i dont want the tutorial i want to know how they made the tutorial post look like that in the table :/

[Paradiseng]

Okay, i understand what you mean. Maybe you need to wait for Anger to come in and help you.

[JerriLeah7Graphic Designer]

That table design belongs to the English Support Forum and we aren't allowed to share it. :/ You can have a similar table design, but you can't have the exact one.

[george abdoNew Member]

well i have this code

Code:


<table style="background:url('http://2img.net/i/fa/empty.gif') no-repeat 8px 50% #FFF;border:1px solid #CCC;border-left:2px solid #0598E4;border-right:2px solid #0598E4;border-top:50px solid #0598E4;border-bottom:5px solid #0598E4;padding:5px 5px 5px 75px;width:97%;border-radius:3px;font-size:10px;"><tr><td>[color=#000000]•
•
•
•
•
•
•
•
•
•
•
•
•
•
[/color]<br/><br/></table>

can someone please tell me how can i put in text inside the top border? like a title or something

[GuestGuest]

You can create a table title with the <caption></caption> tag. Use this tag immediately after the <table> tag:

Code:

       
        <table style="background:url('http://2img.net/i/fa/empty.gif') no-repeat 8px 50% #FFF;border:1px solid #CCC;border-left:2px solid #0598E4;border-right:2px solid #0598E4;border-top:50px solid #0598E4;border-bottom:5px solid #0598E4;padding:5px 5px 5px 75px;width:97%;border-radius:3px;font-size:10px;"><caption>YOUR TITLE HERE</caption><tr><td>[color=#000000]•
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        [/color]<br/><br/></table>

[george abdoNew Member]

almost there http://prntscr.com/bin5ki just instead of being outside the table i want it to be inside the table inside the top border to be exact

[GuestGuest]

Try this. Really, all you need to do is to fiddle around a bit with the tags and borders to get it the way you want it. Here's my try:

Code:

<table style="background:url('http://2img.net/i/fa/empty.gif') no-repeat 1px #FFF;border:1px solid #CCC;border-left:2px solid #0598E4;border-right:1px solid #0598E4;border-top:1px solid #0598E4;border-bottom:1px solid #0598E4;width:97%;border-radius:3px;font-size:10px;"><tr bgcolor="#0598e4"><th><font size="4"><font color=#FFF>YOUR TITLE HERE</font></font></tr><td>[color=#000000]•
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        [/color]<br/><br/></table>

[george abdoNew Member]

im sorry i don't know how to code this is how it looks with your code http://prntscr.com/biojp9 there is space between the title and the top border and left and right i want it to be all a part of the border like this one
(please note that i made this image in editor and i want it to look like it if possible)
https://i.imgur.com/1Qs8olO.png

@ange tuteur can you please help too?

[Ange TuteurAdministrator]

We can give you tables, but if you don't know how to modify them I'm afraid you're SOL. It'd be like trying to explain a math problem to you, but you don't know math.

The tables require a knowledge of HTML and CSS to create, if you don't have knowledge with these languages you'll have a very hard time trying to modify and even make your own tables. I'd recommend at least learning the minimum of these languages first before attempting to replicate designs that you see on the internet. You can learn,

HTML here : http://www.w3schools.com/html/default.asp
CSS here : http://www.w3schools.com/css/default.asp

You can also find freebies on the web for tables like this, or click here to find more. However, I still recommend learning, because you'll be able to make your own designs and even manage others all by yourself. It's very valuable knowledge to possess.

[george abdoNew Member]

@Ange tuteur i have this table

Code:


 
<table style="background:url('http://2img.net/i/fa/empty.gif') no-repeat 8px 50% #FFF;border:1px solid #CCC;border-left:2px solid #0598E4;border-right:2px solid #0598E4;border-top:50px solid #0598E4;border-bottom:5px solid #0598E4;padding:5px 5px 5px 75px;width:97%;border-radius:3px;font-size:10px;"><tr><td>[color=#000000]•
•
•
•
•
•
•
•
•
•
•
•
•
•
[/color]<br/><br/></table>

all i want to know is how can i make it have text in the top border like in this image that i made
https://i.imgur.com/1Qs8olO.png

[GuestGuest]

Thanks @Ange Tuteur

[Ange TuteurAdministrator]

Well, I can provide you with a very trivial example. Generally speaking Forumotion's tables are created with 3 bbcode tables :

1. Title
2. Post Content
3. Footer / Credits

They're outfitted with class names so that the style can easily be changed globally via the CSS stylesheet, but you can also write the styles inline. Here's an example similar to what we do at the Support Forum.

BBCode :
This would be the content you enter into the editor. Simply edit the texts as you see fit. BBCode is essentially a simplified form of HTML, as once the bbcode is transferred to the server it'll be parsed as HTML.

Code:

[table class="table-solid-block table-header"][tr][td]Title[/td][/tr][/table]
[table class="table-content-block"][tr][td]Message[/td][/tr][/table]
[table class="table-solid-block"][tr][td]Footer[/td][/tr][/table]

CSS :
CSS is the "makeup" of your HTML elements. In simple terms it's what gives the tables colors, borders, and anything else you can think of that's design related. This should be pasted into your stylesheet ; Display > Colors > CSS stylesheet.

Code:

.table-header {
  font-size:24px;
  text-align:center;
}

.table-solid-block {
  color:#FFF;
  background:#69C;
  width:100%;
  padding:15px 6px;
}

.table-content-block {
  background:#FFF;
  width:100%;
  border:1px solid #69C;
  padding:6px 3px;
}

The end result would be something similar to this :

Title

Message

Footer

[BlackScorpionValued Member]

That should get you started George.

[GuestGuest]

That should get you started George.

Started asking more of the same

[Sponsored content]