The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Table Column Width and Table Grid Help

5 posters

Go down

Table Column Width and Table Grid Help Empty Table Column Width and Table Grid Help

Post by AnyColor July 28th 2018, 7:58 pm

Technical Details


Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Mozilla Firefox
Screenshot of problem : https://i.imgur.com/FWdZWIb.jpg
Who the problem concerns : All members
When the problem appeared : Since forum was created
Forum link : pwgenesis.forumotion.com

Description of problem

I'm still trying to learn forumotion coding (migrating my site over from zeta) so I'm not too familiar with the intricacies of Table design here.

What I'd liked to do with what's pictured below, is spread out the gap between columns a bit more, so that "date" and "show" columns, and others, have a bit more space between them.

Also, is it possible to create borders or grids for all the columns and rows so the information is visually separated?

Lastly, can someone elaborate on how to use CSS code to further customize Tables? @luffy was kind enough to provide me with this CSS code below, but I do not know how to use it. Outside of identifying the tables to reference them.

Thank you for the help!

Table Column Width and Table Grid Help FWdZWIb

Code:
 /*Table header*/
table#tableHeader { ... }
/*Table Columns*/
table#tableContent { ... }
td.testing1 { ... } /* for the first column of your table */
td.testing2 { ... } /* for the second column of your table */
/*Table Footer*/
table#tableFooter { ... }
AnyColor
AnyColor
Forumember

Male Posts : 93
Reputation : 2
Language : English
Location : Las Vegas

https://pwgenesis.forumotion.com

Back to top Go down

Table Column Width and Table Grid Help Empty Re: Table Column Width and Table Grid Help

Post by Ape July 29th 2018, 3:00 am

our forums is basic BBcode if that helps


Table Column Width and Table Grid Help Left1212Table Column Width and Table Grid Help Center11Table Column Width and Table Grid Help Right112
Table Column Width and Table Grid Help Ape_b110
Table Column Width and Table Grid Help Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19209
Reputation : 2001
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Table Column Width and Table Grid Help Empty Re: Table Column Width and Table Grid Help

Post by TheCrow July 29th 2018, 3:28 pm

To the code I gave you the last time, you can do these additions:
Code:
[table id="tableHeader"]
to
Code:
[table id="tableHeader" cellspacing="0" border="1"]
Then
Code:
[table id="tableContent"]
to
Code:
[table id="tableContent" cellspacing="0" border="1"]
And then
Code:
[table id="tableFooter"]
to
Code:
[table id="tableFooter" cellspacing="0" border="1"]

Then you can add this as your CSS:
Code:
/*Table header*/
table#tableHeader {
  padding: 3px;
}
/*Table Columns*/
table#tableContent {
  padding: 3px;
}
td.testing1 {
  padding: 3px;
} /* for the first column of your table */
td.testing2 {
  padding: 3px;
} /* for the second column of your table */
/*Table Footer*/
table#tableFooter {
  padding: 3px;
}


Table Column Width and Table Grid Help Thecro10
Forum of the Forums

Forumotion Rules | Tips & Tricks |
FAQ | Did you forget your password?



*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6902
Reputation : 795
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Table Column Width and Table Grid Help Empty Re: Table Column Width and Table Grid Help

Post by AnyColor July 29th 2018, 9:05 pm

Thank you so much just what I needed @luffy !

Only other question I have is it possible to add background images to the tables, so the text lays on top of it?
AnyColor
AnyColor
Forumember

Male Posts : 93
Reputation : 2
Language : English
Location : Las Vegas

https://pwgenesis.forumotion.com

Back to top Go down

Table Column Width and Table Grid Help Empty Re: Table Column Width and Table Grid Help

Post by skouliki July 29th 2018, 9:59 pm

Please don't use bold or color and keep to the default text. This is reserved for the staff for moderation. Thank you.
Please read our forum rules: ESF General Rules
skouliki
skouliki
Manager
Manager

Female Posts : 15246
Reputation : 1703
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Table Column Width and Table Grid Help Empty Re: Table Column Width and Table Grid Help

Post by AnyColor August 3rd 2018, 3:52 am

sorry about that @skouliki

Can anyone help me with the process of adding image backgrounds to the tables/header of table?
AnyColor
AnyColor
Forumember

Male Posts : 93
Reputation : 2
Language : English
Location : Las Vegas

https://pwgenesis.forumotion.com

Back to top Go down

Table Column Width and Table Grid Help Empty Re: Table Column Width and Table Grid Help

Post by SarkZKalie August 3rd 2018, 8:42 am

For a custom HTML table code, you may put it as
Code:
<table background="image-link">
or adding image background for header only
Code:
<table class="yourTable">
<thead>
<tr><td>Title</td></tr>
</thead>
Adding CSS
Code:
table.yourTable thead {
background:url("image-link") center repeat-x;
}


Table Column Width and Table Grid Help Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1439
Reputation : 220
Language : English

https://rotavn.forumotion.com/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum