Display a single multi cell table as two columns

[dwd2000]

To be more specific, I'd like to display a list of games in an arcade script to show as two columns, rather than the single column it's in now.
Each row in the existing table has:

game icon | linked name/description/high scores link | personal best score | champ's score

For argument sake, I'm going to call the above as a single column of rows. I would like to make it display two columns of rows. In other words, instead of having the list showing one game per row, I'd like it to show two games per row.

I have attached the script (as a text file).

You can see the actual page at:
http://www.friends-alumni.com/test/s...?action=arcade

Although it would be nice to alter the actual script, I would also like to know how to do it for future reference.

I've searched a few sites to find out how to do it, but most of the answers I found were about database queries and not for existing tables.

Any help would be appreciated.

[freecrm]

To be more specific, I'd like to display a list of games in an arcade script to show as two columns, rather than the single column it's in now.
Each row in the existing table has:

game icon | linked name/description/high scores link | personal best score | champ's score

For argument sake, I'm going to call the above as a single column of rows. I would like to make it display two columns of rows. In other words, instead of having the list showing one game per row, I'd like it to show two games per row.

I have attached the script (as a text file).

You can see the actual page at:
http://www.friends-alumni.com/test/s...?action=arcade

Although it would be nice to alter the actual script, I would also like to know how to do it for future reference.

I've searched a few sites to find out how to do it, but most of the answers I found were about database queries and not for existing tables.

Any help would be appreciated.

This becomes simpler when you understand how tables are built up.

<table>
 
</table>

..is the start and finish of the table.

<tr>
 
</tr>

is the start and finish of a row

<td>
 
</td>

is the start and finish of a cell within the row.

So finished simple cell would be..

<table>
<tr>
<td>cell contents</td>
</tr>
</table>

The column count is dictated by the number of cells in the first row.

i.e. (2 columns)

<table>
<tr>
<td>left column cell</td>
<td>right column cell</td>
</tr>
</table>

taking this a stage further, you can then add the rows

<table>
<tr>
<td>left column cell</td>
<td>right column cell</td>
</tr>
<tr>
<td>left column cell (row 2)</td>
<td>right column cell (row 2)</td>
</tr>
<tr>
<td>left column cell (row 3)</td>
<td>right column cell (row 3)</td>
</tr>
</table>

Things only get more complex when you want to start merging columns or rows, which you can do with rowspan and colspan functions.

<table>
<tr>
<td colspan="2">merged column cell</td>
</tr>
<tr>
<td>left column cell (row 2)</td>
<td>right column cell (row 2)</td>
</tr>
<tr>
<td>left column cell (row 3)</td>
<td>right column cell (row 3)</td>
</tr>
</table>

The above code simply merges the top two cells together, but the table still thinks of them as two columns.

Also, row merging

<table>
<tr>
<td>left column cell</td>
<td>right column cell</td>
</tr>
<tr rowspan="2">
<td>left column cell (row 2&3)</td>
<td>right column cell (row 2&3)</td>
</tr>
</table>

In addition, you can nest tables into cells (split columns into 2)

<table>
<tr class="headerrow">
<td>left column cell</td>
<td>right column cell</td>
</tr>
<tr>
<td>left column cell (row 2) with split cell
     <table>
     <tr>
     <td>left split cell</td>
     <td>right split cell</td>
     </tr>
     </table>
</td>
<td>right column cell (row 2)</td>
</tr>
</table>

With this, you should be able to manipulate your tables however you want.

Hope this helps

[dwd2000]

This is probably the best table tutorial I've ever seen, but it doesn't quite answer my question. Don't get me wrong. With a little work, I can probably do it.
The script already puts the info into one column of rows. My weakness is trying to make it display 2 columns of rows.

[freecrm]

This is probably the best table tutorial I've ever seen, but it doesn't quite answer my question. Don't get me wrong. With a little work, I can probably do it.
The script already puts the info into one column of rows. My weakness is trying to make it display 2 columns of rows.

Lol...

When you say "one column of rows", do you mean multiple <tr>'s with only on <td> in each?

If this is the case, putting two sets of <td>'s into each row(<tr>) would give you "2 columns of rows".

Unless I'm still being thick!! :laugh:

[dwd2000]

It might be a little easier to see what I mean, rather than try to explain it.

http://www.friends-alumni.com/test/s...?action=arcade

The "Game List" is what I'm trying to make into two columns (one column consists of 4 rows)

As is, the game lists is too long and takes up too much space. By doubling the columns, there can be twice as many games shown with the same amount of space.

My problem is inserting the proper looping code in the proper place.

[xPlozion]

i know what you are talking about now... show us the code that is closely associated w/ that and I'll see what I/we can do.

[dwd2000]

i know what you are talking about now... show us the code that is closely associated w/ that and I'll see what I/we can do.

Actually, the whole file is attached in the first message above.
It's a text file because x10 doesn't allow php files as attachments, that I could see.

If you want to expose the code in a reply, go ahead.

[xPlozion]

ah, i forgot xD

[dwd2000]

ah, i forgot xD

We all have those days.

