more advanced table column aligning

View: New views
4 Messages — Rating Filter:   Alert me  

more advanced table column aligning

by Arian Hojat :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message


i was requested to change my columns of a table i made from center
aligned to flush right since the table cells were numbers like $10.00
and needed to be aligned.
and I did that. but then the clients wanted the header row columns
centered over those flush right columns. kinda got stumped. i thought
easiest way would be to leave all the table cells  (header and data
rows) flush right but apply negative margins to the right side of the
header row's cells (so slightly moving those columns to the right).
That didnt seem to work (negative margins werent respected in newest
FOP). Then I changed the header columns back to center align but left
the data columns at flush right, and applied regular right margins to
each data cell. So basically moved the columns to look like they are
centered. This was alot more work.
Is there a better way to do this?

Thanks,
Arian



Re: more advanced table column aligning

by jlr :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Below is some code that I am currently using in a table for one of my projects.

I am using the attribute-set titled "detailtablecenter" when I want the data centered in the table.
For the data that I want set to the right, I use the "detailtableright" attribute-set.
In the first block, this is showing the table headers which are centered.  In the second block,
this is showing the data which is appropriately centered for the columns that are not holding
dollar amounts.  
Hope this helps.
jlr

 <xsl:attribute-set name="detailtablecenter">
            <xsl:attribute name="font-size">8pt</xsl:attribute>
            <xsl:attribute name="start-indent">.0in</xsl:attribute>
           <xsl:attribute name="end-indent">0.0in</xsl:attribute>
           <xsl:attribute name="space-after">0</xsl:attribute>
           <xsl:attribute name="space-after.maximum">1em</xsl:attribute>
           <xsl:attribute name="text-align">center</xsl:attribute>    
           <xsl:attribute name="padding-before">0.5pt</xsl:attribute>
           <xsl:attribute name="padding-after">0.5pt</xsl:attribute>
           <xsl:attribute name="padding-start">0.5pt</xsl:attribute>
           <xsl:attribute name="padding-end">0.5pt</xsl:attribute>          
    </xsl:attribute-set>


       <xsl:attribute-set name="detailtableright">
            <xsl:attribute name="font-size">8pt</xsl:attribute>
            <xsl:attribute name="start-indent">.0in</xsl:attribute>
           <xsl:attribute name="end-indent">0.0in</xsl:attribute>
           <xsl:attribute name="space-after">0</xsl:attribute>
           <xsl:attribute name="space-after.maximum">1em</xsl:attribute>
            <xsl:attribute name="text-align">right</xsl:attribute>
            <xsl:attribute name="padding-before">0.5pt</xsl:attribute>
           <xsl:attribute name="padding-after">0.5pt</xsl:attribute>
           <xsl:attribute name="padding-start">0.5pt</xsl:attribute>
           <xsl:attribute name="padding-end">0.5pt</xsl:attribute>          
    </xsl:attribute-set>
<fo:block  text-align="left" >        
          <fo:table table-layout="fixed" >                                          
          <fo:table-column column-width="20mm"/>
          <fo:table-column column-width="24mm"/>
          <fo:table-column column-width="14mm"/>
           
             <fo:table-body>
                <fo:table-row border-after-style="double" >                  
                                 <fo:table-cell xsl:use-attribute-sets="cell-padding-all" border="solid black 0.5px" background-color="rgb(232,233,207)" >      
                     <fo:block xsl:use-attribute-sets="detailtablecenter">        
                         <xsl:value-of select="header/Column6Title"/>
                     </fo:block>                                  
                 </fo:table-cell>                
                 <fo:table-cell  xsl:use-attribute-sets="cell-padding-all"  border="solid black 0.5px" background-color="rgb(232,233,207)" >                                                              
                     <fo:block xsl:use-attribute-sets="detailtablecenter">  
                          <xsl:value-of select="header/Column7Title"/>                        
                     </fo:block>  
                 </fo:table-cell>
                 <fo:table-cell xsl:use-attribute-sets="cell-padding-all" border="solid black 0.5px" background-color="rgb(232,233,207)" >        
                     <fo:block xsl:use-attribute-sets="detailtablecenter">    
                          <xsl:value-of select="header/Column8Title"/>                      
                     </fo:block>                                  
                 </fo:table-cell>                          
             </fo:table-row>        
                                                       
            </fo:table-body>
          </fo:table>
        </fo:block>      

         <fo:block  text-align="left">
          <fo:table table-layout="fixed" >                                          
          <fo:table-column column-width="20mm"/>
          <fo:table-column column-width="24mm"/>
          <fo:table-column column-width="14mm"/>
           
          <fo:table-body>
              <xsl:for-each select="header/row">        
                  <fo:table-row border-after-style="double" >                  
                     <fo:table-cell xsl:use-attribute-sets="numeric-cell" border="solid black 0.5px" >  
                      <xsl:variable name="q">
                            <xsl:value-of select="column6"/>
                      </xsl:variable>
                      <fo:block xsl:use-attribute-sets="detailtableright">  
                         <xsl:value-of select="format-number($q,'$###,###,###.0000')"/>                          
                     </fo:block>                                  
                 </fo:table-cell>                
                 <fo:table-cell  xsl:use-attribute-sets="numeric-cell"  border="solid black 0.5px" >      
                 <xsl:variable name="q">
                     <xsl:value-of select="column7"/>    
                 </xsl:variable>                                              
                 <fo:block xsl:use-attribute-sets="detailtableright">  
                    <xsl:value-of select="format-number($q,'$###,###,###.00')"/>                              
                 </fo:block>  
                 </fo:table-cell>
                 <fo:table-cell xsl:use-attribute-sets="cell-padding" border="solid black 0.5px" >  
                     <fo:block xsl:use-attribute-sets="detailtablecenter">    
                          <xsl:value-of select="column8"/>                      
                     </fo:block>                                  
                </fo:table-cell>                          
             </fo:table-row>      
