How to combine the result of two different mysql query into a single table

Question

Please i have two tables'CUSTOMER' and 'BENEFICIARY' in my database and i wish to call out some of their records,both into one table. The 'CUSTOMER' table has the 'profile_picture' column and the table 'BENEFICIARY' has the 'receiver_name' and 'receiver_id' column, finally the both has the Id and sender_id column respectively in common which is apparently the login id for the customers.

The issue is, i totally don't know how to have both records displayed in one table which i wish to have on the customer dashboard, where i want the user to his both his beneficiary names their profile images in that table.

Below is my two different queries:

FOR BENEFICIARY!

<php
include '_inc/dbconn.php';
$sender_id=$_SESSION["login_id"];
$sql="SELECT * FROM beneficiary WHERE sender_id='$sender_id' AND status='ACTIVE' ";
                $result=  mysql_query($sql) or die(mysql_error());
                while($rws=  mysql_fetch_array($result)){

                    .$rws[3]. //receiver_id
                    .$rws[4]. //receiver_name
                }
?>

FOR CUSTOMER!

<php
include '_inc/dbconn.php';
$sender_id=$_SESSION["login_id"];
$sql1="SELECT * FROM customer WHERE id='$sender_id' ";
                $result1=  mysql_query($sql1) or die(mysql_error());
                while($rows=  mysql_fetch_array($result1)){

                    .$rows[14]. //profile_pictures  
                }
?>

HTML TABLE TO BE ECHOED!

<tr>
                                                                    <td class="center">.$rows[14].</td>
                                                                    <td><span class="text-small block text-light">.$rws[3].</span><span class="text-large">.$rws[4].</span><a href="#" class="btn"><i class="fa fa-pencil"></i></a></td>
                                                                    <td class="center">
                                                                    <div>
                                                                        <div class="btn-group">
                                                                            <a class="btn btn-transparent-grey dropdown-toggle btn-sm" data-toggle="dropdown" href="#">
                                                                                <i class="fa fa-cog"></i> <span class="caret"></span>
                                                                            </a>
                                                                            <ul role="menu" class="dropdown-menu dropdown-dark pull-right">
                                                                                <li role="presentation">
                                                                                    <a role="menuitem" tabindex="-1" href="#">
                                                                                        <i class="fa fa-edit"></i> Edit
                                                                                    </a>
                                                                                </li>
                                                                                <li role="presentation">
                                                                                    <a role="menuitem" tabindex="-1" href="#">
                                                                                        <i class="fa fa-share"></i> Share
                                                                                    </a>
                                                                                </li>
                                                                                <li role="presentation">
                                                                                    <a role="menuitem" tabindex="-1" href="#">
                                                                                        <i class="fa fa-times"></i> Remove
                                                                                    </a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div></td>
                                                                </tr>

Answer 1

Use a JOIN query in Customer Table

SELECT beneficiary.receiver_name,customer.profile_picture
FROM CUSTOMER
INNER JOIN BENEFICIARY
ON BENEFICIARY.sender_id=CUSTOMER.sender_id;

Answer 2

Just join the tables:

SELECT *
FROM beneficiary b
JOIN customer c ON c.id = b.sender_id
WHERE b.sender_id='$sender_id' AND b.status='ACTIVE'

The full code:

<?php
    include '_inc/dbconn.php';
    $sender_id=$_SESSION["login_id"];
    $sql="SELECT *
        FROM beneficiary b
        JOIN customer c ON c.id = b.sender_id
        WHERE b.sender_id='$sender_id' AND b.status='ACTIVE'";
    $result = mysql_query($sql) or die(mysql_error());
    while($rws=  mysql_fetch_assoc($result)){
        echo '
        <tr>
            <td class="center">'.$rows['profile_pictures'].'</td>
            <td><span class="text-small block text-light">'.$rws['receiver_id'].'</span><span class="text-large">'.$rws['receiver_name'].'</span><a href="#" class="btn"><i class="fa fa-pencil"></i></a></td>
            <td class="center">
                <div>
                    <div class="btn-group">
                        <a class="btn btn-transparent-grey dropdown-toggle btn-sm" data-toggle="dropdown" href="#">
                            <i class="fa fa-cog"></i> <span class="caret"></span>
                        </a>
                        <ul role="menu" class="dropdown-menu dropdown-dark pull-right">
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">
                                    <i class="fa fa-edit"></i> Edit
                                </a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">
                                    <i class="fa fa-share"></i> Share
                                </a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">
                                    <i class="fa fa-times"></i> Remove
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </td>
        </tr>';
    }
?>