Question

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

table元素的width属性已过时。改用CSS。

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

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

基本上，第三个元素的所有属性都表示它已经过时了。

<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>

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

Answer 1

<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>

Answer 2

您必须使用HTML5验证程序，即检查某些HTML5草稿的实验性软件，例如http://validator.w3.org（CSS验证程序不会发出有关HTML标记的消息）。

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

如果您真的想继续，可以查看我的非正式页面Mapping presentational HTML to CSS，如果您是勇敢的话，请参阅HTML5 CR中的Rendering部分（更正式地描述了预期浏览器如何映射表现形式） CSS元素和属性。

特别是

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

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

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

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

实际上没有什么可以获得的。 “修复”由创作工具生成的HTML代码很无聊，容易出错，并且通常没有效果。相反，对于未来的项目，尝试找到可生成相当现代，可读且强大的HTML和CSS代码的工具。

表元素上的标记无效

2 个答案: