Table Column Width and Table Grid Help

Go down

Table Column Width and Table Grid Help

Post by AnyColor on 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!



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 { ... }
avatar
AnyColor
Forumember

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

https://pwgenesis.forumotion.com

Back to top Go down

Re: Table Column Width and Table Grid Help

Post by APE on July 29th 2018, 3:00 am

our forums is basic BBcode if that helps



avatar
APE
Administrator
Administrator

Male Posts : 13399
Reputation : 1422
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

Re: Table Column Width and Table Grid Help

Post by Luffy on 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;
}
avatar
Luffy
Manager
Manager

Male Posts : 5782
Reputation : 647
Language : Greek, English
Location : Cyprus, Greece

https://www.crossroadz.net

Back to top Go down

Re: Table Column Width and Table Grid Help

Post by AnyColor on 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?
avatar
AnyColor
Forumember

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

https://pwgenesis.forumotion.com

Back to top Go down

Re: Table Column Width and Table Grid Help

Post by skouliki on 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
avatar
skouliki
Manager
Manager

Female Posts : 4883
Reputation : 800
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: Table Column Width and Table Grid Help

Post by AnyColor on 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?
avatar
AnyColor
Forumember

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

https://pwgenesis.forumotion.com

Back to top Go down

Re: Table Column Width and Table Grid Help

Post by SarkZKalie on 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;
}


avatar
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 968
Reputation : 159
Language : English

http://rotavn.forumotion.com

Back to top Go down

Back to top


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