如何在html中的表格列中并排显示文本和图像

Question

我有一个表格，其列中我显示了图像和文本。图像显示在上方，文本显示在它下面。但我想要并排显示。而且我希望表格适合在屏幕上，即我不想要滚动条。

我的Html代码是

＆＃13;

＆＃13;

<% @page language = "java"
contentType = "text/html; charset=ISO-8859-1"
pageEncoding = "ISO-8859-1" %>
  <% @taglib uri = "http://java.sun.com/jsp/jstl/core"
prefix = "c" %>
  <% @taglib prefix = "fmt"
uri = "http://java.sun.com/jsp/jstl/fmt" %>
  < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
  < head >
  < meta http - equiv = "refresh"
content = "30" >
  < title > Insert title here < /title>
<style>


    .green {
        color: green;
        text-transform: capitalize;
    
       
       
      
    }

    .red    {
        color: red;
      
       text-transform: capitalize;
      
      
}

</div >
  < /style>
</head >

  < body style = 'margin:0;padding:0;' >

  < jsp: useBean id = "bs"
class = "beam_Status.BeamStatus_Bean" >

  < /jsp:useBean>


 <div id="loadData">

<CENTER><H1>BEAMLINE STATUS</H1 > < /CENTER>
<center>
<table  border = "1"  width="100%" height="60"> 

     <tr> 
      <th><h1><b>BEAMLINES</b > < /h1></th >
  < th > < h1 > < b > STATUS < /b></h1 > < /th> 
       
    </tr >

  < c: forEach
var = "country"
items = "${bs.beam_CurrentStatus()}" >
  < h3 > < b >
  < c: choose >
  < c: when test = "${country.value == 'IN OPERATION'}" >
  < tr >
  < td class = "green"
style = "text-transform: uppercase;" > < center > < h2 > $ {
    country.key
  } < /h2></center > < /td> 
                <td class="green" style="text-transform: uppercase; "  ><img style="vertical-align:middle;" src = "red.png" height="50" width="50"   / > < h2 > $ {
    country.value
  } < /h2></td >

  < /tr> 
   </c: when >
  < c: otherwise >
  < tr >
  < td class = "red"
style = "text-transform: uppercase; " > < center > < h2 > $ {
    country.key
  } < /h2></center > < /td> 
               <td class="red"  style="text-transform: uppercase; " ><img style="vertical-align:middle;" src = "green.png" height="50" width="50"  / > < h2 > $ {
    country.value
  } < /h2> </td >

  < /tr> 
  </c: otherwise >
  < /c:choose>
</b > < /h3>
    </c: forEach >

  < /table>
 
</center >
  < /div>
 <script>
 
  < /html >

＆＃13;

＆＃13;

＆＃13;

我的输出。

我希望第二列文本和图像并排排列并与表格对齐以适应屏幕。 提前谢谢。

Answer 1

知道了，刚刚添加了

  

display：inline-block

<h2 style="vertical-align:middle; display: inline-block;">

Answer 2

我认为用2个不同的列中的图像和文本来分解列更简单：1表示图像，1表示文本。在css中你可以使用：table {width：100％}

Answer 3

在图片代码中进行以下更改：

添加display:block并添加float:left

在文本中并排显示，只需添加float:left，假设文本位于块元素内，如p标记。

要使表格占全屏，请使用width:100%;