CODEWITHSUNDEEP
htmlcsshtml-table
BodhiByte
BodhiByte

Reputation: 209

HTML Layout issue - 3x3 table with centered image

I am trying to create a 3x3 layout for a HTML page. Ive tried multiple approaches using devs and soley a table, but cannot seem to get an even distance around the centered image and the rest of the table rows. Here is a layout representation of what I am trying to achieve:

enter image description here

<body>

<h1>Web Portal</h1>

<div>
    <table class="styled">
    <tr>
        <td><button type="button">Click Me!</button></td>
        <td><button type="button">Click Me!</button></td>
        <td><button type="button">Click Me!</button></td>
    </tr>
    </table>
</div>

<div>
    <table>
        <tr>
            <td><button type="button">Click Me!</button></td>
        </tr>
    </table>

    <img src="rais_globe.png" alt="rais_logo" height="420" width="420">

    <table>
        <tr>
            <td><button type="button">Click Me!</button></td>
        </tr>
    </table>

</div>

Upvotes: 1

Views: 10764

Answers (1)

NoobEditor
NoobEditor

Reputation: 15891

demo with css tables

HTML

<div class="table">
    <div class="row">
        <div class="cell1">row 1</div>
        <div class="cell2"></div>
        <div class="cell3"></div>
    </div>
    <div class="row">
        <div class="cell1">row 2</div>
        <div class="cell2">
            <img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
        </div>
        <div class="cell3"></div>
    </div>
    <div class="row">
        <div class="cell1">row 3</div>
        <div class="cell2"></div>
        <div class="cell3"></div>
    </div>
</div>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
    border:1px solid #000;
}
.row {
    display:table-row;
    height:100%;
}
.cell1, .cell2, .cell3 {
    display:table-cell;
    width:33%;
    height:100%;
    border:1px solid #CCC;
}
.cell2 > img {
    width:100%;
    height:auto;
}

Upvotes: 3

Related Questions