html - adjust image in table with text, too -
i want adjust images respective texts below each image.
there 4 images in 1 line. , other 4 in second line.
when remove image first line , second line , first image should placed last of first line.
just 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 @ 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 @ 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 @ 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 @ 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 , md @ 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 @ gvfl</span></p> </td> </tr> </tbody> </table> </td> </tr> </table>what have tried ,
<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 not text adjustment respective image.
ps: have use table , inline css , only.
thank you.
well....one solution put them in same row, , change display of table , of td elements. behave block , inline-block elements. way, can set 4 td on each line , if 8 of them in same row ( in html ) , using width:25%;display:inline-block
i wrote css because faster , easier me , maybe better understand, can copy css , use inline css .
in example i've hidden first td text title1 can see 5th td ( first on second row text title5 ) moves on first row 4th td
let me know if works 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
Post a Comment