Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)

- - Table styling (http://forum.bytesforall.com/showthread.php?t=15648)

Is there a thread somewhere were I can learn a bit more on styling tables? Some examples would be nice. I am already aware of the Table section in theme options.

There is a ton of stuff all over the web such as on w3schools.com.
There are plugins for tables you can search for at wordpress.org
You could use the TinyMCE Advanced plugin and add table styling functionality to the WordPress editor. The problem I find with that is it at uses depricated code instead of CSS to style the table and I have had "issues" with using it.
I prefer to use divs and and float/style them with CSS to get a table effect.

I already knew + visited w3schools.com, but I needed more, that's why I asked.

One of the BIG problem I was having "is" the following: http://forum.bytesforall.com/showthread.php?t=4416
Glad someone posted about it.

Would be great to see some advanced tutorials on Atahualpa, divs and float/style with CSS as you mentioned!

So far I am trying basic stuff with tables, I'd rather not use plugins either.

The following was very helpful: http://www.w3schools.com/css/css_table.asp

But what I need is more control on individual cells, like aligning text in a row only, individual colours, etc... So it's a bit more involved. That's why I asked to see some examples with this theme.

Here is an example of styling a table.
First you create a table with an id (or class if you want to style all table the same)
Here is the code for a table with 2 columns and 2 rows with an id of test-table.

HTML Code:

<table id="test-table" border="0">

<tbody>

<tr>

<td>Cell number one</td>

<td>Cell number two</td>

</tr>

<tr>

<td>Cell number three</td>

<td>Cell number four</td>

</tr>

</tbody>

</table>

If I wanted the padding in all cells to be 5 px I would use the following css in the CSS Inserts section of the Atahualpa Theme Options

HTML Code:

#test-table td {

    padding: 10px;

}

If I wanted the padding in each cell to be 5px with a red border around it and the table as a whole to have a black border with cell spacing of 40px horizontally and 30px vertically I would use the following. Cell spacing=border spacing in CSS

HTML Code:

#test-table td {

    padding: 5px;

    border: 1px solid red;

}

#test-table {

    border-spacing: 40px 30px;

    border: 1px solid black;

    padding: 5px;

}

Again there are tons of tutorials on the web which I use quite a bit as trying to remember stuff that you don't use very often is more difficult than just doing a quick search. Here are a couple of places I just found with a quick search. Stack Overflow and Quirks Mode (info on tables), and Quirks Mode (border spacing on tables)
One thing to remember with Atahualpa is you probably will want to get rid of the styling in ATO>Style Tables so it won't conflict with your styling. If you use the styling in that section it will apply to all tables.

Thank you, I already worked on this tutorial today:

CSS Insert:

Code:

#customers

{

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

width:100%;

border-collapse:collapse;

}

#customers td, #customers th 

{

font-size:1em;

border:1px solid #98bf21;

padding:3px 7px 2px 7px;

}

#customers th 

{

font-size:1.1em;

text-align:left;

padding-top:5px;

padding-bottom:4px;

background-color:#A7C942;

color:#ffffff;

}

#customers tr.alt td 

{

color:#000000;

background-color:#EAF2D3;

}

Then:

Code:

<table id="customers">

<tr>

  <th>Company</th>

  <th>Contact</th>

  <th>Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Maria Anders</td>

<td>Germany</td>

</tr>

<tr class="alt">

<td>Berglunds snabbköp</td>

<td>Christina Berglund</td>

<td>Sweden</td>

</tr>

<tr>

<td>Centro comercial Moctezuma</td>

<td>Francisco Chang</td>

<td>Mexico</td>

</tr>

<tr class="alt">

<td>Ernst Handel</td>

<td>Roland Mendel</td>

<td>Austria</td>

</tr>

<tr>

<td>Island Trading</td>

<td>Helen Bennett</td>

<td>UK</td>

</tr>

</table>

But in your examples, if I understand this correctly, like the above, it will style ALL cells.
What I would like to do is being able to style one or two cells, or row(s), o columns individually.

I have seen tutorials, but they are too old and they don't work anymore.

You see, with the above example, I was able to fine tune a bit, so that's easy enough for me to understand.

You may have to give a td an id so you can style it individually.

Yes, I thought about that, but I am sure how to do it right.
I tried the "align-left" and that did not work...

On a different topic, is there an easy way to; remove padding and margin from tables in posts only.

So I would like to have some padding for the text, but none for the table, so the table can stretch 100% right against the edge of the Post container?

At the minute, the only to get this look, it's by having two tables basically.

This is getting more involved than can easily be handled in question and answers in a forum. It is important for you to first understand the terminology so the instructions make sense. Then you need to start experimenting with tables, CSS, HTML, etc.

For example when I say "you may have to give a td an id" it is necessary for you to know what that means and how to do it. In other word it is important to learn the "language" so the answers make sense.