CODEWITHSUNDEEP
htmlcss
SRY_JAVA
SRY_JAVA

Reputation: 323

How to display text and image side by side in column of a table in html

I have a table in whose column I show both a image and text.Image is being displayed on upper side and text is being displayed below it.But I want to show both side by side.Moreover I want table to be fit on screen i.e I don't want to have scroll bars.

My Html code is

<% @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 >

My output.

I want the second column text and image to be aligned side by side and table to fit the screen. Thanks in advance.

Upvotes: 2

Views: 3949

Answers (3)

SRY_JAVA
SRY_JAVA

Reputation: 323

Got it, just added

display: inline-block 

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

Upvotes: 2

tapananand
tapananand

Reputation: 4872

Make the following changes in the image tag:

add display:block and add float:left

In the text to show it side by side, just add float:left assuming text is inside a block element like a p tag.

For table to occupy full screen use width:100%;

Upvotes: 0

valicu2000
valicu2000

Reputation: 431

I think it's simpler to break the column with image and text in 2 distinct columns: 1 for the image and 1 for the text. In css you can use: table {width:100%}

Upvotes: 0

Related Questions