CODEWITHSUNDEEP
androidemailhtml
Asha Soman
Asha Soman

Reputation: 312

How to use <div> instead of <table>

How to use <div> tag instead of <table> tags in this html?.I am used this html for sending email from my android application. Html.fromHtml() does not support <table> tags.Therefore,i want to replace <table> tags.But i want my content in table format.How can i do this?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
</head>
<body style="background: #FFFFFF; margin: auto; font-family: Helvetica; color: #808080; ">
<div style="width:537px; margin:auto; ">
    <div style="float:left; width: 537px; color:#000000; margin-bottom:15px; margin-bottom:10px;">
    ##HEADER## &nbsp; <a href="#" style="color:#3A41A1;">##TEXT1##</a>, <a href="#" style="color:#3A41A1;">>##TEXT2##</a>, <a href="#" style="color:#3A41A1;">>##TEXT3##</a> ]
    </div>

    <table style="width:537px; background:#DAFFF5; float:left; margin-top:10px; border-collapse:collapse; font-size:14px;">
    <tr>
        <td colspan="2" style="padding:8px;  border: 1px solid black;"><span style="color:#FF6A00; font-weight:bold; text-transform:capitalize; text-align:left;">##NAME##</span> <a href="#" style="color:#006BF2; float:right;">##LINK##</a></td>

    </tr>

     <tr>
        <td style="padding:8px; border: 1px solid black; color:#006BF2; width: 90px;">##TITLE##</td>
        <td style="padding:8px; border: 1px solid black; color:#000000; text-align:left; ">##VALUE##</td>
     </tr>
     <tr>
        <td style="padding:8px; border: 1px solid black; color:#006BF2; width: 90px;">##TITLE##</td>
        <td style="padding:8px; border: 1px solid black; color:#000000; text-align:left; ">##VALUE##</td>
     </tr>
     <tr>
        <td style="padding:8px; border: 1px solid black; color:#006BF2; width: 90px;">##TITLE##</td>
        <td style="padding:8px; border: 1px solid black; color:#000000; text-align:left; ">##VALUE##</td>
     </tr>
     <tr>
        <td style="padding:8px; border: 1px solid black; color:#006BF2; width: 90px;">##TITLE##</td>
        <td style="padding:8px; border: 1px solid black; color:#000000; text-align:left; ">##VALUE##</td>
     </tr>

     <tr>
        <td style="padding:8px; border: 1px solid black; color:#006BF2; width: 90px;">##TITLE##</td>
        <td style="padding:8px; border: 1px solid black; color:#000000; text-align:left; ">##VALUE##</td>
     </tr>
    </table>
   .....

</div>
</body>
</html>

Thanks in advance

Upvotes: 0

Views: 2672

Answers (3)

codenighter
codenighter

Reputation: 348

The following is the complete HTML5 code. It display exactly as your model (actually only three rows, not five):

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style>
body {
    background: #FFFFFF;
    margin: auto;
    font-family: Helvetica;
    color: #808080;
}
a {
    color: #3A41A1;
}
#wrapper {
    width: 537px;
    margin: auto;
}
#header {
    width: 100%;
    color: #000000;
    margin-bottom: 15px;
}
#content {
    width: 100%;
    background: #DAFFF5;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 14px;
    display: table;
}
.row {
    display: table-row;
    padding: 8px;
    border: 1px solid black;
}
.cell-header {
    padding: 8px;
    display: table-cell;
}
.cell-left {
    display: table-cell;
    padding: 8px;
    border: 1px solid black;
    color: #006BF2;
    width: 90px;
}
.cell-right {
    display: table-cell;
    padding: 8px;
    border: 1px solid black;
    color: #000000;
    text-align: left;
}
</style>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            ##HEADER## &nbsp; <a href="#">##TEXT1##</a>, <a href="#">##TEXT2##</a>, <a href="#">##TEXT3##</a>
        </div>

        <div id="content">
            <div class="row">
                <div class="cell-header" style="color:#FF6A00; font-weight:bold; text-transform:capitalize; text-align: left;">##NAME##</div>
                <div class="cell-header" style="text-align: right;"><a href="#" style="color:#006BF2;">##LINK##</a></div>
            </div>
            <div class="row">
               <div class="cell-left">
                   ##TITLE##
               </div>
               <div class="cell-right">
                   ##VALUE##
               </div>
            </div>
            <div class="row">
               <div class="cell-left">
                   ##TITLE##
               </div>
               <div class="cell-right">
                   ##VALUE##
               </div>
            </div>
            <div class="row">
               <div class="cell-left">
                   ##TITLE##
               </div>
               <div class="cell-right">
                   ##VALUE##
               </div>
            </div>
        </div>
        ......
    </div></body></html>

Hope it helps.

Upvotes: 1

axilos
axilos

Reputation: 121

For every element you need to write:

<div id="text1">Your text</div>

Then make style.css file. You can make it in Notepad and write in:

#text1 {
padding-left 8px;
color:#000000;
width:90px;
}

@text2 {
...
}

You can see complete list of CSS properties on: http://www.w3schools.com/cssref/default.asp

Upvotes: 1

Tash Pemhiwa
Tash Pemhiwa

Reputation: 7685

I think the following would be step 1.

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Title</title>
</head>
<body style="background: #FFFFFF; margin: auto; font-family: Helvetica; color: #808080; ">
<div style="width:537px; margin:auto; ">
  <div style="float:left; width: 537px; color:#000000; margin-bottom:15px; margin-bottom:10px;">
##HEADER## &nbsp; <a href="#" style="color:#3A41A1;">##TEXT1##</a>, 
  <a href="#" style="color:#3A41A1;">>##TEXT2##</a>, 
  <a href="#" style="color:#3A41A1;">>##TEXT3##</a> ]
</div>

<div style="width:537px; background:#DAFFF5; float:left; margin-top:10px; border-collapse:collapse; font-size:14px;">
<div>
    <div style="padding:8px;  border: 1px solid black;">
    <span style="color:#FF6A00; font-weight:bold; text-transform:capitalize; text-align:left;">##NAME##</span> 
        <a href="#" style="color:#006BF2; float:right;">##LINK##</a>
    </div>
</div>

 <div>
    <div style="padding:8px; border: 1px solid black; color:#006BF2; width: 90px;">##TITLE##</div>
       <div style="padding:8px; border: 1px solid black; color:#000000; text-align:left; ">##VALUE##</div>
 </div>
 <div>
    <div style="padding:8px; border: 1px solid black; color:#006BF2; width: 90px;">##TITLE##</div>
    <div style="padding:8px; border: 1px solid black; color:#000000; text-align:left; ">##VALUE##</div>
 </div>
 <div>
    <div style="padding:8px; border: 1px solid black; color:#006BF2; width: 90px;">##TITLE##</div>
    <div style="padding:8px; border: 1px solid black; color:#000000; text-align:left; ">##VALUE##</div>
 </div>
 <div>
    <div style="padding:8px; border: 1px solid black; color:#006BF2; width: 90px;">##TITLE##</div>
    <div style="padding:8px; border: 1px solid black; color:#000000; text-align:left; ">##VALUE##</div>
 </div>

 <div>
    <div style="padding:8px; border: 1px solid black; color:#006BF2; width: 90px;">##TITLE##</div>
    <div style="padding:8px; border: 1px solid black; color:#000000; text-align:left; ">##VALUE##</div>
 </div>
</div>

</div>
</body>
</html>

Step 2 would be to then use CSS to create your layout. You can access some CSS layout tutorials at this website: http://www.maxdesign.com.au/articles/css-layouts/

Upvotes: 0

Related Questions