Wordpress Themes - WP Forum at BFA - [SOLVED] Any TABLES wizards out there?

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

- Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)

- - [SOLVED] Any TABLES wizards out there? (http://forum.bytesforall.com/showthread.php?t=18780)

[SOLVED] Any TABLES wizards out there?

Page in question: http://www.todddawsondesign.com/test/matia/buyers/
ATA: 3.7.9

Trying to make the table work. Looked mostly ok, but the text was in the vertical middle of the cell on all but the first columns. Couldn't figure it out.

In frustration I spent hours learning WP Table Reloaded... Then went back and redid the css on the table, and got the text aligned right. Then in spaning columns, I screwed everything up and can't figure out why/how.

Wanted the "section" head to span 4 cols, but the background color only spans 1. Can't figure out why.

Also can't figure out why there are no rules above and below on section head rows.

Tried doing the column group thing, but that didn't seem to work, so went back and manually did it.

Can't figure out why the first column doesn't have <p> styles on it.

I really wanted to learn tables better, and don't like having to resort to a plugin (SO cumbersome!).

Just thought I'd see if anyone could see what I can't. Thanks in advance.

in a word 'simplify' then use CSS. For example here is your first table simplified

HTML Code:

<h2>Prices</h2>

<table id="prices">

        <colgroup>

                <col width="284" />

                <col width="216" />

                <col width="143" />

                <col width="82" />

        </colgroup>

        <tbody>

                <tr>

                        <td class="section" colspan="4">GAME DOGS

                </tr>

                <tr>

                        <td class="column-1">American Foxhounds* CLOSED</td>

                        <td class="column-2">19″H x 16″L x 17″D</td>

                        <td class="column-3">Edition 24</td>

                        <td class="column-4">$9,800</td>

                </tr>

                <tr>

                        <td class="column-1">Boykin Spaniel** CLOSED</td>

                        <td class="column-2">14″H x 11″L x 6″D</td>

                        <td class="column-3">Edition 24</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1">Brittany Spaniel<em>*”Smithfield”**</em>CLOSED</td>

                        <td class="column-2">14″H x 17″L x 7″D</td>

                        <td class="column-3">Edition 24</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1">Brittany, Small * CLOSED</td>

                        <td class="column-2">7″H x 11″L x 7″D</td>

                        <td class="column-3">Edition 48</td>

                        <td class="column-4">$2,100</td>

                </tr>

                <tr>

                        <td class="column-1"></td>

                        <td class="column-2"></td>

                        <td class="column-3"></td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="section" colspan="4">GAME BIRDS</td>

                </tr>

                <tr>

                        <td class="column-1">Card Holders*<em>“Quail, Pheasant, Grouse “*</em>Set of Six</td>

                        <td class="column-2">2-3″H</td>

                        <td class="column-3">Open</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1">Mallard Ducks*<em>“High Water”</em></td>

                        <td class="column-2">80″H x 45″L x 27″D</td>

                        <td class="column-3">Edition 24</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1">Mallard/Pintail Tolling Ducks</td>

                        <td class="column-2">12′H x 8′L x 3′D</td>

                        <td class="column-3">Commission</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1">Mallard/Pintail Wall Mount 5 Duck</td>

                        <td class="column-2">5′W x 7′H</td>

                        <td class="column-3">Open</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1"></td>

                        <td class="column-2"></td>

                        <td class="column-3"></td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="section" colspan="4">GARDEN SCULPTURE</td>

                </tr>

                <tr>

                        <td class="column-1">Bull<em>*”Just Before Dark”</em></td>

                        <td class="column-2">21″H x 41″L x 14″D</td>

                        <td class="column-3">Edition 24</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1">African Gray Goose</td>

                        <td class="column-2">41″H x 19″L x 25″D</td>

                        <td class="column-3">Edition 16</td>

                        <td class="column-4">$12,000</td>

                </tr>

                <tr>

                        <td class="column-1">Fossil Tile – 3 Fossil Styles</td>

                        <td class="column-2">10″w x 10″L x 1/2″D</td>

                        <td class="column-3">Open</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1">Heron*<em>“Little Blue”**</em>CLOSED</td>

                        <td class="column-2">31″H x 30″L x 19″D</td>

                        <td class="column-3">Edition 36</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1"></td>

                        <td class="column-2"></td>

                        <td class="column-3"></td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="section" colspan="4">WILDLIFE SCULPTURE</td>

                </tr>

                <tr>

                        <td class="column-1">American Bald Eagle 12′</td>

                        <td class="column-2">12′H</td>

                        <td class="column-3">Edition 7</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1">American Bald Eagle 7′*<em>“For Spacious Skies”</em></td>

                        <td class="column-2">7′H x 38″L x 48″H</td>

                        <td class="column-3">Edition 12</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1">Common Egret** CLOSED</td>

                        <td class="column-2">15″H x 11″L x 6″D</td>

                        <td class="column-3">Edition 36</td>

                        <td class="column-4">$2,500</td>

                </tr>

                <tr>

                        <td class="column-1">Common Egret Pair* CLOSED</td>

                        <td class="column-2">20″H x 17″L x 7″D</td>

                        <td class="column-3">Edition 36</td>

                        <td class="column-4">$3,800</td>

                </tr>

                <tr>

                        <td class="column-1">Curlew Pair*<em>“High Plains Drifters”</em></td>

                        <td class="column-2">11″H x 17″L x 8″D</td>

                        <td class="column-3">Numbered</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1"></td>

                        <td class="column-2"></td>

                        <td class="column-3"></td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="section" colspan="4">HOUSTON TEXANS BULL MAQUETTES</td>

                </tr>

                <tr>

                        <td class="column-1">Three Bull Model*<em>“Spirit of the Bull”</em></td>

                        <td class="column-2">34″H x 83″L x 20″D</td>

                        <td class="column-3">Edition 12</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1">Two Bull Model*<em>“Tradition”</em></td>

                        <td class="column-2">36″H x 40″L x 23″D</td>

                        <td class="column-3">Edition 20</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1">Single Bull Model*<em>“Pride”</em></td>

                        <td class="column-2">29″H x 39″L x 17″D</td>

                        <td class="column-3">Edition 75</td>

                        <td class="column-4"></td>

                </tr>

                <tr>

                        <td class="column-1">Single Bull Model*<em>“Courage”</em></td>

                        <td class="column-2">27″H x 32″L x 17″D</td>

                        <td class="column-3">Edition 75</td>

                        <td class="column-4"></td>

                </tr>

</tbody>

</table>

and here is the CSS

HTML Code:

table#prices td.section {background-color: #b22222; color: #ffffff; font-weight: bold;}



table#prices td {border-bottom: 1px solid #CCCCCC; background-color: #ffffff; padding: 4px 8px;}



table#prices tr.column-2 {text-align: center;}

table#prices tr.column-3 {text-align: center;}

table#prices tr.column-4 {text-align: right;}

OH MY GOD... THANK YOU THANK YOU THANK YOU!

Thanks for going to so much trouble-what a godsend you are! I will be "going to school" on this.

Consider your feet to be kissed.

Juggledad-

Again, thanks! I realized the following:

section styling: style the td; I was applying type styling to a div (block).

table styling: I was styling the <p> tag; instead, style the table.
I was thinking of the copy in the table as lines of text, broken up by cell divisions, not as contents of cells, and parts of a table as a whole.
Assigning the classes pulls together the bits of code for each line/entry, and simplifies it.

Sure wish WP allowed indents on their html view! It's SO much easier to read that way.

Now the bad news: the columns are not formatting center / right.

the line: table#prices tr.column-1 {...}
shouldn't that be: table#prices td.column-1 {..}?

Not that it would help. Tried it both ways and neither worked.

Thoughts?

Quote:

the line: table#prices tr.column-1 {...}
shouldn't that be: table#prices td.column-1 {..}?

ahh the joys of fumble fingers - yes it should be 'td.column-1....

now the reason the CSS is not applying. I'm going to make a guess that you used WORD to build the table and did a copy/paste into the post or your character set is different than I use.

The issue is that all your double quotes are 'smart' double quotes which is a different hex character than the double quote so they are being ignored and the ID's and classes in the post are ignored and no CSS is applied.

Take a look at the quotes surrounding the

HTML Code:

<td class="section" colspan="5">GAME DOGS</td>

and the the line

HTML Code:

<td class=”column-1”>American Foxhounds</td>

notice the difference in the double quotes? the ones surrounding section are the right ones.

You are correct, sir! I did use Word, and now I know. The quotes correction worked.

Only problem is, somehow now the menu is screwed up! Can't figure that one out... thoughts?

WHOA! Just revisited the page in question, and when I switched to "visual" mode on Edit Page, it stripped out all my <tr></tr> tags-what's the deal? Tried it several times, and it did it each time!

AND WP isn't remembering any changes I make-I noticed the changes I'd made yesterday weren't there today, and I figured I must have forgotten to "Update" the page after editing (not very likely).

I just restarted my computer and revisited the site, and changes I'd just made were gone.

What's going on?

if I switch to visual mode I, make a change and switch back to HTML mode the table is still there. It could be one of your plugins.....

All plugins are turned off. Now it seems to remember my changes, but the menu is still mixed up.

And when I switch to visual mode in the editor, it still strips out the row tags.

I'd have to see what you are takling about, see if it happens if you switch to twenty eleven

How is the menu messed up?

you were missing a </tr> early in the table so when you switched from HTML mode to VISUAL mode, wordpress got confused and lost all the remaining rows (the WP editor is not the smartest).

You can see this it you edit the post
- at the top right of the screen click on 'Screen Options'
- - click on 'Revisions'
- go into HTML mode
- scroll down the page and select the first revision after the autosave with your ID
- scroll to the bottom and set teh radio buttions to compare that version to the firse version I added and press the 'compare' button

When you scroll down, you will see the missing </tr>

This adds to another reason why I never use the visual editor - and if I did I wold never mix using the visual and HTML editors

OK... seems to work now. I'm amazed that missing one tag could wreak so much havoc on a page...

The reason I was switching to Visual mode is because this site will be maintained by a non-programmer, who will be more comfortable with that option than the html version.

THANK you so much for your help!

Now to figure out why the menu is wonky!

not to create more work for you but...why not have each item to be sold a post with a category of 'for sale'?

Each on would have several custom fields. The user would add a new post with
- the title being the item. could even have a image of the item
- the post text the description
- a custom field for deminsions
- a custom field for edition
- a custom field for price
and there could be a caregory for 'closed'

then have a custom page that lists the posts from the 'for sale' category and style it like a table. Easy for the user to maintain, the item nake could be a line to the single post page showing the description in detail. They user doesn't worry about tables and once they change teh category to 'sold' it drops off the listings - or you could have it moved to a new listing of 'recently sold' items.

just a thought which should make it simpler for the user because you and I both know that the user is going to screw up that table and you are going to get calls about it.

<grin>
No kidding. Didn't want you to feel all your help was wasted, but after seeing what havoc one little mistake can cause, I've decided to go back to the Tables-Reloaded plugin. No way any native table of that size will survive.

Your suggestion is interesting. In the past I've done sites for artists using Dreamweaver, and set them up a certain way. I've been exploring options with WordPress, and right now I'm going to use NextGen Gallery to create galleries by subject. But I'll definitely keep this idea on file. Thanks for considering the problem!