Html Question posted in
Some basic documentation can be found here.

Can someone help turning this table into HTML CSS like the one in the photo attached to this post with inline CSS?

CLICK HERE TO SEE HOW THE TABLE NEED TO LOOK LIKE - turning this table into HTML CSS with inline CSS

Can someone help turning this table into HTML CSS like the one in the photo attached to this post with inline CSS?
The table will be used in an emailer, kindly use inline CSS only.

This is a RAW code used to create table.

<center>
  <table style="width:100%; color: #000000; font-family: inter; display: grid; grid-template-columns: 100% 100%; grid-template-rows: auto; align-items: stretch; padding: 50px;">
    <div>
      <tr>
        <th>M&M</th>
        <th>Tech M</th>
      </tr>
      <tr>
        <td style="color: #19C353; text-align: center;">+4.5%</td>
        <td style="color: #E82619; text-align: center;">-1.9%</td>
      </tr>
    </div>
    <tr>
      <th>Power Grid</th>
      <th>Bharat Petroleum</th>
    </tr>
    <tr>
      <td style="color: #19C353; text-align: center;">+2.7%</td>
      <td style="color: #E82619; text-align: center;">-1.8%</td>
    </tr>
    <tr>
      <th>Shriram Finance</th>
      <th>JSW Steel</th>
    </tr>
    <tr>
      <td style="color: #19C353; text-align: center;">+2.3%</td>
      <td style="color: #E82619; text-align: center;">-1.5%</td>
    </tr>
    <tr>
      <th>IndusInd Bank</th>
      <th>HCL Tech</th>
    </tr>
    <tr>
      <td style="color: #19C353; text-align: center;">+1.9%</td>
      <td style="color: #E82619; text-align: center;">-1.5%</td>
    </tr>
    <tr>
      <th>Hero Moto</th>
      <th>Dr Reddy&apos;s</th>
    </tr>
    <tr>
      <td style="color: #19C353; text-align: center;">+1.9%</td>
      <td style="color: #E82619; text-align: center;">-1.4%</td>
    </tr>
  </table>
</center>
Tags:

2

Answers


  1. 0

    You can tweak it a little by removing the second table row in each div and use just table head and something like paragraph tag the style the table heads, while the paragraph tag comes in between them.

    <div>
    <tr>
        <th style="backgroud-color: #e3e9e5; text-align: center; padding: 0.5em; border-radius: 10px;">M&M
            <p style="color: #19C353; text-align: center;">+4.5%</p>
        </th>
        <th style="backgroud-color: #e3e9e5; text-align: center; padding: 0.5em; border-radius: 10px;">Tech M
            <p style="color: #E82619; text-align: center;">-1.9%</p>
        </th>  
    </tr>
</div>
    Login or Signup to reply.
  2. 0 
    •  grid-template-rows: auto; align-items: stretch; padding: 50px;"> <div
 style="border-radius: 10px; padding: 0.5em; "> <tr> <th
 style="border-radius: 10px; padding: 0.5em; background-color:
 #e3e9e5; text-align: center;">M&M <p style="color: #19C353; text-align: center;">+4.5%</p> </th> <th style="border-radius: 10px;
 padding: 0.5em; background-color: #e3e9e5; text-align: center;">Tech
 M <p style="color: #E82619; text-align: center;">-1.9%</p> </th>
 </tr> </div> <div style="border-radius: 10px; padding: 0.5em; "> <tr>
 <th style="border-radius: 10px; padding: 0.5em; background-color:
 #e3e9e5; text-align: center;">M&M <p style="color: #19C353; text-align: center;">+4.5%</p> </th> <th style="border-radius: 10px;
 padding: 0.5em; background-color: #e3e9e5; text-align: center;">Tech
 M <p style="color: #E82619; text-align: center;">-1.9%</p> </th>
 </tr> </div> <div style="border-radius: 10px; padding: 0.5em; "> <tr>
 <th style="border-radius: 10px; padding: 0.5em; background-color:
 #e3e9e5; text-align: center;">M&M <p style="color: #19C353; text-align: center;">+4.5%</p> </th> <th style="border-radius: 10px;
 padding: 0.5em; background-color: #e3e9e5; text-align: center;">Tech
 M <p style="color: #E82619; text-align: center;">-1.9%</p> </th>
 </tr> </div> <div style="border-radius: 10px; padding: 0.5em; "> <tr>
 <th style="border-radius: 10px; padding: 0.5em; background-color:
 #e3e9e5; text-align: center;">M&M <p style="color: #19C353; text-align: center;">+4.5%</p> </th> <th style="border-radius: 10px;
 padding: 0.5em; background-color: #e3e9e5; text-align: center;">Tech
 M <p style="color: #E82619; text-align: center;">-1.9%</p> </th>
 </tr> </div> </table> </center> </body> </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search