CODEWITHSUNDEEP
htmlcss
Çağatay Sarp Aksu
Çağatay Sarp Aksu

Reputation: 45

I can't place an image in table without breaking other cells' alignments

I am trying to put an image in my table but when I place the img tag in between <td> tags; content of neighbor cell acts like there is <br> tags on top of it.

I tried to use display:inline-block but didn't effect anything.

question: how can I make "neighboor content" stay up?

<table height="100%" width="100%" border="solid black 1px">
  <tr class="Content">
    <td class="left">
      <img src="sample.jpg" width="250px" />
    </td>
    <td>
      <table class="right">
        <tr>
          <td class="Title">
            <h2> Title of movie </h2>	
          </td>
        </tr>
        <tr class="description">
          <td>Description of movie</td>
        </tr>
        <tr class="Actors">
          <td>
            <h2> Actors of movie </h2>
          </td>
        </tr>
        <tr class="buttons">
          <td colspan="2">
            <p>Option buttons will be here.</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Here is relative CSS styles.

.content {
  background-color: white;
}
.content .left {
  vertical-align: text-top;
  width: 250px;
}
.content .right {
  vertical-align: text-top;
}

Upvotes: 0

Views: 31

Answers (2)

nvi9
nvi9

Reputation: 1893

I hope, you wanted to make the right column content aligned to top (sorry, but it is not exactly clear to me...)
So, try this:

<table height="100%" width="100%" border="solid black 1px">
  <tr class="Content">
    <td class="left">
      <img src="sample.jpg" width="250px" />
    </td>
    <td style="vertical-align: top"> <!-- Here is the "trick" -->
      <table class="right">
        <tr>
          <td class="Title">
            <h2> Title of movie </h2>	
          </td>
        </tr>
        <tr class="description">
          <td>Description of movie</td>
        </tr>
        <tr class="Actors">
          <td>
            <h2> Actors of movie </h2>
          </td>
        </tr>
        <tr class="buttons">
          <td colspan="2">
            <p>Option buttons will be here.</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Upvotes: 2

user4257136
user4257136

Reputation:

Please add an ID to table like 

<Table id="tblnotify">

use this css code 

#tblnotify td{
   vertical-align: top;    //align td to top
   padding:2px;       //it is not good view to stick on top of the table.leave a little space for a better look.
}

regds

Upvotes: 1

Related Questions