CODEWITHSUNDEEP
htmlcss
Stefano
Stefano

Reputation: 131

Center a table in the page

I wrote this HTML/JavaScript code but I can't center the table in the page. I've tried both with align=center and with margin in style. But nothing seems to work. Even putting the table into a div.

Edit: Better description: I'm trying to take four picture from IP cameras (small pictures) and make them appear into a fullscreen browser centered and maximized on the page.

This is the code:

<body style="margin:0; background-color:black;">
<table style="height:100%; background-color:black; position:fixed;">
    <tr>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera1"/>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera2"/>
    </tr>
    <tr>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera3"/>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera4"/>
    </tr>
</table>
</body>

<script language="JavaScript">
//<!--

function reloadImage()
{
    var now = new Date();
    var Camera = new Array()
    var Camera1 = 'http://192.168.10.219/cgi-bin/wappaint?camera_no=0&animation=0&name=aa&password=11&time=1346851800&pic_size=2'
    var Camera2 = 'http://192.168.10.219/cgi-bin/wappaint?camera_no=1&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851972719.719'
    var Camera3 = 'http://192.168.10.219/cgi-bin/wappaint?camera_no=2&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851974247.247'
    var Camera4 = 'http://192.168.10.219/cgi-bin/wappaint?camera_no=3&animation=0&name=aa&password=11&time=1346851800&pic_size=2?1346851975678.678'

    if (document.images)
    {
        var image1 = new Image;
        var image2 = new Image;
        var image3 = new Image;
        var image4 = new Image;

        image1.onload = function () { document.images.Camera1.src = image1.src; }
        image2.onload = function () { document.images.Camera2.src = image2.src; }
        image3.onload = function () { document.images.Camera3.src = image3.src; }
        image4.onload = function () { document.images.Camera4.src = image4.src; }

        image1.src = Camera1 + '?' + now.getTime();
        image2.src = Camera2 + '?' + now.getTime();
        image3.src = Camera3 + '?' + now.getTime();
        image4.src = Camera4 + '?' + now.getTime();
    }
    setTimeout('reloadImage()',1000);
}

setTimeout('reloadImage()',1000);
//-->
</script>

Upvotes: 0

Views: 221

Answers (5)

Dipak
Dipak

Reputation: 12190

You should learn to write HTML first. Markup for Table goes - 

<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td>You img tag</td>
    <td>You img tag</td>
  </tr>
  <tr>
    <td>You img tag</td>
    <td>You img tag</td>
  </tr> <!-- And so on -->
</table>

You completely missed TD in your code

Here is the answer to your question

Edit:

When you are adding img tag in TD use width and height attributes, it will solve the resizing issue -

<img src="img/imageName.jpg" width="400" height="400" alt="" title="" />

And hey, I used the learning thing because you posted the question here so I assumed you are already working on HTML. Never mind! Why don't you try with HTML Fundamentals This will help you understand HTML very well! :)

Upvotes: 2

Priyank Patel
Priyank Patel

Reputation: 6996

See Demo

Here is the CSS:

    #mytable
    {
    position:fixed;
    left:50%;
    top:50%;
    //set margin-left and margin-top to get it to center.
    }

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

There is no td specified. Add td after the tr and give align="center" to the table tag". And remove the position:fixed if it is really not necessary

Check the demo here http://jsfiddle.net/2QnE9/2/

Upvotes: 1

Hkachhia
Hkachhia

Reputation: 4539

Try this

<table align="center" style="height:100%;background-color:black; position:relative;">
    <tr><td>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera1"/>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera2"/>
    </td></tr>
    <tr><td>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera3"/>
    <img height="50%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVBjTY2AAAAACAAGYY2zXAAAAAElFTkSuQmCC" name="Camera4"/>
    </td></tr>
</table>

Upvotes: 0

SimonGates
SimonGates

Reputation: 6111

You need to give it a fixed width and set margin-left and margin-right to auto and remove the fixed position from your table

EXAMPLE

width:500px;
margin-left:auto;
margin-right:auto;

Upvotes: 0

Related Questions