Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

Table styling


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Oct 14, 2011, 03:59 AM
mimi's Avatar
mimi
 
70 posts · Feb 2009
over there...
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.
  #2  
Old Oct 14, 2011, 06:53 AM
lmilesw's Avatar
lmilesw
 
9,964 posts · Jul 2009
Central New York State USA
  • 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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Oct 14, 2011, 09:08 AM
mimi's Avatar
mimi
 
70 posts · Feb 2009
over there...
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.

Last edited by mimi; Oct 14, 2011 at 09:49 AM.
  #4  
Old Oct 14, 2011, 11:35 AM
lmilesw's Avatar
lmilesw
 
9,964 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Oct 14, 2011, 12:18 PM
mimi's Avatar
mimi
 
70 posts · Feb 2009
over there...
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.
  #6  
Old Oct 14, 2011, 12:53 PM
lmilesw's Avatar
lmilesw
 
9,964 posts · Jul 2009
Central New York State USA
You may have to give a td an id so you can style it individually.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Oct 14, 2011, 03:59 PM
mimi's Avatar
mimi
 
70 posts · Feb 2009
over there...
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.
  #8  
Old Oct 14, 2011, 08:35 PM
lmilesw's Avatar
lmilesw
 
9,964 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
space between table cells, perhaps nested table issue jrobie23 Center area post/pages 1 Oct 2, 2011 04:02 PM
How to Add Zebra Effect to Single Table with WP Table-Reloaded Plugin c12281 Plugins & Atahualpa 8 Aug 1, 2010 03:53 PM
[SOLVED] Table Format for a Single Table joan Center area post/pages 4 Jul 13, 2010 09:03 AM
Turning off Table Styling karlos Header configuration & styling 1 Nov 28, 2009 05:01 AM
[SOLVED] Problem with table styling Edu_Sanzio Atahualpa 3 Wordpress theme 3 Jul 9, 2009 05:22 AM


All times are GMT -6. The time now is 02:44 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.