0

中央に配置しながら、一連のテーブルを左から右に並べて配置しようとしています。

<div>
<table border="1px"; style="float:left";>
    <!--left side Advertisement-->
    <tr>
        <td>
            <p><img src="http://www.radiorebel.net/wp-content/uploads/2013/02/RadioRebelJamMaestroAd.png"></p>
        </td>
    </tr>    
</table>

<!--Player Table Collective-->
<table border="1px"; width="500"; height="500"; style="float:left";">
    <td>
        <!--Wavestreaming.com online Status-->
        <p>Status: <span data-shoutcast-value="status"></span></p>
        <!--Wavestreaming Song Title-->
        <p>Now Playing: <span data-shoutcast-value="songtitle"></span></p>
    </td>
    <td>
        <!--Album Art and PlayerTable-->
        <p>Album Art goes here</p>
        <p>Player goes here</p>
    <!--Third Table in the Player Collective-->
    </td>
    <td>
        <p>Stuff</p>
            </br>
        <p>stuff 2</p>
            </br>
        <p>stuff 3</p>
    </td>
</table>

<!--right side advert-->
<table border="1px"; style="float:left">
    <td>
        <p><img src="http://www.radiorebel.net/wp-content/uploads/2013/02/RadioRebelJamMaestroAd.png"></p>
    </td>
</table>

私のテーブルで使用float:leftすることで、それらを隣り合わせに座らせることができましたが、テーブルを中央に配置することはできませんでした. すべてをdivで囲み、すべてを中央に配置するように指示しましたが、うまくいかないようです。どんな助けでも大歓迎です！

4

3 に答える 3

0

コンセプトは、幅を設定し、<div>margin-left と margin-right を auto に指定することです。

<!DOCTYPE html>
<html lang="en-US">
<body>
<div style="width:1020px; margin:0 auto;">
<table border="1" style="float:left">
    <!--left side Advertisement-->
    <tr>
        <td>
            <p><img src="http://www.radiorebel.net/wp-content/uploads/2013/02/RadioRebelJamMaestroAd.png"></p>
        </td>
    </tr>    
</table>

<!--Player Table Collective-->
<table border="1" width="500" height="500" style="float:left">
    <td>
        <!--Wavestreaming.com online Status-->
        <p>Status: <span data-shoutcast-value="status"></span></p>
        <!--Wavestreaming Song Title-->
        <p>Now Playing: <span data-shoutcast-value="songtitle"></span></p>
    </td>
    <td>
        <!--Album Art and PlayerTable-->
        <p>Album Art goes here</p>
        <p>Player goes here</p>
    <!--Third Table in the Player Collective-->
    </td>
    <td>
        <p>Stuff</p>
            </br>
        <p>stuff 2</p>
            </br>
        <p>stuff 3</p>
    </td>
</table>

<!--right side advert-->
<table border="1" style="float:left">
    <td>
        <p><img src="http://www.radiorebel.net/wp-content/uploads/2013/02/RadioRebelJamMaestroAd.png"></p>
    </td>
</table>
</body>
</html>
于 2013-05-31T11:14:44.750 に答える