Question

有没有办法在不使用<table>的情况下显示表格数据等数据我想在不使用<table>的情况下显示此表的数据。有可能吗？

enter image description here

Answer 1

是的，这是非常有可能的。您可以使用css float属性使用div结构创建此类布局。

以下是示例代码。

<html>
  <head>
   <style type="text/css">
        .trow{
         overflow:auto;
         width:100%;
        }
     .thead{
        font-weight:bold;
       }
     .tcell{
     width:30%;
    float:left;
    padding:5px;
    background-color:#EEE;
    border:1px solid

  }
   </style>
  </head>
  <body>
<body>
<div>
    <div class="trow thead">
        <div class="tcell">Name</div>
        <div class="tcell">Chaemacal Amount</div>
        <div class="tcell">Manufacturer</div>
    </div>
    <div class="trow">
        <div class="tcell">Betanol</div>
        <div class="tcell">10mg</div>
        <div class="tcell">Acme</div>
    </div>
    <div class="trow">
        <div class="tcell">Napa Extra</div>
        <div class="tcell">20mg</div>
        <div class="tcell">Beximco Pharma</div>
    </div>
     <div class="trow">
        <div class="tcell">Sergel</div>
        <div class="tcell">20mg</div>
        <div class="tcell">Beximco Pharma</div>
    </div>
     <div class="trow">
        <div class="tcell">Metpho</div>
        <div class="tcell">20mg</div>
        <div class="tcell">Beximco Pharma</div>
    </div>
</div>
  </body>
</html>

我还为此创建了一个JS小提琴。 http://jsfiddle.net/KzzL5/

Answer 2

使用CSS并相应地构建您的页面。你必须使用PHP循环在程序上用每一行填充DIV包含（假设你有一个动态页面 - 如果没有那么只是静态创建那些DIV并将它们风格化）。每个“行”应该是一个DIV，其中包含风格化的行元素，以保持彼此相邻的一行。但是，如果您可以使用表格，我强烈建议您这样做 - 这就是<table>的目的。

编辑：刚刚注意到你为什么要这样做。表格和表单彼此完美协作 - 只需将表格放在表单中，以便结构如下所示：

<form action="something.php" method="POST">
<table id="yourTable">
    <tr>
        <td>Field</td>
        <td><input type="text" name="inputField"/>
    </tr>
    <tr>
        <td></td><td><input type="submit" value="send"/>
    </tr>
</table>
</form>

以何种方式显示表格数据，如不使用<table> </table>

2 个答案: