askvity

How do you bold a row in a table in HTML?

Published in HTML Table Styling 2 mins read

There are several ways to bold a row in an HTML table. One simple method, particularly useful for bolding the last row, involves directly manipulating the string values within the table cells using HTML <b> tags.

Here's a breakdown of methods you can use:

1. Using <b> tags (String Manipulation)

This method directly modifies the text within the table cells (<td> or <th>) to make it bold. According to the reference, a simple way to bold the last row of your table is to append <b> tags to the values. You can do this through the 'String Manipulation' node and join the tags on either side of the value.

Example:

<table>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td><b>Bold Data 3</b></td>
    <td><b>Bold Data 4</b></td>
  </tr>
</table>

In this example, the second row will be displayed in bold. You would programmatically add the <b> and </b> tags around the data when generating the HTML.

2. Using CSS font-weight

A more flexible and recommended approach is to use CSS to style the table rows. This keeps your HTML cleaner and allows for easier modifications to the styling.

Example:

<style>
  .bold-row {
    font-weight: bold;
  }
</style>

<table>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr class="bold-row">
    <td>Bold Data 3</td>
    <td>Bold Data 4</td>
  </tr>
</table>

Here, we define a CSS class bold-row that sets the font-weight to bold. We then apply this class to the <tr> element that we want to bold.

3. Using Inline CSS

You can also apply the font-weight style directly within the <tr> tag.

Example:

<table>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr style="font-weight: bold;">
    <td>Bold Data 3</td>
    <td>Bold Data 4</td>
  </tr>
</table>

While this works, it is generally considered less maintainable than using a CSS class.

4. Using <th> tags

If the row you want to bold represents headers, you should use <th> (table header) tags instead of <td> (table data) tags. <th> tags are often displayed in bold by default, but you can control the styling with CSS if needed.

Example:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Related Articles