CODEWITHSUNDEEP
htmlcss
Steven Sann
Steven Sann

Reputation: 578

HTML table content alignment

This is my code 

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="font-size:40px;line-height:2px;color:red;">◖</td> 
    <td style="width:80px;height:30px;background-color:red;"></td> 
    <td style="font-size:40px;line-height:2px;color:red;">◗</td>
  </tr>
</table>

Fiddle Example

What I want to do is to appear my table content as the div below ( with border radius ) 

<div style="width:120px;height:30px;background-color:red;border-radius:50px;"></div>

I have to do it with table like this because this code will use in html email for Outlook Desktop client which doesn't support border-radius .

Upvotes: 0

Views: 144

Answers (2)

Kapil Karangeeya
Kapil Karangeeya

Reputation: 310

Completely based on div.

div.my-button{
  padding: 12px 18px 12px 18px;
  border: 1px solid #e9703e;
  background-color: #EB7035;
  border-radius: 10px;
  font-size: 16px;
  margin-top: 20px;
  width: 119px;
}
div.my-button a{
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
  text-decoration: none;
}
<div class="my-button">
	<a href="http://litmus.com" target="_blank">I am a button &rarr;</a>
</div>

Upvotes: 0

Mike
Mike

Reputation: 75

    <table border="0" cellspacing="0" cellpadding="0">
   <tr>
      <div style="padding: 0;
         margin: 0;
         font-size: 40px;
         line-height: 2px;
         color: red;
         background-image: url(http://freshcodelabel.com/images/red-half-circle.png);
         background-repeat:no-repeat;
         transform: rotate(180deg);
         height: 186px;
         width:90px;
         display:inline-block;
         ">
      </div>
      <div style="width: 212px;height: 179px;background-color:#c60000;display:inline-block;"></div>
      <div style="
         padding: 0;
         margin: 0;
         font-size: 40px;
         line-height: 2px;
         color: red;
         background-image: url(http://freshcodelabel.com/images/red-half-circle.png);
         height: 186px;
         background-repeat:no-repeat;
         width:90px;
         display:inline-block;
         background-position: 0px 7px;
         "></div>
   </tr>
</table>

JSFiddle

Use images instead of characters.

Upvotes: 1

Related Questions