Used an email signature generator to do this and it included 1 button but I need to add 2 more. But I want the buttons to be the same width and then evenly spaced under the width of the entire signature.
<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
<tbody>
<tr>
<td width="150" style="vertical-align: middle;"><span class="template3__ImageContainer-sc-vj949k-0 jeScQV" style="margin-right: 20px; display: block;"><img src="https://storage.googleapis.com/msgsndr/4v9YnFV91CVUbuwS6IF5/media/64f8b3af63e5711da26d77bf.png" role="presentation" width="130" class="image__StyledImage-sc-hupvqm-0 gYgOut" style="max-width: 130px;"></span></td>
<td style="vertical-align: middle;">
<h2 color="#000" class="name__NameContainer-sc-1m457h3-0 jxbGUj" style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0); font-weight: 600;"><span>Aaron</span><span> </span><span>Rajchel</span></h2>
<p color="#000" font-size="medium" class="job-title__Container-sc-1hmtp73-0 ifJNJc" style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Owner</span></p>
<p color="#000" font-size="medium" class="company-details__CompanyContainer-sc-j5pyy8-0 VnOLK" style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>LandscapAI</span></p>
<p color="#000" font-size="medium" class="custom-field__CustomFieldContainer-sc-190n2f-0 dKSugh" style="color: rgb(0, 0, 0); margin: 0px; font-size: 14px; line-height: 22px;"><span>Automation + AI = Grow</span></p>
</td>
<td width="30">
<div style="width: 30px;"></div>
</td>
<td color="#4358a7" direction="vertical" width="1" height="auto" class="color-divider__Divider-sc-1h38qjv-0 llIisW" style="width: 1px; border-bottom: none; border-left: 1px solid rgb(67, 88, 167);"></td>
<td width="30">
<div style="width: 30px;"></div>
</td>
<td style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
<tbody>
<tr height="25" style="vertical-align: middle;">
<td width="30" style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
<tbody>
<tr>
<td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#4358a7" alt="mobilePhone" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:855-242-4769" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>855-242-4769</span></a></td>
</tr>
<tr height="25" style="vertical-align: middle;">
<td width="30" style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
<tbody>
<tr>
<td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#4358a7" alt="emailAddress" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px;"><a href="mailto:[email protected]" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>[email protected]</span></a></td>
</tr>
<tr height="25" style="vertical-align: middle;">
<td width="30" style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
<tbody>
<tr>
<td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#4358a7" alt="website" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px;"><a href="//www.landscap.ai" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>www.landscap.ai</span></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
<tbody>
<tr>
<td height="30"></td>
</tr>
<tr>
<td color="#4358a7" direction="horizontal" width="auto" height="1" class="color-divider__Divider-sc-1h38qjv-0 llIisW" style="width: 100%; border-bottom: 1px solid rgb(67, 88, 167); border-left: none; display: block;"></td>
</tr>
<tr>
<td height="30"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
<tbody>
<tr>
<td style="text-align: right; vertical-align: top;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
<tbody>
<tr>
<td></td>
<td>
<tr><span style="display: block;">
<a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/demolandscapai" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Customer Demo</a>
<a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/customersupportmeet" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Customer Support</a>
<a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/affiliatedemo" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Affiliate Demo</a>
</span></tr>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>It’s been 20 years since I coded in HTML but I messed around and couldn’t get it to work. Much appreciated!
4
Answers
To evenly space the buttons
display:flexandjustify-content: space-betweenis always preferable. You can wrap the buttons with thedivand provide the flex property to them. I have also providedwidth: 100%to ensure my newly introduced container to take up the full width of its parent. Something like below:Table layouts are not popular anymore like they were 20 years ago. You can do this with flexbox:
You can see above that I added this style in the
spantag surrounding your links:Also changed
spantodivand removed display block since div is basically a block version of span.To make them the same width the easier way is with (not inline) css. You can use flex basis and target all elements inside the container (see above).
I have made change in below line in which buttons are contains.
You can adjust some inline styles as follows:
For the
spantag surrounding the buttons (atags), use this style:display: flex; justify-content: space-between; margin: 0 -5px;. In this style, the-5pxis the offset for the spacing between the buttons. You can adjust it as needed.For the buttons (
atags), add the following style:flex: 1; margin: 0 5px;, where5pxis the spacing between the buttons. You can customize this value to match the style of thespantag above.You can add as many buttons as you like by copying one button and modifying the text, as long as there is enough space to display them.
Please note that since we are using
display: flex, older browsers (e.g., Internet Explorer) may not be fully supported.