[SOLVED] Any TABLES wizards out there?

tbaxter · #1 Oct 27, 2012, 04:03 AM

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.

juggledad · #2 Oct 27, 2012, 06:15 AM

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

tbaxter · #3 Oct 27, 2012, 02:53 PM

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.

tbaxter · #4 Oct 28, 2012, 04:39 AM

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?

juggledad · #5 Oct 28, 2012, 05:26 AM

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.

tbaxter · #6 Oct 30, 2012, 12:40 AM

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?