CSS table cell with image in the middle and text at the of the cell bottom - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Cell

Description

CSS table cell with image in the middle and text at the of the cell bottom

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
table {<!--from w w w  .  j  av  a  2 s  .  co m-->
   width:100%;
}

td {
   text-align:center;
}

td img {
   display:block;
   margin:0 auto;
}
</style> 
 </head> 
 <body> 
  <table> 
   <tbody> 
    <tr> 
     <td> <a>Lore</a> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> <p>Lorem ipsum dolor sit amet</p> </td> 
     <td> <a>Lore</a> <img src="https://www.java2s.com/style/demo/Firefox.png"> <p>Lorem ipsum dolor sit amet</p> </td> 
     <td> <a>Lore</a> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> <p>Lorem ipsum dolor sit amet</p> </td> 
    </tr> 
    <tr> 
     <td> <a>Lore</a> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> <p>Lorem ipsum dolor sit amet</p> </td> 
     <td> <a>Lore</a> <img src="https://www.java2s.com/style/demo/Opera.png"> <p>Lorem ipsum dolor sit amet</p> </td> 
     <td> <a>Lore</a> <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> <p>Lorem ipsum dolor sit amet</p> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials