Question
Answer and Explanation
To bold the headers of a table using CSS, you can target the <th>
elements within your table and apply the font-weight: bold;
style. Here's a detailed explanation:
1. Understanding the HTML Structure:
- In HTML, table headers are defined using the <th>
tag, which is typically placed within the <thead>
section of a table. The <thead>
element is used to group the header content of a table.
2. Using CSS to Target Table Headers:
- You can use CSS selectors to target the <th>
elements specifically. The most common way is to use the element selector th
.
3. Applying the `font-weight` Property:
- The font-weight
CSS property is used to specify the weight or boldness of the text. Setting it to bold
will make the text appear bold.
4. Example CSS Code:
th {
font-weight: bold;
}
5. Applying CSS to Your HTML:
- 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.
6. Example HTML Table:
<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>
7. Additional Styling:
- You can further customize the appearance of your table headers by adding other CSS properties, such as text-align
, padding
, background-color
, etc.
By using the font-weight: bold;
style on the <th>
elements, you can easily make your table headers stand out, improving the readability and structure of your tables.