更好的方法来正确alignmentHTML表格中的文本
我有一个具有大量行的HTML表，我需要alignment一列。
我知道以下几种方式，
<tr><td>..</td><td>..</td><td align='right'>10.00</td><tr> 和
<tr><td>..</td><td>..</td><td class='right-align-class'>10.00</td><tr>
在这两种方法中，我必须在每个<tr>标签上重复使用align或class参数。 （如果有1000行，我必须把align ='right'或class ='right-align- class'1000次。）
有没有任何有效的方法来做到这一点？ 有没有什么直接的说法，将所有行中的第三列alignment？
直接回答你的问题： 不 。 没有更简单的方法来在所有现代浏览器中获得一致的外观和感觉，而不必重复列上的类。 （虽然，见下面的重新十八孩子。）
以下是执行此操作的最有效的方法。
HTML：
<table class="products"> <tr> <td>...</td> <td>...</td> <td class="price">10.00</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td class="price">11.45</td> <td>...</td> <td>...</td> </tr> </table>
CSS：
table.products td.price { text-align: right; }
为什么你不应该使用nth-child：
CSS3的伪select器，nth-child，对于这一点来说是完美的 – 而且效率要高得多 – 但是在现在的networking上使用它是不切实际的。 几个主要的现代浏览器都不支持它 ，包括6-8的所有IE 浏览器 。 不幸的是，这意味着今天在很大一部分浏览器（至less40％）中没有得到支持。
所以，nth-child是很棒的，但是如果你想要一致的外观和感觉，那么使用它是不可行的。
如果它总是第三列，那么可以使用这个（假设“产品”的表类）。 这是有点hacky，但不健壮，如果你添加一个新的列。
table.products td+td+td { text-align: right; } table.products td, table.products td+td+td+td { text-align: left; }
但说实话，最好的想法是在每个单元上使用一个类。 您可以使用col元素来设置col的宽度，边框，背景或可见性，但不能设置任何其他属性。 这里讨论的原因 。
你可以使用第nth-child伪select器。 例如：
table.align-right-3rd-column td:nth-child(3) { text-align: right; }
然后在你的桌子上做：
<table class="align-right-3rd-column"> <tr> <td></td><td></td><td></td> ... </tr> </table>
编辑：
不幸的是，这只适用于Firefox 3.5。 但是，如果你的表只有3列，你可以使用兄弟select器，它有更好的浏览器支持。 这是样式表的样子：
table.align-right-3rd-column td + td + td { text-align: right; }
这将匹配其他两列之前的任何列。
通过你的确切问题来看你的隐含问题：
第1步：按照您的描述使用该类（或者，如果必须的话，使用内联样式）。
第2步：打开GZIP压缩。
奇妙的作品;）
通过这种方式，GZIP为您解决了冗余问题（无论如何），您的源代码仍然符合标准。
几年前（在IE只有几天）我使用的是<col align="right">标签，但我只是testing它，而且它似乎是一个IE浏览器的唯一function：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> </head> <body> <table width="100%" border="1"> <col align="left" /> <col align="left" /> <col align="right" /> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table> </body> </html>
摘录摘自www.w3schools.com 。 当然，它不应该被使用（除非由于某种原因，你真的只是IE浏览器渲染引擎的目标），但我认为这将是有趣的提及它。
编辑：
- IE仍然支持它 。
- Firefox 在3.5下降了支持 。
- Safari似乎不支持它，但文档指出，否则 。
总的来说，我不理解放弃这个标签的理由。 这似乎是非常有用的（至less对于手动HTML发布）。
这在IE6中不起作用，这可能是一个问题，但它可以在IE7 +和Firefox，Safari等中使用。它将第三列右alignment，并将所有后续列alignment。
td + td + td { text-align: right; } td + td + td + td { text-align: left; }
如果只有两种“列”样式 – 使用一个作为TD，一个作为TH。 然后，为这个表和这个表的TH和TD的一个子类声明一个类。 那么你的HTML可以是超高效的。
你真正想在这里是：
<col align="right"/>
但它看起来像Gecko不支持这个：这是一个十多年来的开放性错误 。
（Geez，为什么Firefox不能像IE6那样有像样的标准支持？）
位于表格内的<colgroup>和<col>标签是为此目的而devise的。 如果您的表格中有三列，并且想要alignment第三列，请在打开<table>标记之后添加此<table> ：
<colgroup> <col /> <col /> <col class="your-right-align-class" /> </colgroup>
以及必要的CSS：
.your-right-align-class { text-align: right; }
从W3：
定义和用法
<col>标记为表中的一个或多个列定义属性值。
<col>标签对于将样式应用于整个列而非每个单元重复样式都是有用的。
使用jquery将类应用到所有tr不显眼。
$（“table td”）。addClass（“right-align-class”）;
如果您想select特定的td，请在td上使用增强型filter。
看jQuery
