Make a table start on the same line as header
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
加载中,请稍侯......
精彩评论