How can I bold specific HTML rows and columns with CSS or HTML?

Question

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/

Answer 1

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.

Answer 2

CSS selector :

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

Explanations:

:first-child is used to select the first child of a set of elements. For example:

<ul>
    <li>First</li>
    <li>Second/li>
    <li>Third</li>
    <li>Fourth</li>
</li>

li:first-child {} will cover the first <li>.

To achieve what you asked for, I did two things, since a table is a set of rows.

1. tr:first-child td (first table row, all td's)
2. tr td:first-child (all rows, first td)

Note: Both rules #1 and #2 will cover the first row, first td; but it should not be a problem.