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

our forums is basic BBcode if that helps

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;
}

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?

sorry about that @skouliki

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

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;
}