How to Define a Table Class to Control the Style of Table Rows in CSS

In this article, we’ll learn how to use CSS to define a class to control the style of table rows. Tables are one of the most commonly used elements in web development. By defining a class, we can easily control the style of table rows to suit different design requirements.

Read more: CSS Tutorial

What are CSS Classes?

In CSS, classes are a useful concept that allows you to group elements with similar selectors together, making it easier to apply unified styles to them. By defining a class, you can apply styles to selected elements by adding the class name.

For tables, we can control the styling of table rows by defining a table class and applying it to each row. Next, we’ll explain how to create and use this table class.

Creating a Table Class

To create a table class, we first need to define a selector to select the table rows we want to style. Table rows are typically defined using the <tr> tag, so we can use the tr selector to select table rows.

For example, if we want to set the background color of a table row to light gray, we can define the following CSS rule:

.table-row {
background-color: #f2f2f2;
} 

In the example above, we create a class called .table-row and set the background-color property to #f2f2f2, which represents a light gray color. Next, we can apply this class to the table rows.

Applying Table Classes

To apply table classes to table rows, we can add the class name to the class attribute in the <tr> tag. For example, if we wanted to apply the .table-row class created above to each row in the table, we could modify the code as follows:

<table> 
<tr class="table-row"> 
<td>1</td> 
<td>John</td> 
<td>Doe</td> 
</tr> 
<tr class="table-row"> 
<td>2</td> 
<td>Jane</td> 
<td>Smith</td> 
</tr> 
<tr class="table-row"> 
<td>3</td> 
<td>David</td> 
<td>Brown</td> 
</tr>
</table>

In the example above, we added the class="table-row" attribute to each <tr> tag, thus applying the .table-row class to each table row. This successfully applies the table class to the table rows.

Controlling Table Row Styles

By defining and applying table classes, we can easily control the style of table rows. The following are some common style control examples:

Background Color

We can set the background color of a table row by defining the background-color property in the table class. For example, let’s set the background color of a table row to light gray:

.table-row {
background-color: #f2f2f2; 
} 

Font Color

We can set the color of the text in a table row by defining the color property. For example, let’s set the text color in a table row to blue:

.table-row {
color: blue; 
} 

Border Style

We can set the border style of a table row by defining the border property. For example, let’s set the top border of a table row to a solid red line with a width of 1 pixel:

.table-row {
border-top: 1px solid red;
}

Hover Styles

We can use the CSS pseudo-class selector :hover to define the style of a table row when the mouse hovers. For example, let’s set the background color of a table row to light blue when the mouse hovers:

.table-row:hover {
background-color: lightblue;
}

Through the above examples, we can see that by defining a table class, we can flexibly control the style of table rows to meet different design requirements.

Summary

By defining a CSS class and applying it to a table row, we can easily control the styling of table rows. This article explains how to create and apply table classes, and provides some common examples. By flexibly using CSS classes, we can achieve a variety of styling effects for table rows to meet different design needs.