-2

我使用 Dreamweaver 创建了我的表格，它为我创建了所有的高度和宽度，但是当我通过 CSS 验证器传递它时，我有

表格元素的宽度属性已过时。改用 CSS。

th 元素的 bgcolor 属性已过时。改用 CSS。

th 元素的 height 属性已过时。改用 CSS。

基本上，他们说第 th 元素的所有属性都已过时。

<table width="1108" border="1" id="table">
   <tr id="toprow">
     <th width="103" height="45" bgcolor="#000000" scope="row">Name</th>
     <th width="114" bgcolor="#000000">Type </th>
     <th width="104" bgcolor="#000000">Summoner Level</th>
     <th width="191" bgcolor="#000000">Maps</th>
     <th width="566" bgcolor="#000000">Description</th>
   </tr>
 <tr>
     <th height="120" scope="row"><p><img src="summonerspells/64px-Barrier.png" width="64" height="64" alt="barrier"></p>
     <p>Barrier</p></th>
     <td>Defense</td>
     <td>Level 6</td>
     <td><p>Summoner's Rift<br>
Twisted Treeline<br>
Crystal Scar<br>
Howling Abyss</p></td>
     <td>Shields your champion for 115-455 (depending on champion level) for 2     seconds.</td>
   </tr>

<tr>
     <th height="68" scope="row"><p><img src="summonerspells/Teleport.png" width="64" height="64" alt="teleport"></p>
     <p>Teleport</p></th>
     <td>Utility</td>
     <td>Level 2 </td>
     <td>summoners rift</td>
     <td>After casting for 4 seconds, teleports your champion to target allied minion, turret, or ward.</td>
   </tr>
   <tr>
     <th height="68" scope="row"><p><img src="summonerspells/Clarity.png" width="64" height="64" alt="clarity"></p>
     <p>Clarity</p></th>
     <td>Utility</td>
     <td>Level 1</td>
     <td>Summoner's Rift<br>
       Twisted Treeline<br>
       Crystal Scar<br>
     Howling Abyss</td>
     <td>Restores 40% of your champion's maximum Mana. Also restores allies for 40% of their maximum Mana</td>
   </tr>

这是代码的一部分，我的表很长，所以读起来会很累。如果你知道如何解决高度问题，我可以在我的其余代码上解决它。

4

2 回答 2

0 
<style type="text/css">
    table {width:1108px;border:1px solid #999;}
    table tr#toprow th {height:120px;background-color:#000;}
</style>

你真的不需要其他行的高度，因为你的图像会用它们的图像高度拉伸它们。

<table id="table">
   <tr id="toprow">
     <th>Name</th>
     <th>Type </th>
     <th>Summoner Level</th>
     <th>Maps</th>
     <th>Description</th>
   </tr>
 <tr>
     <th scope="row"><p><img src="summonerspells/64px-Barrier.png" width="64" height="64" alt="barrier"></p>
     <p>Barrier</p></th>
     <td>Defense</td>
     <td>Level 6</td>
     <td><p>Summoner's Rift<br>
Twisted Treeline<br>
Crystal Scar<br>
Howling Abyss</p></td>
     <td>Shields your champion for 115-455 (depending on champion level) for 2     seconds.</td>
   </tr>

<tr>
     <th scope="row"><p><img src="summonerspells/Teleport.png" width="64" height="64" alt="teleport"></p>
     <p>Teleport</p></th>
     <td>Utility</td>
     <td>Level 2 </td>
     <td>summoners rift</td>
     <td>After casting for 4 seconds, teleports your champion to target allied minion, turret, or ward.</td>
   </tr>
   <tr>
     <th scope="row"><p><img src="summonerspells/Clarity.png" width="64" height="64" alt="clarity"></p>
     <p>Clarity</p></th>
     <td>Utility</td>
     <td>Level 1</td>
     <td>Summoner's Rift<br>
       Twisted Treeline<br>
       Crystal Scar<br>
     Howling Abyss</td>
     <td>Restores 40% of your champion's maximum Mana. Also restores allies for 40% of their maximum Mana</td>
   </tr>
于 2013-08-04T17:46:19.297 回答
0

您一定一直在使用 HTML5 验证器，即检查某些 HTML5 草案的实验性软件，例如http://validator.w3.org（CSS 验证器不会发出有关 HTML 标记的消息）。

首先，你应该决定你是否在乎。像 HTML5 验证器抱怨的那些标记功能是老式的并且通常很笨拙，但是它们可以工作（并且 HTML5 草案包含对浏览器的要求以继续支持它们）。用 CSS 替换它们主要是理论上的纯洁性问题，您可能买不起，特别是如果您打算使用生成此标记的工具来维护页面。此外，任何代码清理都存在导致问题而不是解决问题的风险：您可能会犯错误，并且您可能会无意中更改渲染。

如果你真的想继续，你可以查看我的非正式页面Mappingpresental HTML to CSS，如果你够勇敢的话，可以查看 HTML5 CR 中的Rendering部分（更正式地描述了浏览器如何将展示 HTML 元素和属性映射到 CSS。

尤其是，

  • 该width属性自然映射到具有相同名称的 CSS 属性，例如 `#table { width: 1108px }
  • bgcolor属性映射到background-color属性
  • 该height属性映射到同名的 CSS 属性。

一种简单的方法是用属性内的 CSS 代码替换style属性，例如

<th style="width: 103px; height: 45px; background-color: #000000" 
    scope="row">Name</th>

这是否是一种改进值得怀疑。最好使用外部样式表并将规则放在那里。但是你需要合适的选择器，为此，需要对 CSS 基础知识有很好的理解。

在实践中确实没有任何收获。“修复”由创作工具生成的 HTML 代码很无聊、容易出错，而且通常效率低下。相反，对于未来的项目，尝试寻找能够生成相当现代、可读且健壮的 HTML 和 CSS 代码的工具。

于 2013-08-04T18:28:10.917 回答