如何使用 CSS 或 HTML 将特定的 HTML 行和列加粗？

我想将 HTML 表格的第一行和第一列（第 0 行和第 0 列）加粗。如何使用 HTML 或 CSS 来实现这一点？

桌子：

<table border="1">
    <tbody>
        <tr>
            <td></td>
            <td>translate.com AND https://translate.google.com/</td>
            <td>http://www.bing.com/translator/</td>
        </tr>
        <tr>
            <td>I eat tacos</td>
            <td>Yo como tacos</td>
            <td>Comer tacos</td>
        </tr>
    . . .
    </tbody>
</table>

...和CSS：

body {
    font-family: "Segoe UI", "Calibri", "Candara", "Bookman Old Style", "Consolas", sans-serif;
    font-size: 1.2em;
    color: navy;
}

...非常基本。

表格在这里：http://jsfiddle.net/clayshannon/LU7qm/7/ http://jsfiddle.net/clayshannon/LU7qm/7/

要使用 CSS 将第一行和第一列加粗，使用当前的 HTML 标记，请使用:first-child https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child伪类，匹配作为其父元素的第一个子元素（第一个子元素）的任何元素：

tr:first-child, td:first-child { font-weight: bold }

但是，如果这些单元格是标题单元格（对于同一列或同一行中的其他单元格），则使用th https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th元素并将第一行包装在thead元素：

<table border="1">
    <thead>
        <tr>
            <th></th>
            <th>translate.com AND https://translate.google.com/</th>
            <th>http://www.bing.com/translator/</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>I eat tacos</th>
            <td>Yo como tacos</td>
            <td>Comer tacos</td>
        </tr>
    <!-- other rows here -->
    </tbody>
</table>

The th默认情况下，元素以粗体显示（尽管您仍然可以使用 CSS 明确表示）。默认情况下它们也会居中；如果你不想要这样，你可以轻松地用 CSS 覆盖它，例如th { text-align: left }.

在这种情况下，第一行看起来非常像标题行，所以我会将其设为thead with th。这可能很有用，例如因为如果打印页面并且表格分为两页或更多页，许多浏览器会在新页面的开头重复该行。至于每行的第一个单元格，它们可能最好保留为td如果需要的话，可以将样式设置为粗体。