Table without scrolling

Question

<table style="background-color: red; width:100%; height:10%;">
            <tr style="background-color: red; width:100%;">
                <td><img src="5.jpg" alt="Paris" style="width:100%;"></td>
</table>
<div class="outer">
    <div class="inner">
        <table style="background-color: red; width:100%; height:50%;">

I want to have a picture on one page and a table with 3 rows below it. I want the height of these tables to be equal and take the whole page without scrolling. In fact, in any mobile phone that is viewed in portrait mode, the whole page should be full in height without scrolling.

            <tr style="background-color: red; width:100%; min-height:30%;">
                <td>salam</td>
            </tr>
            <tr style="background-color: blue; width:100%; min-height:30%;">
                <td>Nirman</td>
            </tr>
            <tr style="background-color: blue; width:100%; min-height:30%;">
                <td>Nirman</td>
            </tr>    
        </table>
    </div>
</div>