Question

我的网站（emma-moore.com）上有一个html表格，我用于布局而不是表格数据：

＆＃13;

<table border="0" cellpadding="5px" width="100%" class="followFont">
  <tbody>
    <tr>
      <td align="left">Follow your heart</td>
    </tr>
    <tr>
      <td align="left" style="padding-bottom: 10px">and you'll always</td>
    </tr>
    <tr>
      <td align="left">
        <img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
      </td>
    </tr>
    <tr>
      <td align="left" style="padding-top: 10px">end up where your</td>
    </tr>
    <tr>
      <td align="left">soul needs to be.</td>
    </tr>
  </tbody>
</table>

＆＃13;

最佳做法是不要使用内联样式和表格进行布局，我想知道如何用div块替换表格，并将文本和jpg放在div块中以使文本方式和jpg显示与使用表格时相同的方式。我怎样才能用css和div块做到最好？

谢谢，

威廉

Answer 1

您可以使用

<div id="table" style="display: table;">
    <div id="cell1" style="display:table-cell;"></div>
    <div id="cell2" style="display:table-cell;"></div>
    <div id="cell3" style="display:table-cell;"></div>
</div>

你会像桌子一样使用 Div可以具有与表

相同的属性

像

#table
{
   vertical-align:middle;
   text-align:center:
   border:solid 1px #ddd;
   width:100%;
}
#cell1
{
   vertical-align:middle;
   text-align:center:
   border:solid 1px #ddd;
   width:25%;
   padding:10px;
}

很快...... 希望这有帮助

Answer 2

.followFont 
{
padding:5px;
border:0;
cellpadding:5px;
width:100%;
display:table; 
}

<div class="followFont">

<div style="display:table-row;">
    <div style="width:100%; display:table-cell; text-align:left;">Follow your heart</div>
</div>

<div style="display:table-row;">
    <div style="width:100%; display:table-cell; text-align:left; padding-bottom: 10px;">and you'll always</div>
</div>

<div style="display:table-row;">
    <div style="width:100%; display:table-cell; text-align:left;">
        <img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
    </div>
</div>

<div style="display:table-row;">
    <div style="width:100%; display:table-cell; text-align:left; padding-top: 10px;">end up where your</div>
</div>

<div style="display:table-row;">
    <div style="width:100%; display:table-cell; text-align:left;">
      soul needs to be.
    </div>
</div>

</div>

Answer 3

链接： - https://html-cleaner.com/features/replace-html-table-tags-with-divs/

<h2>Phone numbers</h2>
    <table width="300" border="1" cellpadding="5" style="text-align: center">
    <tr>
    <th width="75"><strong>Name</strong></th>
    <th><span style="font-weight: bold;">Telephone</span></th>
    <th>&nbsp;</th>
    </tr>
    <tr>
    <td>John</td>
    <td><a href="tel:0123456785">0123 456 785</a></td>
    <td><img src="images/check.gif" alt="checked" /></td>
    </tr>
    <tr>
    <td>Cassie</td>
    <td><a href="tel:9876532432">9876 532 432</a></td>
    <td><img src="images/check.gif" alt="checked" /></td>
    </tr>
    </table>

<h2>Phone numbers</h2>
<div class="rTable">
<div class="rTableRow">
<div class="rTableHead"><strong>Name</strong></div>
<div class="rTableHead"><span style="font-weight: bold;">Telephone</span></div>
<div class="rTableHead">&nbsp;</div>
</div>
<div class="rTableRow">
<div class="rTableCell">John</div>
<div class="rTableCell"><a href="tel:0123456785">0123 456 785</a></div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
<div class="rTableRow">
<div class="rTableCell">Cassie</div>
<div class="rTableCell"><a href="tel:9876532432">9876 532 432</a></div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
</div>

用div标签替换html表

3 个答案: