Display a single multi cell table as two columns

dwd2000

dwd2000

Member
Messages
163
Reaction score
0
Points
16
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/smf2/index.php?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.
 

Attachments

  • ArcadeList.template.txt
    7.3 KB · Views: 63
freecrm

freecrm

New Member
Messages
629
Reaction score
0
Points
0
dwd2000 said:
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/smf2/index.php?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.
Click to expand...


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

Code: 
<table>
 
</table>

..is the start and finish of the table.

Code: 
<tr>
 
</tr>

is the start and finish of a row

Code: 
<td>
 
</td>

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

So finished simple cell would be..

Code: 
<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)

Code: 
<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

Code: 
<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.

Code: 
<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

Code: 
<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)

Code: 
<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
 
Last edited:
dwd2000

dwd2000

Member
Messages
163
Reaction score
0
Points
16
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

freecrm

New Member
Messages
629
Reaction score
0
Points
0
dwd2000 said:
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.
Click to expand...

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!! :lol:
 
dwd2000

dwd2000

Member
Messages
163
Reaction score
0
Points
16
It might be a little easier to see what I mean, rather than try to explain it.

http://www.friends-alumni.com/test/smf2/index.php?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

xPlozion

New Member
Messages
868
Reaction score
1
Points
0
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

dwd2000

Member
Messages
163
Reaction score
0
Points
16
xPlozion said:
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.
Click to expand...

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

xPlozion

New Member
Messages
868
Reaction score
1
Points
0
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: 
<?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>';



}

?>
 
Last edited:
dwd2000

dwd2000

Member
Messages
163
Reaction score
0
Points
16
Looks great.
THANKS

I'm more of a tweaker than a coder.
I spent 3 days searching for the answer.
When finished, I'll submit it to the SMF Arcade team with you as a helper in the credits.
Thanks again.

By the way, if you're interested, you can join the site and help out.
http://www.friends-alumni.com/test/smf2/index.php
I've got some ideas that could use some help.
The SMF team in general can use your talents as well.

Actually, anyone who has coding experience of any kind are welcome to join.
 
Last edited:
xPlozion

xPlozion

New Member
Messages
868
Reaction score
1
Points
0
thanks, but i'm actually gonna be pretty busy soon, since i'm helping a new friend code an rpg, and i just started up the project management (trac) software so we can begin. that and i still have to work on mine too :D

one thing that annoys me is that it's not showing the champ <td>, thus forcing everything into 6 <td>'s instead of the 8 intended. if you took out the code for the champ, then you can remove both <th>'s above that has "champ" in it.
 
Last edited:
You must log in or register to reply here.
Top