android - 如何使用
代替
如何在这个 html 中使用`<div>`标签而不是`<table>`标签？我使用这个 html 从我的 android 应用程序发送电子邮件。`Html.fromHtml()`不支持标签。因此`<table>`，我想替换`<table>`标签。但我想要表格格式的内容。我该怎么做？

Question

如何在这个 html 中使用<div>标签而不是<table>标签？我使用这个 html 从我的 android 应用程序发送电子邮件。Html.fromHtml()不支持标签。因此<table>，我想替换<table>标签。但我想要表格格式的内容。我该怎么做？

<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>

提前致谢

score 1 · Accepted Answer

对于您需要编写的每个元素：

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

然后制作 style.css 文件。您可以在记事本中制作并写入：

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

@text2 {
...
}

您可以在以下位置查看 CSS 属性的完整列表：http: //www.w3schools.com/cssref/default.asp

score 1 · Accepted Answer

以下是完整的 HTML5 代码。它与您的模型完全一样显示（实际上只有三行，而不是五行）：

<!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>

希望能帮助到你。

score 0 · Accepted Answer

我认为以下将是第 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>

第 2 步是使用 CSS 创建布局。您可以在此网站上访问一些 CSS 布局教程：http: //www.maxdesign.com.au/articles/css-layouts/

android - 如何使用代替如何在这个 html 中使用<div>标签而不是<table>标签？我使用这个 html 从我的 android 应用程序发送电子邮件。Html.fromHtml()不支持标签。因此<table>，我想替换<table>标签。但我想要表格格式的内容。我该怎么做？

3 回答 3

Related

Reference