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>

提前致谢

Answer 1

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

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

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

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

@text2 {
...
}

您可以在http://www.w3schools.com/cssref/default.asp

上查看完整的CSS属性列表

Answer 2

以下是完整的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>

希望它有所帮助。

Answer 3

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

如何使用<div>而不是<table> </table> </div>

3 个答案: