0

I would like to get the progress image and on the same line the schedule for event.

I would like to have an output , just as in image.

Here is the image

I want the output like this.

<table>
  
   <tr>
                    <td height="20" style="padding-top: 30px;">
                        <table class="bg-color1" style="width: 600px;text-align: center;margin: 0 auto;background-color: #ffffff; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                            <tbody>
                            <tr style="">
                                <td width="5%" valign="top" style="border: none;mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse; text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 15px;letter-spacing: 0px;vertical-align: middle;">
                                    <span style="text-align: right;">

                                    </span>
                                </td>

                                <td width="10%" valign="top" style="border: none;mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse; text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 15px;letter-spacing: 0px;vertical-align: middle;">
                                    <span style="text-align: right;">
                                        9:30
                                    </span>
                                </td>

                                <td width="2%" valign="top" style="mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 18px;letter-spacing: 0px;padding-left: 70px;padding-top: 10px;">

                                </td>

                                <td width="20%" style=" background: #fa4b00; mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;letter-spacing: 0px;text-transform: uppercase;text-align: center;">
                                    <img src="../calender.png" width="12" height="12" style="vertical-align: middle;">

                                    <span style=" font-weight:600;font-size:12px; line-height:12px;color: white;text-align: center;text-decoration: none;-webkit-text-size-adjust: none;line-height: 24px; vertical-align:middle;text-transform:uppercase;font-family: 'proxima_novasemibold', Arial, sans-serif;">
                                        Day 1
                                    </span>

                                </td>

                                <td width="68%" valign="top" style="border: none;mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse; text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 15px;letter-spacing: 0px;vertical-align: middle;">
                                    <span style="text-align: right;">

                                    </span>
                                </td>



                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>



                <tr>
                    <td height="20" style="padding-top: 30px;">
                        <table class="bg-color1" style="width: 600px;text-align: center;margin: 0 auto;background-color: #ffffff; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                            <tbody>
                            <tr style="">
                                <td width="5%" valign="top" style="border: none;mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse; text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 15px;letter-spacing: 0px;vertical-align: middle;">
                                    <span style="text-align: right;">

                                    </span>
                                </td>

                                <td width="10%" valign="top" style="border: none;mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse; text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 15px;letter-spacing: 0px;vertical-align: middle;">
                                    <span style="text-align: right;">
                                       
                                    </span>
                                </td>

                                <td width="2%" align="right" valign="middle" style="mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 18px;letter-spacing: 0px;padding-left: 60px;">
                                    <img src="https://i.stack.imgur.com/uLRTb.png"style="vertical-align:middle;" />
                                </td>

                                <td width="78%" style=" background: #fa4b00; mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;letter-spacing: 0px;padding-top: 0px;text-transform: uppercase;text-align: left;">

                                    <span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px; Margin-left: 10px;">08 - 30 : 09 - 30 </span>
                                    <br>
                                    <span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px; Margin-left: 10px; text-transform: uppercase;"> Tea Registration & Networking </span>

                                </td>

                                <td width="10%" valign="top" style="border: none;mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse; text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 15px;letter-spacing: 0px;vertical-align: middle;">
                                    <span style="text-align: right;">

                                    </span>
                                </td>

                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>




                <tr>
                    <td height="20" style="padding-top: 30px;">
                        <table class="bg-color1" style="width: 600px;text-align: center;margin: 0 auto;background-color: #ffffff; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                            <tbody>
                            <tr style="">
                                <td width="5%" valign="top" style="border: none;mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse; text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 15px;letter-spacing: 0px;vertical-align: middle;">
                                    <span style="text-align: right;">

                                    </span>
                                </td>

                                <td width="10%" valign="top" style="border: none;mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse; text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 15px;letter-spacing: 0px;vertical-align: middle;">
                                    <span style="text-align: right;">
                                       
                                    </span>
                                </td>

                                <td width="2%" valign="top" style="mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 18px;letter-spacing: 0px;padding-left: 70px;padding-top: 10px;">
                                </td>

                                <td width="78%" style=" background: #fa4b00; mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;padding-top: 0px;text-transform: uppercase;text-align: left;">

                                    <span  style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px; padding-left: 10px;">9:30 - 9:40 </span><br>
                                    <span  style="color: white;text-align: left;letter-spacing:0px;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px; padding-left: 10px; text-transform: uppercase;"> Opening Remarks & Conference Introduction </span><br>
                                    <span style="padding-left: 10px;"><img src="http://www.hubilo.com/eventApp/ws/images/speaker/profile/thumb/2712_1455301848.jpeg" width="25" height="25" style="border-radius:50%; border: 1px solid white; "></span>

                                </td>

                                <td width="10%" valign="top" style="border: none;mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse; text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 15px;letter-spacing: 0px;vertical-align: middle;">
                                    <span style="text-align: right;">

                                    </span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>

  
  </table>

Here is the image for progress bar.

Progress bar image

Any help would be grateful.

Thank You.

2 Answers2

0

Maybe something like this is what you are looking for?

<table style="background-color:white;">
<tr>
<th style="background-image:url('https://i.stack.imgur.com/9aER9.png');background-position: center;padding-left: 60px;padding-bottom:90px;"></th>
<th style="text-align:left;"><img src="https://i.stack.imgur.com/uLRTb.png"><span style="background: #fa4b00;color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px;padding:20px;">Day</span></th>
</tr>
<tr>
<td width="2%" align="right" valign="middle" style="border:0px!important;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 18px;letter-spacing: 0px;padding-left: 60px;padding-bottom:90px;background-image:url('https://i.stack.imgur.com/9aER9.png');background-position: center;"></td>

                                <td width="78%" style="border:0px!important;text-transform: uppercase; font-family: 'open sans', arial, sans-serif;padding-top: 0px;text-transform: uppercase;text-align: left;">
<img src="https://i.stack.imgur.com/uLRTb.png">
                                    <span style="border:0px!important;background: #fa4b00;color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px;padding:20px;margin-left:-5px;">08 - 30 : 09 - 30 <br>Tea Registration & Networking </span></td>
</tr>
<tr>
<td width="2%" align="right" valign="middle" style="border:0px!important;mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 18px;letter-spacing: 0px;padding-left: 60px;padding-bottom:90px;background-image:url('https://i.stack.imgur.com/9aER9.png');background-position: center;"></td>

                                <td width="78%" style="border:0px!important;text-transform: uppercase; font-family: 'open sans', arial, sans-serif;padding-top: 0px;text-transform: uppercase;text-align: left;">
<img src="https://i.stack.imgur.com/uLRTb.png" style="margin-bottom:15px;">
                                    <span style="border:0px!important;background: #fa4b00;color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px;padding:20px;margin-left:-5px;">9:30 - 9:40 <br>Opening Remarks & Conference Introduction <br><img src="http://www.hubilo.com/eventApp/ws/images/speaker/profile/thumb/2712_1455301848.jpeg" width="25" height="25" style="border-radius:50%; border: 1px solid white; "></span></td>
</tr>
</table>
NickyTheWrench
  • 3,150
  • 1
  • 23
  • 35
  • exactly... thank you.. but one thing is that. there is a little space between that progress image. so can it be filled? just like in the image. –  Sep 06 '16 at 09:20
  • Just add a `margin-top` to the Image. Like this; `` – Pascal Boschma Sep 06 '16 at 12:29
0

First off, this isn't tabular data so if possible don't use a table.

