Html 使用CSS对齐表格中的文本

我有一个非常简单的表，有两行两列。我希望第一列中的文本右对齐，第二列左对齐。我相信这很容易，但我就是想不出来

以下是HTML：

<table>
 <tr><td>Previous:</td><td>Link 1</td></tr>
 <tr><td>Next:</td><td>Link 2</td></tr>     
</table>

上一篇：链接1
下一篇：链接2

---

我将如何做到这一点？

我将在这个实例中使用类。你可以想象，但这是最好的支持方式

CSS

HTML

---

您可以通过添加填充、边距和其他类来进一步改进。根据表格css的不同，您可能需要添加一些填充，以便单元格不是全部填充：0且不显示任何对齐

在每个td元素上设置不同的类

<style>
    td.raligned {text-align: right;} 
    td.leftaligned {text-align: left;} 
</style>

<table>
    <tr>
        <td class="raligned">blah</td>
        <td class="leftaligned">blah</td>
    </tr>
</table>

td.raligned{text align:right；}
td.leftaligned{text align:left；}
废话
废话

您可以使用

:first child

以第一列中的单元格为目标：

td {
    text align: left;
}

td:first-child {
    text-align: right;
}

但是，您可能希望在第一列的单元格中添加一个类，并使用该类：

<table>
 <tr><td class="first">Previous:</td><td>Link 1</td></tr>
 <tr><td class="first">Next:</td><td>Link 2</td></tr>     
</table>

td {
    text align: left;
}

td.first {
    text-align: right;
}

上一篇：链接1
下一篇：链接2
运输署{
文本对齐：左对齐；
}
td.首先{
文本对齐：右对齐；
}

如前所述，这将应用于所有

元素，因此您可能还希望向表中添加一个类，并将样式限制为该表中的

：

<table class="simple">
 <tr><td class="first">Previous:</td><td>Link 1</td></tr>
 <tr><td class="first">Next:</td><td>Link 2</td></tr>     
</table>

table.simple td {
    text align: left;
}

table.simple td.first {
    text-align: right;
}

上一篇：链接1
下一篇：链接2
表3.1简单td{
文本对齐：左对齐；
}
表1.1：简单td{
文本对齐：右对齐；
}

这很简单。创建一个CSS类

<style>
.aleft {text-align: left;}
.aright {text-align: right;}
</style>

.aleft{text align:left；}
.aright{text align:right；}

现在将类添加到表中，这很简单

<table>
<tr><td class="aright">Previous:</td><td>Link 1</td></tr>
<tr><td class="aleft">Next:</td><td>Link 2</td></tr>     
</table>

上一篇：链接1
下一篇：链接2

HTML

---

作为一种替代方案，根据您的场景，如果您能够-为什么不将第二列中的

替换为

，然后CSS将非常简单：

td { text-align:right; }
th { text-align:left; }

---

我个人建议不要使用表，而是使用CSS解决方案，这里说的是JSFIDLE选项。基本上与其他人所说的相同，但是使用jsfiddle，您可以操作它并进行更改，以便可以立即看到它们

使用

<col align=right>

在更多符合标准的浏览器上执行同样的操作

---

默认情况下，数据单元（

td

元素）是左对齐的，因此不需要对第二列执行任何操作。

从语义上讲，我认为这是一个坏主意，因为第二列显然不是任何内容的标题。试图扩展标题的概念，可能第一列可以被认为是这样的，但肯定不是第二列。

<table>
   <tr>
     <td class="right-align">Previous:</td>
     <td class="left-align">Link 1</td>
   </tr>
   <tr>
     <td class="right-align">Next:</td>
     <td class="left-align">Link 2</td>
   </tr>     
</table>​

td.right-align {
    text-align: right;
}

td.left-align {
    text-align: left;
}

td { text-align:right; }
th { text-align:left; }

<col align=right>

td:first-child { text-align: right; }