Html table how to make all columns same height

Question

I want to display 4 or 5 boxes(vary) which occupy's 100% of the page width, so it will span start to end of page. and want height just to fit contents.

I am trying to use table for that so it will assign width for each box and fill up whole row.

Problem with code below is all divs in td are centered and does not have same height. tried all i can think of but it doesn't work. tried vertical alignment, height to 100% .....

How can i have all div in td with same height?

Also if there is another way to doing same please let me know. I am html dummy so may not using the right thing.

<table style="width: 100%; text-align:justify;">
    <tr>
        <td>
            <div style="margin-right:15px; background-color:Gray">
                 Some text here
            </div>
        </td>
        <td>
            <div style="margin-right: 15px; background-color:Gray">
                column 2 text here
            </div>
        </td>
        <td>
            <div style="margin-right: 15px; background-color:Gray">
                Column 3 text here
            </div>
        </td>
        <td>
            <div style="background-color:Gray">
                Last column text here
            </div>
        </td>
    </tr>
</table>

Answer 1

Like I've told plenty of other people, you shouldn't be using divisions inside table cells.

This will achieve the exact same effect, without the divisions:

<table style="width: 100%; text-align: justify;">
    <tr>
        <td style="margin-right: 15px; background-color: gray;">
            Some text here
        </td>
        <td style="margin-right: 15px; background-color: gray;">
            column 2 text here
        </td>
        <td style="margin-right: 15px; background-color: gray;">
            Column 3 text here
        </td>
        <td style="background-color: gray;">
            Last column text here
        </td>
    </tr>
</table>