html - 表をページの中央に配置する

Question

この HTML/JavaScript コードを書きましたが、テーブルをページの中央に配置できません。align=center と margin のスタイルの両方を試しました。しかし、何も機能していないようです。テーブルをdivに入れても。

編集: より良い説明: IP カメラ (小さな写真) から 4 つの写真を撮り、それらをページの中央に最大化されたフルスクリーンブラウザーに表示しようとしています。

これはコードです：

<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>

score 2 · Accepted Answer

HTML最初に書くことを学ぶべきです。テーブルのマークアップは次のようになります -

<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>

TDコードを完全に見逃した

これがあなたの質問への答えです

編集：

使用中のimgタグを追加すると、サイズ変更の問題が解決されます-TDwidth and height attributes

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

そしてねえ、あなたがここに質問を投稿したので、私は学習を使用したので、あなたはすでに HTML に取り組んでいると思いました。どうでも！HTML の基礎を試してみませんか。これは HTML をよく理解するのに役立ちます。:)

score 1 · Accepted Answer

td が指定されていません。tr の後に td を追加し、テーブルタグに指定します"。本当に必要ない場合はalign="center"削除しますposition:fixed

ここでデモを確認してくださいhttp://jsfiddle.net/2QnE9/2/

score 0 · Accepted Answer

固定幅を指定し、margin-left と margin-right を auto に設定し、テーブルから固定位置を削除する必要があります

例

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

score 0 · Accepted Answer

デモを見る

は次のCSSとおりです。

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

score 0 · Accepted Answer

これを試して

<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>

html - 表をページの中央に配置する

5 に答える 5

Related

Reference