[xPlozion]

ok, i think i've got it. just so you know how i did this, i added a new variable in named $row, with a default value of 0. if $row was 0, then it would print <tr>, then once the loop ran through it, $row added 1. therefor if $row was 0, the second time around it became 1, and then echo'd the column end </tr> and reset the $row back to zero, thus printing the next <tr> and doing the same looping.

to make my confusing reasoning more simple, $row is 0, and prints <tr> at the beginning. it runs through, and adds 1 to $row. the next time around, it see's that $row == 1, therefor does not print <tr>, but instead prints </tr> at the end and resets itself to 0

<?php
// Version: 2.5 Beta 1.1; ArcadeList

function template_arcade_list()
{
    global $scripturl, $txt, $context, $settings, $user_info, $modSettings;

    $arcade_buttons = array(
        'random' => array(
            'text' => 'arcade_random_game',
            'image' => 'arcade_random.gif', // Theres no image for this included (yet)
            'url' => $scripturl . '?action=arcade;sa=play;random',
            'lang' => true
        ),
        'favorites' => array(
            'text' => 'arcade_favorites_only',
            'image' => 'arcade_favorites.gif',
            'url' => $scripturl . '?action=arcade;favorites',
            'lang' => true
        ),
    );

    if (isset($context['arcade']['search']) && $context['arcade']['search'])
        $arcade_buttons['search'] = array(
            'text' => 'arcade_show_all',
            'image' => 'arcade_search.gif',
            'url' => $scripturl . '?action=arcade'
        );
        
    if (!empty($modSettings['arcadeShowInfoCenter']))
    {
        echo '
        <div id="infocenterframe" class="tborder clearfix">
               <table width=100% class="tborder" border="0">
        <tr>
<td colspan=3>        
            <h3 class="catbg headerpadding">', $txt['arcade_info_center'], '</h3>
            
</td>
</tr>            
<td width=33% valign=top>
            <div class="infocenter_section">
                <h4 class="headerpadding titlebg">', $txt['arcade_latest_scores'], '</h4>
                <div class="windowbg">
                    
                    <div class="windowbg2 middletext">';
                
        if (!empty($context['arcade']['latest_scores']))
            foreach ($context['arcade']['latest_scores'] as $score) 
// Print out latest scores
                printf($txt['arcade_latest_score'], $scripturl . '?action=arcade;sa=play;game=' . $score['game_id'], $score['name'], $score['score'], $score['memberLink'], strip_tags($score['time']));
        else
            echo $txt['arcade_no_scores'];

        echo '
                    </div>
                </div>
            </div>
</td>
            
<td width=33% valign=top>            
            <div class="infocenter_section">
                <h4 class="headerpadding titlebg">', $txt['arcade_game_highlights'], '</h4>
                
                
                
                <div class="windowbg">
                    
                    <div class="windowbg2 middletext">';

        if ($context['arcade']['stats']['longest_champion'] !== false)
            echo sprintf($txt['arcade_game_with_longest_champion'], $context['arcade']['stats']['longest_champion']['member_link'], $context['arcade']['stats']['longest_champion']['game_link']), '<br />';

        if ($context['arcade']['stats']['most_played'] !== false)
            echo sprintf($txt['arcade_game_most_played'], $context['arcade']['stats']['most_played']['link']), '<br />';

        if ($context['arcade']['stats']['best_player'] !== false)
            echo sprintf($txt['arcade_game_best_player'], $context['arcade']['stats']['best_player']['link']), '<br />';

        if ($context['arcade']['stats']['games'] != 0)
            echo sprintf($txt['arcade_game_we_have_games'], $context['arcade']['stats']['games']), '<br />';

        echo '
                    </div>
                </div>
            </div>
            
</td>
            
<td width=33% valign=top>            
            
            
            <div class="infocenter_section">
                <h4 class="headerpadding titlebg">', $txt['arcade_users'], '</h4>
                <div class="windowbg">
                    
                    <div class="windowbg2 middletext">
                        ', implode(', ', $context['arcade_viewing']), '
                    </div>
                </div>
            </div>
</td>            
</tr>
</table>            
        </div>';
    }    



    // Header for Game listing
    echo '
        <div id="arcadebuttons_top" class="modbuttons clearfix margintop">
            <div class="floatleft middletext">', $txt['pages'], ': ', $context['page_index'], !empty($modSettings['topbottomEnable']) ? $context['menu_separator'] . '&nbsp;&nbsp;<a href="http://forums.x10hosting.com/scripts-3rd-party-apps/#bot"><b>' . $txt['go_down'] . '</b></a>' : '', '</div>
            ', template_button_strip($arcade_buttons, 'bottom'), '
        </div>
        
        
        
        <div class="tborder">
            <table cellspacing="1" class="bordercolor gamesframe">
                <thead>
                    <tr>';

    // Is there games?
    if (!empty($context['arcade']['games']))
    {
        echo '

                    <th class="catbg3 headerpadding"></th>
                    <th class="catbg3 headerpadding"></th>
                    <th class="catbg3 headerpadding">Your Best</th>
                    <th class="catbg3 headerpadding">Champ</th>

                    <th class="catbg3 headerpadding"></th>
                    <th class="catbg3 headerpadding"></th>
                    <th class="catbg3 headerpadding">Your Best</th>
                    <th class="catbg3 headerpadding">Champ</th>';
    }
    else
    {
        echo '
                    <th class="catbg3 headerpadding"><strong>', $txt['arcade_no_games'], '</strong></th>';
    }

    echo '
                    </tr>
                </thead>';
                
                
$lines = 0;
$row = 0; // set the row to 0 to allow us to break up the table from one game a column to 2

    foreach ($context['arcade']['games'] as $game)
    {

        if ($row == 0) echo '<tr>';

        echo '
                    <td class="icon windowbg" align="center">', $game['thumbnail'] != '' ? '
                        <a href="http://forums.x10hosting.com/scripts-3rd-party-apps/' . $game['url']['play'] . '"><img width="60" src="http://forums.x10hosting.com/scripts-3rd-party-apps/' . $game['thumbnail'] . '" alt="" /></a>' : '', '
                    </td>
                    <td class="info windowbg2">
                        <h4 class="clearfix">
                            <a href="http://forums.x10hosting.com/scripts-3rd-party-apps/', $game['url']['play'], '">', $game['name'], '</a>';

        // Favorite link (if can favorite)
        if ($context['arcade']['can_favorite'])
            echo '
                            <span class="favorite"><a href="http://forums.x10hosting.com/scripts-3rd-party-apps/', $game['url']['favorite'], '" onclick="arcade_favorite(', $game['id'] , '); return false;">
                                ', !$game['is_favorite'] ?
                                '<img id="favgame' . $game['id'] . '" src="http://forums.x10hosting.com/scripts-3rd-party-apps/' . $settings['images_url'] . '/favorite.gif" alt="' . $txt['arcade_add_favorites'] . '" />' :
                                '<img id="favgame' . $game['id'] . '" src="http://forums.x10hosting.com/scripts-3rd-party-apps/' . $settings['images_url'] . '/favorite2.gif" alt="' . $txt['arcade_remove_favorite'] .'" />', '
                            </a></span>';
    echo '
                        </h4>
                        <p class="smalltext clearfix">
                            <span class="game_left">';

        // Is there description?
        if (!empty($game['description']))
            echo '
                                ', $game['description'], '<br />';

        // Does this game support highscores?
        if ($game['highscore_support'])
            echo '
                                <a href="http://forums.x10hosting.com/scripts-3rd-party-apps/' . $game['url']['highscore'] . '">' . $txt['arcade_viewscore'] . '</a>';

        echo '
                            </span>
                            <span class="game_right">';

        // Rating
        if ($game['rating2'] > 0)
            echo str_repeat('<img src="http://forums.x10hosting.com/scripts-3rd-party-apps/' . $settings['images_url'] . '/star.gif" alt="*" />' , $game['rating2']), str_repeat('<img src="http://forums.x10hosting.com/scripts-3rd-party-apps/' . $settings['images_url'] . '/star2.gif" alt="" />' , 5 - $game['rating2']), '<br />';

        // Category
        if (!empty($game['category']['name']))
            echo '
                                <a href="http://forums.x10hosting.com/scripts-3rd-party-apps/', $game['category']['link'], '">', $game['category']['name'], '</a><br />';

        echo '
                            </span>
                        </p>
                    </td>';

        // Show personal best and champion only if game doest support highscores
        if ($game['is_champion'] && !$user_info['is_guest'])
            echo '
                    <td class="score windowbg">
                        ', $game['is_personal_best'] ? $game['personal_best'] :  $txt['arcade_no_scores'], '
                    </td>';

        if ($game['is_champion'])
            echo '
                    <td class="score windowbg">
                        ', $game['champion']['member_link'], '<br />', $game['champion']['score'], '
                    </td>';

        elseif (!$game['highscore_support'])
            echo '
                    <td class="score2 windowbg" colspan="', $user_info['is_guest'] ? '1' : '2', '">', $txt['arcade_no_highscore'], '</td>';
        else
            echo '
                    <td class="score2 windowbg" colspan="', $user_info['is_guest'] ? '1' : '2', '">', $txt['arcade_no_scores'], '</td>';

        if ($row == 0)  // first "column" should add one 
            $row++;
        else        // after the first column is added and the value is increased, end the row and reset the value back to 0
        {
            echo '</tr>';
            $row = 0;
        }


        }


    echo '
            </table>
        </div>
        
        
        <div id="arcadebuttons_bottom" class="modbuttons clearfix marginbottom">
            <div class="floatleft middletext">', $txt['pages'], ': ', $context['page_index'], !empty($modSettings['topbottomEnable']) ? $context['menu_separator'] . '&nbsp;&nbsp;<a href="http://forums.x10hosting.com/scripts-3rd-party-apps/#top"><strong>' . $txt['go_up'] . '</strong></a>' : '', '</div>
            ', template_button_strip($arcade_buttons, 'top'), '
        </div>';



}

?>