Arian Hojat wrote:
i was requested to change my columns of a table i made from center
aligned to flush right since the table cells were numbers like $10.00
and needed to be aligned.
and I did that. but then the clients wanted the header row columns
centered over those flush right columns. kinda got stumped. i thought
easiest way would be to leave all the table cells  (header and data
rows) flush right but apply negative margins to the right side of the
header row's cells (so slightly moving those columns to the right).
That didnt seem to work (negative margins werent respected in newest
FOP). Then I changed the header columns back to center align but left
the data columns at flush right, and applied regular right margins to
each data cell. So basically moved the columns to look like they are
centered. This was alot more work.
Is there a better way to do this?

Thanks,
Arian


Re: more advanced table column aligning

by Tony Graham-3 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message


On Fri, May 02 2008 22:06:39 +0100, armyofda12mnkeys@... wrote:

> i was requested to change my columns of a table i made from center
> aligned to flush right since the table cells were numbers like $10.00
> and needed to be aligned.
> and I did that. but then the clients wanted the header row columns
> centered over those flush right columns. kinda got stumped. i thought
> easiest way would be to leave all the table cells  (header and data
> rows) flush right but apply negative margins to the right side of the
> header row's cells (so slightly moving those columns to the right).
> That didnt seem to work (negative margins werent respected in newest
> FOP). Then I changed the header columns back to center align but left
> the data columns at flush right, and applied regular right margins to
> each data cell. So basically moved the columns to look like they are
> centered. This was alot more work.
> Is there a better way to do this?

There's also:

   text-align="." (which may need to be text-align="'.'")

for aligning on the decimal point, although YMMV about whether your
processor does the right thing or not.

See [1], which refers to [2].

Since neither XSL 1.1 nor CSS2 say where to put the alignment character,
the XSL 2.0 requirements draft discusses specification of the alignment
position [3].

In the absence of text-align="." (and XSL 2.0), you've probably done the
best you can.

Regards,


Tony Graham                         Tony.Graham@...
Director                                  W3C XSL FO SG Invited Expert
Menteith Consulting Ltd
XML, XSL and XSLT consulting, programming and training
Registered Office: 13 Kelly's Bay Beach, Skerries, Co. Dublin, Ireland
Registered in Ireland - No. 428599   http://www.menteithconsulting.com
  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --  --
xmlroff XSL Formatter                               http://xmlroff.org
xslide Emacs mode                  http://www.menteith.com/wiki/xslide
Unicode: A Primer                               urn:isbn:0-7645-4625-2


[1] http://www.w3.org/TR/xsl11/#text-align
[2] http://www.w3.org/TR/1998/REC-CSS2/tables.html#column-alignment
[3] http://www.w3.org/TR/2008/WD-xslfo20-req-20080326/#N66218


Parent Message unknown Re: more advanced table column aligning

by David Arakelian :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message


Hi. I'm not 100% sure what you are trying to achieve without code
samples. However this may help. You can do something like this:

<table>
        <thead>
                <tr>
                        <td>Price</td>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td>10</td>
                </tr>
        </tbody>
</table>

Now can apply style to thead to make them centre aligned:

thead td { text-align:center; }
tbody td { test-align: right; }

--
      ,'/:.          David Arakelian
    ,'-/::::.        http://www.theatons.com/
  ,'--/::(@)::.      Web Security Consultant
,'---/::::::::::.    Wales
____/:::::::::::::.  
  T H E A T O N S