ForumCommunity

Wiki - Table

    How and where to create the table
    To generate a table with graphics equal to the skin in use, simply access the administration panel, under the heading Manage HTML code > Tables generator (it is located on top, before the box, it is the third link)
    Simply specify the number of rows and columns you want, whether or not you want the space for the subtitles of the columns and the text alignment and this tool creates the HTML code of the table to be included in the box as you like in Manage HTML code.

    How to modify the table
    The code provided by generator, has essentially three parts: the blue and green should always be present, in full, the red part is that relating to the contents of your table, and then varies according to the set parameters.

    CITAZIONE

    TITLE

    COLUMN1
     



    The title
    To give a title to your table, just change the word TITLE a metà della parte blu, in the middle of the blue, if you do not want to give a title to the table, it is recommended to insert   in order to avoid possible display errors.
    If you want to change color or style of the title, since we are working in HTML, it is suggested watching the appropriate entry in the wiki.

    The contents
    To enter the contents in the table, you should change the word COLUMN ? (where ? is the number of the column) replacing it with the chosen text.

    WARNING!: HTML lines are marked with the tag <tr> and columns with <td>, it is good to remember that each "<tr>" tag must be matched by a "<td>" tag, and tags must be closed in reverse order of opening.
    What does it mean "to close a tag"? It means rewriting the tag by putting a slash ( / ) after the opening angle bracket ( < )
    So according to the above said, the correct statement is only this: <tr> <td> .. </td> </tr>

    Obviously in the row may be included multiple columns, repeating the tags <td> .. </td> after the last column.
    Example: <tr> <td> column 1 </td> <td> column 2 </td> </tr>

    Something similar to the previous one: if the table contains more rows after the closing tag </tr> we can find other 'blocks' that set out the lines.
    Example:
    <tr> <td> column 1 line 1 </td> <td> column 2 line 1 </td> </tr>
    <tr> <td> column 1 line 2 </td> <td> column 2 line 2 </td> </tr>

    WARNING!: to ensure that a column spans multiple columns not just enter a single <td> .. </td> must be added the attribute colspan.
    This attribute has this statement: <td colspan="?" > .. </td> where ? should be replaced with the number of columns you wish to appear in one line.
    Example 1:


    Code:
    CODICE
    <table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center">

    <div class="mtitle">COLSPAN ON WHOLE COLUMN</div>

    </td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr><td class="mleft"></td><td><table class="mainbg" style="text-align:left;width:100%" cellpadding="4" cellspacing="1">

    <tr title="LINE1">
    <td class="ww" colspan="2">SINGLE COLUMN</td>
    </tr>

    <tr title="LINE2">
    <td class="ww">COLUMN1</td>
    <td class="aa">COLUMN2</td>
    </tr>

    </table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center">&nbsp;</td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table>


    Example 2:


    CODICE
    <table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center">

    <div class="mtitle">COLSPAN ON ONE SIDE</div>

    </td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr><td class="mleft"></td><td><table class="mainbg" style="text-align:left;width:100%" cellpadding="4" cellspacing="1">

    <tr title="LINE1">
    <td class="aa" colspan="2">COLUMN2</td>
    <td class="ww">COLUMN3</td>
    </tr>

    <tr title="LINE2">
    <td class="ww">COLUMN1</td>
    <td class="aa">COLUMN2</td>
    <td class="ww">COLUMN3</td>
    </tr>

    </table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center">&nbsp;</td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table>


    If, instead, you want to merge several rows, you use the attribute rowspan which works in a manner similar to the previous one: it is inserted inside the column but in this case you delete the unneeded column in the row below.
    Example 1:


    Code:
    CODICE
    <table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center">

    <div class="mtitle">TITLE</div>

    </td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr><td class="mleft"></td><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1">

    <tr title="LINE1">
    <td class="ww">COLUMN1</td>
    <td class="aa">COLUMN2</td>
    <td class="ww" rowspan="2">COLUMN3</td>
    </tr>

    <tr title="LINE2">
    <td class="ww">COLUMN1</td>
    <td class="aa">COLUMN2</td>
    </tr>

    <tr title="LINE3">
    <td class="ww" colspan="3">SINGLE COLUMN</td>
    </tr>

    </table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center">&nbsp;</td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table><br><br>

    Example 2:


    Code:
    CODICE
    <table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center">

    <div class="mtitle">TITLE</div>

    </td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr><td class="mleft"></td><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1">

    <tr title="LINE1">
    <td class="ww" rowspan="2">LEFT COLUMN</td>
    <td class="aa">CENTRAL COLUMN 1</td>
    <td class="ww" rowspan="2">RIGHT COLUMN</td>
    </tr>

    <tr title="LINE2">
    <td class="ww">CENTRAL COLUMN 2</td>
    </tr>

    </table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center">&nbsp;</td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table><br><br>


    Subtitles
    The subtitles are inserted by the generator just above the first row of columns, whatever the number entered.
    If you need to add subtitles also in the columns below, the code to use is the following and ust be inserted before the block of the line:
    CODICE
    <tr>
    <td class="title">COLUMN SUBTITLE 1</td>
    </tr>

    WARNING!: Remember to include as many columns of the subtitle, as the number of columns of the table, if you want to extend a subtitle on multiple columns using the attribute colspan.

    Example 1:


    Code:
    CODICE
    <table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center">

    <div class="mtitle">TITLE</div>

    </td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr><td class="mleft"></td><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1">

    <tr>
    <td class="title">COLUMN SUBTITLE 1</td>
    <td class="title">COLUMN SUBTITLE 2</td>
    <td class="title">COLUMN SUBTITLE 3</td>
    </tr>

    <tr title="LINE1">
    <td class="ww">COLUMN1</td>
    <td class="aa">COLUMN2</td>
    <td class="ww">COLUMN3</td>
    </tr>

    <tr>
    <td class="title">COLUMN SUBTITLE 1</td>
    <td class="title">COLUMN SUBTITLE 2</td>
    <td class="title">COLUMN SUBTITLE 3</td>
    </tr>

    <tr title="LINE2">
    <td class="ww">COLUMN1</td>
    <td class="aa">COLUMN2</td>
    <td class="ww">COLUMN3</td>
    </tr>

    </table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center">&nbsp;</td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table><br><br>

    Example 2:


    Code:
    CODICE
    <table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center">

    <div class="mtitle">TITLE</div>

    </td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr><td class="mleft"></td><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1">

    <tr>
    <td class="title" colspan="3">SINGLE COLUMN SUBTITLE</td>
    </tr>

    <tr title="LINE1">
    <td class="ww" colspan="3">SINGLE COLUMN</td>
    </tr>

    <tr>
    <td class="title">COLUMN SUBTITLE 1</td>
    <td class="title">COLUMN SUBTITLE 2</td>
    <td class="title">COLUMN SUBTITLE 3</td>
    </tr>

    <tr title="LINE2">
    <td class="ww">COLUMN1</td>
    <td class="aa">COLUMN2</td>
    <td class="ww">COLUMN3</td>
    </tr>

    </table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center">&nbsp;</td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table><br><br>


    Defining cells height or width
    Just enter the parameters: height="??" (for height) and width="??" (for width) inside the column, instead of ?? you can put measures in both pixel and percentage. As the community uses fluid templates, it is recommended to use the values in percentage for the width, but remember that the sum of the values it should return 100%.
    Example:
    CODICE
    <tr title="LINE1">
    <td class="ww" width="25%">COLUMN1</td>
    <td class="aa" width="50%">COLUMN2</td>
    <td class="ww" width="25%">COLUMN3</td>
    </tr>


    Preview:


    Code:
    CODICE
    <table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center">

    <div class="mtitle">TITLE</div>

    </td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr><td class="mleft"></td><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1">

    <tr title="LINE1">
    <td class="ww" width="25%">COLUMN1</td>
    <td class="aa" width="50%">COLUMN2</td>
    <td class="ww" width="25%">COLUMN3</td>
    </tr>

    </table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center">&nbsp;</td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table><br><br>


    Inserting a custom background
    To insert a custom background in your table, you have to take the tag table before <tr tilte="LINE1"> which is as follows:
    CODICE
    <table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1">

    Include within the attribute "style" the property: ;background-image:url(http://..); where, instead of http://.. add the URL of your picture.
    In addition, you must remove class="aa" and class="ww" from your table columns, getting something like this:
    CODICE
    <table class="mainbg" style="text-align:center; width:100%; background-image:url(http://img.forumfree.net/style_images/37/sfondo.gif);" cellpadding="4" cellspacing="1">
    <tr title="LINE1">
    <td>COLUMN1</td>
    </tr>


    Example:


    Code:
    CODICE
    <table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center">

    <div class="mtitle">TITLE</div>

    </td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr><td class="mleft"></td><td><table class="mainbg" style="text-align:center; width:100%; background-image:url(http://img.forumfree.net/style_images/37/sfondo.gif);" cellpadding="4" cellspacing="1">

    <tr title="LINE1">
    <td colspan="2">COLUMN1</td>
    </tr>

    <tr>
    <td class="title">COLUMN SUBTITLE 1</td>
    <td class="title">COLUMN SUBTITLE 2</td>
    </tr>

    <tr title="LINE2">
    <td>COLUMN1</td>
    <td>COLUMN2</td>
    </tr>

    </table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center">&nbsp;</td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table><br><br>


    Including a scrollbar
    To insert a scrollbar inside a cell, just insert immediately after <td class="??"> (where instead of ?? you can find aa or ww) the following code:
    CODICE
    <div style="overflow:auto; height:100px;">
    ALL CONTENT OF CELL HERE
    </div>

    If you want to vary the height, simply increase or decrease the value: 100px.


    Useful links