Question
Answer and Explanation
To bold the headers of a table using CSS, you can target the <th> elements within your table. Here's how you can achieve this:
1. Basic CSS Styling:
- The most straightforward way is to use the font-weight property and set it to bold. This will apply the bold style to all table header cells.
2. Example CSS Code:
th {
font-weight: bold;
}
3. Applying the CSS:
- You can include this CSS code in a <style> tag within the <head> of your HTML document, or in an external CSS file linked to your HTML.
4. Targeting Specific Tables:
- If you have multiple tables and only want to bold the headers of specific ones, you can use a class or ID selector. For example, if your table has a class of my-table, you would use:
.my-table th {
font-weight: bold;
}
5. Example HTML Table:
- Here's an example of how your HTML table might look:
<table class="my-table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
6. Additional Styling:
- You can also combine this with other CSS properties to further style your table headers, such as adding padding, background colors, or text alignment.
By using the font-weight: bold; CSS property on the <th> elements, you can easily make your table headers stand out, improving the readability and structure of your tables.