styling table header

jags

unread,

Apr 24, 2008, 1:02:32 PM4/24/08

to Haml

hi guys i a newbie adapting haml working on ror
i have a table
%tr
%th Image
%th Vendor
%th Name
%th Desc
%th Price
%th Qty avl
%th views
%th Expiry_date
%th Distance (miles)

i want to specify column width to the headers and also specify a
background image to a column [views]

pls help

Jarrod Spillers

unread,

Apr 24, 2008, 1:11:16 PM4/24/08

to ha...@googlegroups.com

Straight from the HAML docs:

http://haml.hamptoncatlin.com/docs/rdoc/classes/Haml.html

{}

Brackets represent a Ruby hash that is used for specifying the attributes of an element. It is literally evaluated as a Ruby hash, so logic will work in it and local variables may be used. Quote characters within the attribute will be replaced by appropriate escape sequences. The hash is placed after the tag is defined. For example:

  %head{ :name => "doc_head" }
    %script{ 'type' => "text/" + "javascript",
             :src   => "javascripts/script_#{2 + 7}" }

is compiled to:

  <head name="doc_head">
    <script src='javascripts/script_9' type='text/javascript'>
    </script>
  </head>

so while you COULD do something like:

%table{ :width => 400, :background => '/images/foo.gif' }

that defeats the overall philosophy of separating structure from presentation. I would STRONGLY recommend putting widths and backgrounds and that sort of thing into your stylesheets instead of burying it in your markup... read this article for more on how to properly markup a table without adding in a bunch of deprecated attributes - it should shed some light on the subject.

http://www.456bereastreet.com/archive/200410/bring_on_the_tables/

- Jarrod Spillers

Sean Cribbs

unread,

Apr 24, 2008, 1:36:32 PM4/24/08

to ha...@googlegroups.com

There's always the <col> tag, which I use frequently to adjust column
widths. Put them at the top of your table:

%table
%col{:width => "200px"}/
%col{:width => "75px"}/

etc.

Sean

Jarrod Spillers

unread,

Apr 24, 2008, 2:10:44 PM4/24/08

to ha...@googlegroups.com

Its never a good practice to mix your presentation (ie: widths, font styles, paddings, etc) with your structure.

- Jarrod Spillers

Sean Cribbs

unread,

Apr 24, 2008, 2:15:55 PM4/24/08

to ha...@googlegroups.com

I agree, but tables are nasty things that are notoriously hard to style. Do what works for you.

Sean

Jarrod Spillers

unread,

Apr 24, 2008, 2:18:24 PM4/24/08

to ha...@googlegroups.com

Its not that hard...

http://www.456bereastreet.com/archive/200410/bring_on_the_tables/

this is how to do it correctly and accessibly.

On Thu, Apr 24, 2008 at 2:15 PM, Sean Cribbs <seanc...@gmail.com> wrote:

I agree, but tables are nasty things that are notoriously hard to style. Do what works for you.

Sean

Jarrod Spillers wRrote:

jags

unread,

Apr 25, 2008, 4:12:03 AM4/25/08

to Haml

hi guys thanks all the support
its not working for me
here's my modified code

i also want to show a background image(eye.png) in the %th for column
product views
its simply showing all as text in the %th's

%table
%tr
%th {:width => "200px"}
%th Name{:width => "200px"}
%th Desc{:width => "200px"}
%th Price{:width => "50px"}
%th Qty avl{:width => "50px"}
%th { :width => 50, :background => '/images/eye.png' }

- @products.each do |product|
%tr{:class => cycle("even", "odd")}
%td= link_to h (product.user.name), user_url(product.user)
%td= h product.name
%td= h product.description
%td= h product.price
%td= h product.qty_avl
%td= h product.views

pls help

Evgeny

unread,

Apr 25, 2008, 5:28:50 AM4/25/08

to ha...@googlegroups.com

There should not be a space before { afaik,
and the content of the td/th should be after the {.