Question

我正在查看一些（非常）旧的工作表，我在很多个月前为HTML做了这些工作表，并注意到一个问题，即只使用table属性来“设置”表格。简单的问题是，如何通过使用属性让表格看起来像下面的那样？我很欣赏这种做事方式已被弃用，但仍然非常希望找到解决方案。

下面是我的尝试（也有一个JSFiddle链接），以及一个图像，它应该如何看待它的结尾。

<html>
    <body>
        <table border="2" frame="box" cellspacing="2" width="40%">
            <tr><th>Year 2010</th>  <th>Jan-April</th> <th>May-August</th>  <th>September-December </th></tr>
            <tr><td>Sales</td>  <td>200,000</td>    <td>225,000</td> <td>185,000</td></tr>
            <tr><td>Costs</td>  <td>78,000</td> <td>110,000</td>    <td>125,000</td></tr>
            <tr><td>Profit</td> <td>122,000</td>    <td>125,000 </td><td>60,000</td></tr>
        </table>

    </body>
</html>

工作表中的问题说明： 尝试使用表格属性，使表格如下图所示：

JSFiddle

table

Answer 1

您正在寻找rules属性：

<table frame="box" rules="cols" border="2px" cellspacing="2" width="40%" >
</table>

它是旧的并且现在不被接受为好的做法，不能在真实环境中使用它。用户CSS代替。

Answer 2

我在不推荐使用这些HTML属性后很久就开始进行Web开发了，所以这是我第一次真正使用它们。我不知道如何创建双边框效果，但这是我最好的尝试：

＆＃13;

<table border="3" bgcolor="#000" cellspacing="1"
       cellpadding="6" rules="cols" width="500px">
  <tr>
    <td bgcolor="#fff">
      <div><b><i>Year 2010</i></b></div>
      <div><b><i>Sales</i></b></div>
      <div><b><i>Costs</i></b></div>
      <div><b><i>Profits</i></b></div>
    </td>
    <td bgcolor="#fff">
      <div><b><i>Jan-April</i></b></div>
      <div align="right">200,000</div>
      <div align="right">78,000</div>
      <div align="right">122,000</div>
    </td>
    <td bgcolor="#fff">
      <div><b><i>May-August</i></b></div>
      <div align="right">225,000</div>
      <div align="right">110,000</div>
      <div align="right">125,000</div>
    </td>
    <td bgcolor="#fff">
      <div><b><i>September-December</i></b></div>
      <div align="right">185,000</div>
      <div align="right">125,000</div>
      <div align="right">60,000</div>
    </td>
  </tr>
</table>

＆＃13;

Table example

这显然完全忽略了style属性。

我不知道是否仅仅使用1行和4个单元作为作弊 - 我这样做是为了让我在每个（假）单元的侧面产生填充，但不是顶部或底部。

我使用rules="cols"来允许更厚的外边框（因为我无法创建双边框效果）。删除它会使内边框与外边框一样粗。

我想可以通过将table元素包装在两个div元素中来生成双边框 - 最外层的bgcolor属性设置为#000，表格为＆＃ 39;父母bgcolor #fff - 我不知道你在每个人之间创造了1px的差距。

Answer 3

难以向后移动，但就是这样：

<table border="2" frame="frame" rules="cols" cellspacing="5" cellpadding="2" width="100%">
  <tr>
    <th><i>Year 2010</i></th>
    <th><i>Jan-April</i></th>
    <th><i>May-August</i></th>
    <th><i>September-December</i></th>
  </tr>
  <tr>
    <td><b><i>Sales</i></b></td>
    <td align="right">200,000</td>
    <td align="right">225,000</td>
    <td align="right">185,000</td>
  </tr>
  <tr>
    <td><b><i>Costs</i></b></td>
    <td align="right">78,000</td>
    <td align="right">110,000</td>
    <td align="right">125,000</td>
  </tr>
  <tr>
    <td><b><i>Profit</i></b></td>
    <td align="right">122,000</td>
    <td align="right">125,000</td>
    <td align="right">60,000</td>
  </tr>
</table>

Demo - jsFiddle

使用属性的样式表

3 个答案: