Tables are the components in HTML that are utilized to display information in a structured format. Bootstrap offers us to change the colors of the table components very quickly. This can be done by just using the color classes within the table element, such as the “table-danger” class that applies a red color to the table component.
This post has explained the method to change the table header color using Bootstrap.
Prerequisite: Create a Table
First, create a table by following the steps:
- Utilize the “<table>” element to create a table.
- Inside this element, add the “<thead>” tag to specify the heading. Create a row using the “<tr>” tag and add the “<th>” tag to add a heading.
- Then comes the body part, the “<tbody>” element is utilized to specify the table body.
- Within the body, create rows for the data. For instance, the first “<td>” adds an image, and the second “<td>” element adds the relevant description.
Here is the HTML code:
<thead>
<tr>
<th>Image</th>
<th>Device Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="/images/coffee-.jpg" width="200" height="130">
</td>
<td>Laptop</td>
</tr>
<tr>
<td>
<img src="/images/headphones-.jpg" width="200" height="130">
</td>
<td> Headphone</td>
</tr>
<tr>
<td>
<img src="/images/public-speaking-.jpg" width="200" height="130" >
</td>
<td> Public Speaking mic</td>
</tr>
</tbody>
</table>
Output
It can be observed that the table has been created successfully. Now, let’s see how to adjust the color of the table header in the next section.
How to Change Table Header Color Using Bootstrap?
The table header color can be changed using the “table-*” class, where the asterisk “*” symbolizes the color. For instance, “table-dark” for dark gray color, “table-success” for green color, and many more.
Let’s check out some examples of changing table header color.
Example 1: Apply Blue Color to the Table Header Using Bootstrap
Add the “table-primary” class to apply the blue color to the table header:
Output
Example 2: Apply Green Color to the Table Header Using Bootstrap
Specify the “table-success” class to apply the green color to the table header:
Output
That is how you can change the table headset color using Bootstrap.
Conclusion
In Bootstrap, the table header color can be changed using the “table-*” class. First, create the table using the HTML “<table>” element. Then, specify the “<thead>” tag for the heading and the “<tbody>” tag for the table body. Add the “table-*” class to the “<thead>” tag to set the header color, such as the “table-primary” sets the blue color, and many more. This post has explained how to create a table and how we can change its header color using Bootstrap.
