user123 user123 - 3 months ago 7
CSS Question

adjust image in table with text, too

I want to adjust the images with their respective texts below each image.

There are four images in one line. and other four in second line.

when I remove the any image from first line , then from the second line , first image should be placed to the last of the first line.

just like Queue



<table>
<tr>
<td></td>
</tr>
<tr>
<td>
<!--First Row-->
<!--Speaker 1 -->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="110">
<tbody>
<tr>
<td align="center" height="110"
valign="top" width="110">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg"
style=
"display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
"font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
"padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Mr. Mahesh
Murthy</span></p>
<p style=
"padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;">
<span class="wrap_textbox">Co-Founder at
Seefund</span></p>
</td>
</tr>
</tbody>
</table><!--Speaker 2-->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="110">
<tbody>
<tr>
<td align="center" height="100"
valign="top" width="110">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg"
style=
"display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
"font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
"padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Mr. R.
Chandrasekhar</span></p>
<p style=
"padding:0; margin:0 auto; max-width:110px;text-align: center !important; font-size: 8px;">
<span class="wrap_textbox">President at
NASSCOM</span></p>
</td>
</tr>
</tbody>
</table><!--Speaker 3 -->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="120">
<tbody>
<tr>
<td align="center" height="100"
valign="top" width="100">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455627060.jpeg"
style=
"display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Mr. Jay
Panda</span></p>
<p style=
"padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;">
<span class="wrap_textbox">Member of
Parliament</span></p>
</td>
</tr>
</tbody>
</table><!--Speaker 4 -->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="120">
<tbody>
<tr>
<td align="center" height="100"
valign="top" width="100">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg"
style=
" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Ms. Shazia
Ilmi</span></p>
<p style=
"padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;">
<span class="wrap_textbox">Spokesperson at
BJP</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr><!--More Speakers-->
<tr>
<td></td>
</tr>
<tr>
<td>
<!--Second Row-->
<!--Speaker 5 -->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="120">
<tbody>
<tr>
<td align="center" height="100"
valign="top" width="100">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455299755.jpeg"
style=
" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Mr. Alok
Bansal</span></p>
<p style=
"padding:0; margin:0 auto;text-align: center; max-width:110px; font-size: 8px;">
<span class="wrap_textbox">Co-Founder at
Policybazaar</span></p>
</td>
</tr>
</tbody>
</table><!--Speaker 6-->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="120">
<tbody>
<tr>
<td align="center" height="100"
valign="top" width="100">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455298163.jpeg"
style=
" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Mr. Arjun
Handa</span></p>
<p style=
"padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;">
<span class="wrap_textbox">Vice chairmain and
MD at Claris Life Sciences</span></p>
</td>
</tr>
</tbody>
</table><!--Speaker 7 -->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="120">
<tbody>
<tr>
<td align="center" height="100"
valign="top" width="100">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455297276.jpeg"
style=
" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
" padding: 0px; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Ms. Padmaja
Ruparel</span></p>
<p style=
"padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;">
<span class="wrap_textbox">President Indian
Angel Network</span></p>
</td>
</tr>
</tbody>
</table><!--Speaker 8 -->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="120">
<tbody>
<tr>
<td align="center" height="100"
valign="top" width="100">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455797754.png"
style=
" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Mr. Sanjay
Randhar</span></p>
<p style=
"padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;">
<span class="wrap_textbox">MD at
GVFL</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>





What I have tried is ,



<table style="width: 600px">
<tr>
<td style="text-align: center">
<span style="display: inline-block;width: 116px;margin-left: 15px">
<a href="#"><img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455797754.png" border="0" height="110" width="110" ></a>
</span>


<span style="display: inline-block;width: 116px;margin-left: 15px">
<a href="#"><img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="110" width="110" ></a>
</span>
<span style="display: inline-block;width: 116px;margin-left: 15px">
<a href="#"><img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455299755.jpeg" border="0" height="110" width="110" ></a>
</span>
<span style="display: inline-block;width: 116px;margin-left: 15px">
<a href="#"><img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455298163.jpeg" border="0" height="110" width="110" ></a>
</span>

<span style="display: inline-block;width: 116px;margin-left: 15px">
<a href="#"><img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455797754.png" border="0" height="110" width="110" ></a>
</span>
</td>
</tr>
</table>





But there is not text adjustment with respective image.

PS: I have to use
table
and inline css , only.

Thank You.

Answer

well....one solution would be to put them all in the same row, and change the display of the table and of the td elements. so they will behave like block and inline-block elements. that way, you can set 4 td on each line , even if all 8 of them are in the same row ( in HTML ) , by using width:25%;display:inline-block

i wrote CSS because it was faster and easier for me and maybe better to understand, but you can copy the CSS and use it as inline CSS .

in my example i've hidden the first td with text TITLE1 so you can see that the 5th td ( first on the second row with text TITLE5 ) moves on the first row as the 4th td

let me know if it works for you

table { width:100%;display:block;text-align:center;}
table td { width:25%;display:inline-block;margin:0;padding:0;text-align:center;vertical-align: top;}
table td img { max-width:100%;}
table td span { word-break:break-word;}
td:first-child { display:none}
<table>
<tr>
  <td><img src="http://placehold.it/350x150">
  TITLE1
  </td>
  <td><img src="http://placehold.it/350x150">
<span>TITLE2TITLE2TITLE2TITLE2TITLE2TITLE2TITLE2TITLE2</span>
  </td>
  <td><img src="http://placehold.it/350x150">
  TITLE3
  </td>
  <td><img src="http://placehold.it/350x150">
  TITLE4
  </td>
  <td><img src="http://placehold.it/350x150">
    TITLE5
  </td>
  <td><img src="http://placehold.it/350x150">
    TITLE6
  </td>
  <td><img src="http://placehold.it/350x150">
      TITLE7
</td>
<td><img src="http://placehold.it/350x150">
  TITLE8
     </td>
</tr>

</table>

Comments