You can get all the design elements you need (the vertical line, the circle with a dot in the middle, and the orange triangles) with CSS alone, using pseudo-elements (see the beginners' explanation on w3schools and the more in-depth ones on MDN).

The non-table thing you're looking to style is a list, so here's a solution using <ul>. If it's important to keep using <table> markup, you could adapt this CSS to fit that HTML.

Basically:

  • on the container (here, <ul>) use a left border for the vertical line
  • give each item (here, <li>) a ::before pseudo-element, and use that for the circle
  • give each item (here, <li>) an ::after pseudo-element, and use that for the dot
  • wrap the items' (here, the <li>s') contents in a wrapper element (here, a <span>) and
    • give the wrapper (here, <span>) a ::before pseudo-element, and use that for the triangle
    • on the first (and optionally the last) item (here, <li>), give the wrapper (here, <span>) an ::after pseudo-element, and use that to cover up the top (and optionally bottom) end(s) of the vertical line

Other than the pseudo-elements, the advanced parts of this CSS are the triangle and the vertically centering the circle-and-dot. Here's a good explanation of how the triangle works, and this is the method I'm using for vertical centering.

I've left the bottom tail of the vertical line visible, but I've included the CSS necessary to cover it: just uncomment the three li:last-child span::after.

/* the container */
.fancy-list {
  margin-left: 4px;
  padding-left: 40px;
  list-style: none; /* remove the li's bullets */
  border-left: 3px solid #000; /* the vertical line */
}

/* the items */
li {
  position: relative;
  padding: 10px 20px;
  margin-bottom: 20px;
  background: #fb4d00;
  color: #fff;
}

/* -- the design elements -- */

/* some shared styles for the design feature pseudo-elements
*/
/* li:last-child span::after,*/ /* covers the bottom */
li:first-child span::after, /* covers the top */
li::before, /* the circle */
li::after, /* the dot */
li span::before { /* the triangle */
  content: ''; /* pseudo-elements must always have a content property */
  position: absolute; /* so that we can position them where we want */
  display: block; /* so that we can size them */
}

/* centers vertically */
li::before, /* the circle */
li::after, /* the dot */
li span::before { /* the triangle */
  top: 50%;
  transform: translateY(-50%);
}

/* raise above the bit that covers the top and bottom of the line (styled by the z-index:0 in the "rectangles to cover up the line" section, below
*
*/
li:before, /* the circle */
li:after { /* the dot */
  z-index: 1;
  border-radius: 50%;
}

/* the circle */
li::before {
  width: 20px;
  height: 20px;
  left: -54px;
  background: #fff;
  border: 3px solid #000;
}

/* the dot */
li::after {
  width: 8px;
  height: 8px;
  left: -45px;
  background: #000;
}

/* the triangle */
li span::before {
  width: 0;
  height: 0;
  left: -10px;
  /* the makes the triangle */
  border-right: 10px solid #fb4d00;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* rectangles to cover up the line
*/
/* li:last-child span::after,*/ /* covers the bottom */
li:first-child span::after { /* covers the top */
  top: 0; /* from the top of the item */
  bottom: 50%; /* to half-way down (ie. to the center of the circle and dot */
  left: -54px;
  width: 20px;
  background: #fff;
  z-index: 0; /* layer below the circle and dot (see line 40) */
}
/* covers the bottom */
/*
li:last-child span::after {
  top: 50%; /* from half-way down the item */
  bottom: 0; /* to the bottom */
}
*/
<ul class="fancy-list">
  <li>
    <span>a</span>
  </li>
  <li>
    <span>
      b<br>b'<br>b''
  </span>
  </li>
  <li>
    <span>c</span>
  </li>
  <li>
    <span>
      d<br>d'<br>d''<br>d'''
    </span>
  </li>
</ul>
Community
  • 1
  • 1
henry
  • 4,244
  • 2
  • 26
  • 37
  • 2
    He mentioned this was an email he was designing, so he'll need to use a table. Email clients are stuck in the past. – Caleb Anthony Sep 06 '16 at 16:54
  • Oh yeah that's right in the title but somehow I missed it. This def won't work for emails… guess I'll leave it here though – henry Sep 06 '16 at 16:57