PHP循环生成HTML表格：实现两个循环内容横向并排显示

Hey there! The issue with your current code is that you're dumping all rows from both exchanges into a single table, which makes them stack vertically. To get them side-by-side, we need to split them into separate tables and wrap them in a container that enforces horizontal layout.

Here's how to adjust your code, with clear explanations of key changes:

What We're Changing #

• Split BTC and DOGE content into two independent tables
• Use a flexbox container to line tables up horizontally (a parent table with two columns is also a compatible alternative)
• Fix invalid HTML structure for table headers
• Clean up code readability by separating formatting logic from output

Updated Full Code #

<?php 
include 'pappu.php'; 
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0"); 
header("Cache-Control: post-check=0, pre-check=0", false); 
header("Pragma: no-cache"); 

// Fetch USDT rates for USD conversion
$grab = ngegrab('https://www.cryptopia.co.nz/api/GetMarkets/USDT'); 
$json = json_decode($grab, true); 
$usd = $json['Data'][3]['AskPrice']; 

$grabb = ngegrab('https://www.cryptopia.co.nz/api/GetMarkets/USDT'); 
$jsonss = json_decode($grabb, true); 
$dogeusd = $jsonss['Data'][8]['AskPrice']; 

// Fetch BTC market data
$grabs = ngegrab('https://www.cryptopia.co.nz/api/GetMarkets/BTC'); 
$jsons = json_decode($grabs); 

// Fetch DOGE market data
$grabsz = ngegrab('https://www.cryptopia.co.nz/api/GetMarkets/DOGE'); 
$jsonsz = json_decode($grabsz); 
?>

<!-- Flex container to arrange tables side-by-side -->
<div style="display: flex; gap: 2rem;">
    <!-- BTC Exchange Table -->
    <table border="1">
        <tr>
            <th colspan="2">BTC EXCHANGE</th>
        </tr>
        <?php if ($jsons): ?>
            <?php foreach ($jsons->Data as $sam): ?>
                <?php
                $market = $sam->Label;
                $askPrice = $sam->AskPrice;
                $formattedPrice = number_format($askPrice, 8);
                $usdEquivalent = number_format($askPrice * $usd, 6);
                ?>
                <tr>
                    <td><?= $market ?></td>
                    <td><?= $formattedPrice ?> ($<?= $usdEquivalent ?>)</td>
                </tr>
            <?php endforeach; ?>
        <?php endif; ?>
    </table>

    <!-- DOGE Exchange Table -->
    <table border="1">
        <tr>
            <th colspan="2">DOGE EXCHANGE</th>
        </tr>
        <?php if ($jsonsz): ?>
            <?php foreach ($jsonsz->Data as $sam): ?>
                <?php
                $market = $sam->Label;
                $askPrice = $sam->AskPrice;
                $formattedPrice = number_format($askPrice, 8);
                $usdEquivalent = number_format($askPrice * $dogeusd, 6);
                ?>
                <tr>
                    <td><?= $market ?></td>
                    <td><?= $formattedPrice ?> ($<?= $usdEquivalent ?>)</td>
                </tr>
            <?php endforeach; ?>
        <?php endif; ?>
    </table>
</div>

Key Improvements Explained #

1. Horizontal Layout:
   • The outer <div> uses display: flex to automatically line its child tables up horizontally. The gap property adds spacing between tables for better readability.
   • For older browser compatibility, replace the flex div with a parent table:

     <table style="border-collapse: separate; border-spacing: 2rem;">
         <tr>
             <td><!-- BTC table content --></td>
             <td><!-- DOGE table content --></td>
         </tr>
     </table>
     

2. Valid HTML Structure:
   • Original code had <th> elements directly inside the table without a wrapping <tr>—this is invalid. Now headers are properly contained in a table row, with colspan="2" to span both data columns.
3. Cleaner Code:
   • Formatted price values are stored in variables before output, making the code easier to debug and modify.
   • Used shorthand <?= ?> syntax for echoing content (equivalent to <?php echo ?>) to keep the code concise.

内容的提问来源于stack exchange，提问作者Praburam