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



APE
APE
Administrator
Administrator

Male Posts : 14024
Reputation : 1487
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 TheCrow 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;
}
TheCrow
TheCrow
Manager
Manager

Male Posts : 6008
Reputation : 680
Language : Greek, English
Location : Cyprus, Greece

https://www.inforumgr.com

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?
AnyColor
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
skouliki
skouliki
Manager
Manager

Female Posts : 5564
Reputation : 882
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?
AnyColor
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;
}


SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1022
Reputation : 170
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