Make a table start on the same line as header_问答_开发者

Make a table start on the same line as header

开发者 https://www.devze.com 2022-12-28 15:33 出处：网络

I am trying to get a table of icons appear on the same line as the header. In the HTML below, the icons appear on a separate line.

相关专题：css html-table

I am trying to get a table of icons appear on the same line as the header.

In the HTML below, the icons appear on a separate line.

I tried using 'top' attribute to move t开发者_JAVA技巧he table, but this is not a good solution because then there's an ugly space between the icons table and the rest of the document. How can I fix this?

alt text http://img541.imageshack.us/img541/9677/tableu.png

<html>
<head>
<style type="text/css">
#action-icons
{
    float:right;
    position:relative;
    border:0;
}
</style>
</head>
<body>
    <h1 class="edit">Bla bla</h1>

    <table id="action-icons">
        <tbody>
            <tr>
                <td><img width="64" height="64"/></td>
                <td><img width="60" height="60"/></td>
            </tr>
            <tr>
                <td><img width="36" height="36"/></td>
                <td><img width="36" height="36"/></td>
            </tr>
        </tbody>
    </table>

    <table width="100%" class="tasksgrid">
        <tbody>
            <tr>
                <th class='taskcell'>One</th>
                <th class='taskcell'>Two</th>
            </tr>
        </tbody>
    </table>
</body>
</html>

Put div's around it:

<html>
<head>
<style type="text/css">
#action-icons
{
    float:right;
    position:relative;
    border:0;
}
.float_left {
       float:left;
}
</style>
</head>
<body>
    <div class="float_left">
        <h1 class="edit">Bla bla</h1>
    </div>

    <div class="float_left">
        <table id="action-icons">
            <tbody>
                <tr>
                    <td><img width="64" height="64"/></td>
                    <td><img width="60" height="60"/></td>
                </tr>
                <tr>
                    <td><img width="36" height="36"/></td>
                    <td><img width="36" height="36"/></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="float_left">
        <table width="100%" class="tasksgrid">
            <tbody>
                <tr>
                    <th class='taskcell'>One</th>
                    <th class='taskcell'>Two</th>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

You can use the <thead> tag to assign values in an HTML table header. Example: http://www.w3schools.com/tags/tag_thead.asp