如何使用CSS或HTML粗体显示特定的HTML行和列？ [英] How can I bold specific HTML rows and columns with CSS or HTML?

问题描述

我想加粗我的HTML表的第一行和第一列（第0行和第0列）。如何用HTML或CSS完成这项工作？

表格：

 < table border =1> 
< tbody> 
< tr> 
< td>< / td> 
< td> translate.com和https://translate.google.com/</td> 
< td> http：//www.bing.com/translator/< / td> 
< / tr> 
< tr> 
< td>我吃炸玉米饼< / td> 
< td> Yo como tacos< / td> 
< td> Comer tacos< / td> 
< / tr> 
。 。 。 
< / tbody> 
< / table> 
  

...和CSS：

 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标记， a href =https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child =noreferrer> ：first-child



  tr：first-child，td：first-child {font-weight：bold} 
  

但是，如果这些单元格是标题单元格（对于同一列或同一行中的其他单元格），则使用 th 元素，并将第一行封装在 thead ele ment：



 < table border =1> 
< thead> 
< tr> 
< th>< / th> 
< th> translate.com和https://translate.google.com/</th> 
< th> http：//www.bing.com/translator/< th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
我吃炸玉米饼< / th> 
< td> Yo como tacos< / td> 
< td> Comer tacos< / td> 
< / tr> 
<！ - 其他行在这里 - > 
< / tbody> 
< / table> 
  

th 元素默认以粗体显示（尽管你仍然可以使用CSS来明确地说）。他们也将默认为中心;如果你不想这样做，你可以很容易地用CSS覆盖它，例如 th {text-align：left} 。

在这种情况下，第一行非常像头所以我会用 th 使它成为 thead 。这可能是有用的，例如因为如果页面被打印并且表格被分成两页或更多页面，则许多浏览器会在新页面的开始处重复该行。至于每一行的第一个单元格，如果需要，它们可能最好保存为 td ，并且只是粗体。

I want to bold the first row and the first column (row 0 and column 0) of my HTML table. How can that be done with either HTML or CSS?

The table:

<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>

...and CSS:

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

...are pretty basic.

The table is here: http://jsfiddle.net/clayshannon/LU7qm/7/

解决方案

To bold the first row and first column with CSS, using your current HTML markup, use the :first-child pseudo-class, which matches any element that is the first child (first sub-element) of its parent:

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

However, if those cells are meant to be header cells (for other cells in the same column or same row), it might be more logical to use the th element for them and to wrap the first row in a thead element:

<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 elements appear in bold by default (though you can still use CSS to say that explicitly). They will also be centered by default; if you do not want that, you can easily override that with CSS, e.g. th { text-align: left }.

In this case, the first row looks very much like a header row, so I would make it a thead with th. This could be useful e.g. because many browsers then repeat that row at the start of a new page if the page is printed and the table is divided into two or more pages. As for the first cells of each row, they are perhaps best kept as td and just styled bold, if desired.

这篇关于如何使用CSS或HTML粗体显示特定的HTML行和列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！