Zikula: A Flexible Open Source Content Management System
home | forum | contact us

Dizkus

Bottom
Aligning tables?
  • Posted: 15.03.2005, 22:36
     
    jediping
    rank:
    Helper Helper
    registered:
     November 2004
    Status:
    offline
    last visit:
    12.03.07
    Posts:
    387
    I'm outputting my data into a table that's called by a function. (Probably not the easiest way to do this, but it's always good to learn new skills, right? ;)) I want to align the cells either right or left, depending on what column they should be in. I've put in align= declarations, and they show up when I view the source, but the cells don't actually align their contents. Is there a class I need to declare in the function?

    I noticed in the adminlinks function that it calls a class, but I don't know which class to call, or if it's needed, or what to do.

    Here's my code.

    Code

    function smarty_function_track_proposalsdisplayitem($params, &$smarty)
    {
        extract($params);
        unset($params);
       
        $displayitem = "<table>";
        $displayitem .= "<tr><td align=\"right\">"._TITLE.":</td><td align=\"left\">".$item['p_title']."</td></tr>\n";
        $displayitem .= "<tr><td align=\"right\">"._INSTITUTE.": </td><td align=\"left\">".$item['institute']."</td></tr>\n";
        $displayitem .= "<tr><td align=\"right\">"._ADDRESS.": </td><td align=\"left\">".$item['address']."</td></tr>\n";
        $displayitem .= "<tr><td align=\"right\">"._PHONE.": </td><td align=\"left\">".$item['phone']."</td></tr>\n";
        $displayitem .= "<tr><td align=\"right\">"._FAX.": </td><td align=\"left\">".$item['fax']."</td></tr>\n";
        $displayitem .= "</table>";
       
        return $displayitem;
    }
  • Posted: 16.03.2005, 01:27
     
    Slugger
    rank:
    Professional Professional
    registered:
     March 2003
    Status:
    offline
    last visit:
    13.08.06
    Posts:
    1185

    jediping

    I'm outputting my data into a table that's called by a function. (Probably not the easiest way to do this, but it's always good to learn new skills, right? ;))

    Right

    jediping

    I want to align the cells either right or left, depending on what column they should be in. I've put in align= declarations, and they show up when I view the source, but the cells don't actually align their contents.

    If you're interested in learning, I think you should learn to do this with
    with CSS and get away from using tables; however, that was not your question so please excuse my editorial.

    To get your columns to align, try using fixed widths.

    jediping

    Is there a class I need to declare in the function?

    I noticed in the adminlinks function that it calls a class, but I don't know which class to call, or if it's needed, or what to do.

    As implied above, I believe using classes in your stylesheets (CSS) is the best way to go. It gives you more control and it's generally accepted that it it will improve performance as well. That's a 2-fer in my book! :D

    Now, you'll need to determine if the existing classes give you what you want. I can't very well help you with that because that's something you'll need to decide. If you have the right class defined already, use it ; if not, add it to your stylesheet and use it.

    But beware! Bloated stylesheets are not a good thing so approach this with a goal to be as efficient as possible. :wink:

    There are many tutorials available to teach you to use CSS. Start with w3schools.com and Google for more.

    Good luck!

    Slugger
  • Posted: 16.03.2005, 02:15
     
    jediping
    rank:
    Helper Helper
    registered:
     November 2004
    Status:
    offline
    last visit:
    12.03.07
    Posts:
    387
    I normally use divs for big chunks, but a table really is the way to go to display this, as it's just that--a table of information.

    I don't see why I'd need CSS in this case, since there is already a pre-defined HTML way of dealing with alignment. (I know CSS quite well, actually.) But assuming I went this route, how would I go about adding a class to a module if I end up wanting to make the module public? Don't want to have to make people alter their themes just for me! Is there an example of this in another module?
  • Posted: 16.03.2005, 06:36
     
    Slugger
    rank:
    Professional Professional
    registered:
     March 2003
    Status:
    offline
    last visit:
    13.08.06
    Posts:
    1185

    jediping

    I normally use divs for big chunks, but a table really is the way to go to display this, as it's just that--a table of information.

    I'm sorry I didn't understand. I thought since you said you were not looking for the easiest way to do this but were interested in learning. Oh well, I guess I just misunderstood. Anyway, small tables like this are better for learning alternatives to tables but you already knew that. Right?

    jediping

    I don't see why I'd need CSS in this case, since there is already a pre-defined HTML way of dealing with alignment. (I know CSS quite well, actually.)

    Wow...I really got your question wrong. If you don't need CSS, don't use it but you still might want to try fixing the width of your columns.

    jediping

    But assuming I went this route, how would I go about adding a class to a module if I end up wanting to make the module public? Don't want to have to make people alter their themes just for me! Is there an example of this in another module?


    But, but, but... if you're not going to use CSS, why is this an issue? Oh never mind, I have these conversations with my wife all the time. icon_lol

    No need to mess with the theme, just include your stylesheet or go with default styles and defer to the theme designer's vision.

    Slugger
  • Posted: 16.03.2005, 06:46
     
    mhalbrook
    rank:
    Legend Legend
    registered:
     December 1969
    Status:
    offline
    last visit:
    04.12.08
    Posts:
    6540
    CSS should still be used to define how the content behaves inside the Tables, using classes on the TDs.
  • Posted: 16.03.2005, 14:21
     
    rank:
    Moderator Moderator
    registered:
     March 2002
    Status:
    offline
    last visit:
    26.08.08
    Posts:
    7720
    Tables are still perfectly acceptable as markup provided thier used in the right context i.e. to mark up tabular data which is the case here. This is exactly what semantic markup is all about - thinking about the structure of your document and marking up that document in a way that makes logical sense; headers as headers, lists for lists, paragraphs, tables etc.

    If working with pnRender there's a very nice little plugin that can be used to handle alternative CSS clasess, alignment etc. The cycle plugin allows you to cycle through a series of pre-defined values.

    An example of it's usage can be found in many of the modules in .76 where the admin view function has alternating background colors for the rows to make it easier to scan across lines in the table. From the example module we have

    Code

    <table class="pn-admintable">
      <tr>
          <th><!--[pnml name="_EXAMPLENAME"]--></th>
          <th><!--[pnml name="_EXAMPLENUMBER"]--></th>
          <th><!--[pnml name="_OPTIONS"]--></th>
      </tr>
      <!--[section name="exampleitems" loop=$exampleitems]-->  
        <tr class="<!--[cycle values=pn-odd,pn-even]-->">
          <td><!--[$exampleitems[exampleitems].itemname|pnvarprephtmldisplay]--></td>
          <td><!--[$exampleitems[exampleitems].number|pnvarprephtmldisplay]--></td>
          <td>
            <!--[assign var="options" value=$exampleitems[exampleitems].options]-->
            <!--[strip]-->
            [<!--[section name=options loop=$options]-->
            <a href="<!--[$options[options].url|pnvarprepfordisplay]-->"><!--[pnml name=$options[options].title]--></a>
            <!--[if !$smarty.section.options.last]--> | <!--[/if]-->
            <!--[/section]-->]
            <!--[/strip]-->
          </td>
        </tr>
      <!--[/section]-->
    </table>


    The important part here is . Each row cycles between the class PN-odd and PN-even. We then define a background color for each class.

    Given that cycle just loops through each value returning it to the template it can be used in many, many cases.

    -Mark
  • Posted: 16.03.2005, 23:54
     
    jediping
    rank:
    Helper Helper
    registered:
     November 2004
    Status:
    offline
    last visit:
    12.03.07
    Posts:
    387
    Slugger, no worries--I can see now how you got confused, as I wasn't explaining as clearly as I might. I have a plugin function that I'm using to display the stuff, because it was the only way I could figure out how to do recursion with pnRender without going loony. ;)

    Reading over this, I can see that I'll either need to include my own stylesheet (which appears to be difficult to do in a module) or just bite the bullet and change my aligns to CSS. I think I'll got the latter route, but if there's an easy way to do this that I just don't know about, I'd love some input. :)

Extensions Moderation

Main Menu

Extensions Database

Documentation

Development

Login

Donate to Zikula