如何在表格旁边添加图像

Question

我想在表格旁边添加一个图像，这样它就显示了一个img。

我试着做img浮动左，但它似乎不工作。如果有人能设置一个值，让它与表并行或在表旁边浮动，那就太好了

我的代码是:

#toppings {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: -10px;
}
#toppings td, #toppings th {
border: 1px solid #ddd;
padding: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#toppings th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
background-color: #000000;
color: white;
}

<table id="toppings">
<tr>
<th>Rank</th>
<th>Team</th>
<th>Record</th>
</tr>
<tr>
<td>1</td>
<td>Yugoslavia</td>
<td>180-2</td>
</tr>
<tr>
<td>2</td>
<td>Argentina</td>
<td>172-10</td>
</tr>
<tr>
<td>3</td>
<td>Germany</td>
<td>160-22</td>
</tr>
</table>

感谢

Answer 1

这将工作…

HTML:
图像被一个id为#imgdiv的div包裹，表被另一个id为div的#datadiv包裹，并且它们都被一个id为#container的div包裹。

<div id="container">
<div id="imgdiv">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" width="100px"/>
</div>
<div id="datadiv">
<table>
<tr>
<th>Rank</th>
<th>Team</th>
<th>Record</th>
</tr>
<tr>
<td>1</td>
<td>Yugoslavia</td>
<td>180-2</td>
</tr>
<tr>
<td>2</td>
<td>Argentina</td>
<td>172-10</td>
</tr>
<tr>
<td>3</td>
<td>Germany</td>
<td>160-22</td>
</tr>
</table>
</div>
</div>

CSS:
添加#imgdiv#datadiv#container的样式。

#toppings {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: -10px;
}
#toppings td, #toppings th {
border: 1px solid #ddd;
padding: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#toppings th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
background-color: #000000;
color: white;
}
#imgdiv
{
float:left;
}
#datadiv
{
float:right
}
#container
{
display: inline-block
}

Answer 2

由于没有在任何地方提到，我假设您必须将图像对齐到表的右侧，因为float:left将用于将图像对齐到表的左侧。

要将图像对齐到表的右侧，在图像和表上都使用display:inline-block。此外，您还可以使用vertical-align:top将图像的顶部与表格的顶部对齐。

下面是完整的代码:

<table id="toppings">
<tr>
<th>Rank</th>
<th>Team</th>
<th>Record</th>
</tr>
<tr>
<td>1</td>
<td>Yugoslavia</td>
<td>180-2</td>
</tr>
<tr>
<td>2</td>
<td>Argentina</td>
<td>172-10</td>
</tr>
<tr>
<td>3</td>
<td>Germany</td>
<td>160-22</td>
</tr>
</table>
<img className="testtableimage" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

CSS代码

#toppings {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: -10px;
display:inline-block;
}
#toppings td, #toppings th {
border: 1px solid #ddd;
padding: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#toppings th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
background-color: #000000;
color: white;
}
.testtableimage{display:inline-block;vertical-align:top;width:200px;}