如何使用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/

要使用CSS加粗第一行和第一列,使用当前的HTML标记,请使用 :first-child伪类,它匹配作为其父项的第一个子元素(第一个子元素)的任何元素：

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

但是,如果这些单元格是标题单元格(对于同一列或同一行中的其他单元格),则对它们使用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>

默认情况下,这些元素以粗体显示(尽管您仍然可以使用CSS来明确说明).它们也将默认居中;如果您不想这样,您可以轻松地使用CSS覆盖它,例如th {text-align：left}.

在这种情况下,第一行看起来非常像标题行,所以我会把它变成一个thead.这可能是有用的,例如因为如果页面被打印并且表格被分成两页或更多页面,那么许多浏览器会在新页面的开头重复该行.至于每行的第一个单元格,如果需要,它们可能最好保持为td并且只是粗体样式.