上表元素无效标记

Question

我创建使用Dreamweaver我的表，它创造了所有的高度和宽度，但对我来说，当我通过它通过CSS验证，我有

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

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

th元素的高度属性已过时。改用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> 

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

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（它更正式地描述了浏览器如何将表示HTML元素和属性映射到CSS的方式来描述Rendering。

特别地，

• 的width属性自然映射到CSS属性具有相同的名称，例如`#table {宽度：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代码的工具。